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:
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team