Canvas-Gradient mit Animation: Hübsche Hintergründe für eure Webseite
Wieso Canvas und kein CSS3-Gradient?
CSS3-Gradients sind super. Wir können schnell und einfach Verläufe erstellen und diese werden automatisch auf das selektierte DOM-Element angewandt. Sobald wir diese aber mit Javascript oder jQuery manipulieren wollen, wird es schon schwierig. Mögliche Browser-Präfixe müssen beachtet werden, es muss immer die vollständige Anweisung hinterlegt werden und es ist nicht möglich, nur den einzelnen Farbcode zu ändern.
Viele Zeilen Code verstreichen, um überhaupt erstmal die Farbe zu wechseln. Haben wir dies geschafft, ändert sich die Farbe direkt, da wir aber einen fließenden Übergang zwischen den Farben herstellen wollen, fordert dies erneut unsere grauen Zellen. Funktionen und Code müssen erstellt werden, um die einzelnen Steps zwischen den Farben zu berechnen und OnTheFly dauerhaft zu manipulieren.
Unser Code bläht sich auf, die Performance leidet und wir merken so langsam, wieso CSS3-Gradients weniger gut für Animationen geeignet sind – das Thema Event-Handling wollen wir erst gar nicht anschneiden. Die dynamische Zeichenfläche Canvas ist dafür bestens geeignet. Wir müssen uns keine Gedanken mehr um die Umsetzung machen, da uns die Javascript-Lib Granim.js eine API, Events und Options bereitstellt, um einen hübschen, animierten Background-Gradient zu erstellen.
Canvas-Gradients kinderleicht erstellen
Canvas-Animation des Hintergrundes. (Screenshot: Granim.js)
Für die Umsetzung muss nur die Javascript-Lib vom offiziellen Github-Repo heruntergeladen und in unsere Webseite eingebettet werden. Sobald wir das erledigt haben, können wir auch direkt mit der Umsetzung starten. Dafür legen wir folgenden Code an:
Über verschiedene Options und Events können wir auch weitere Farben oder Animations-Abläufe bestimmen. Callbacks können definiert werden und unsere Animation wird problemlos in unserer Webseite eingebettet. Die vollständige Dokumentation könnt ihr auf Granim.js nachschlagen. Dort findet ihr auch weitere Demos, die euch helfen können.
Erstellt eure eigenen Animationen und verlinkt sie uns in den Kommentaren!
Ebenfalls interessant:
