Schicke Hintergrundanimation mit JQuery UI

Demo Download

Heute gibt es nur ein kurzes aber dafür sehr universelles Tutorial. Ich zeige euch nämlich wie man die komplette Hintergrundfarbe einer Website oder auch nur eines Teils der Website schick animieren kann.

Dafür braucht man bloß etwas JQuery und das JQuery UI(JQuery User Interface).  Beides kann man einfach von einer Google API einbinden:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Der JQuery Code

Eigentlich braucht man gar nichts anderes als den JQuery Code und der sieht so aus:

function changeBGcolor() {

        $('body').animate({ backgroundColor: "#0000ff" },15000).animate({ backgroundColor: "#ff0000" },15000,function() {
            changeBGcolor();
        });
    }

$(document).ready( function(){
    changeBGcolor();
    });

Ich habe wieder alles in eine Funktion geschrieben damit man sie einfach in eine eventuell bereits bestehende Funktionsbibiliothek reinkopieren kann.

Mit $(body) wird das HTML-Tag body selektiert, also die komplette sichtbare Website.
Mit .animate({ backgroundColor: „#0000ff“},1500) wird die Anweisung gegeben dass die Hintergrundfarbe innerhalb von 1500 Milisekunden(Tausendstelsek.) mithilfe einer Animation zu #0000ff  geändert wird.
Diesen schritt kann man beliebig oft wiederholen in den man ihn einfach von neuem hinten Anhängt und eine andere Farbe als Wert eingibt.

Dem letzten Durchgang des Animierens muss man allerdings noch eine sog. Callbackfunktion(funktion die nach der Beendung der Animation ausgeführt wird) mit auf den Weg geben. Diese Funktion macht nichts anderes als die Funktion changeBGcolor() wieder aufzurufen und somit eine Endlosschleife zu erzwingen.

Danach muss natürlich die Funktion mit changeBGcolor() überhaupt noch aufgerufen werden.

Das wars eigentlich schon 🙂
Ich hoffe euch hat mein Tutorial gefallen und ihr könnt es gut für eure Projekte verwenden.
Bei Fragen und Problemen zögert nicht und schreibt einen Kommentar oder eine E-Mail.

Kommentar verfassen