Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Canvas-Gradient mit Animation: Hübsche Hintergründe für eure Webseite

    Canvas-Gradient mit Animation: Hübsche Hintergründe für eure Webseite
Animierte Canvas-Gradients mit Granim.js erstellen. (Screenshot: Granim.js)

Background-Gradients sind seit CSS3 keine großartige Schwierigkeit mehr. Wieso wir trotzdem mit Canvas arbeiten und was genau die Javascript-Lib besser kann, zeigen wir euch jetzt.

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)
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!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden
Alle Jobs
Zur Startseite
Zur Startseite