Lebendige Effekte auf Websites können dir im Wettbewerb um die Aufmerksamkeit der Nutzer gute Dienste leisten. Du denkst vielleicht direkt an parallaxes Scrolling. Das aber ist nicht die einzige Option für dynamisches Webdesign.
HTML5-Data-Attribute: Unsichtbar, aber nicht unnötig
Mit HTML5-Data-Attributen bringst du beliebige Daten innerhalb eines validen Quellcodes unter. Unter Verwendung von Data-Attributen ausgezeichnete Daten werden dem Betrachter nicht angezeigt und wirken sich nicht auf das Layout aus. Dennoch sind sie in der Seite enthalten und können einfach, beispielsweise unter Verwendung von JavaScript, weiterverarbeitet werden.
Dynamische Textschnipsel mit dynamo.js
dynamo.js ist ein recht einfaches, nahezu idiotensicheres JavaScript des Entwicklers Jordan Scales, der hauptberuflich für die Khan Academy tätig ist. Die Aufgabe von dynamo.js besteht darin, Textinhalte mit Animationen so auszustatten, dass Textteile dynamisch ausgewechselt werden können. Das klingt auf den ersten Blick reichlich unnötig, bietet bei näherem Hinsehen aber durchaus interessante Möglichkeiten.
dynamo.js arbeitet mit HTML5-Data-Attributen und einer CSS-Klasse namens dynamo, auf die dann die Funktion .dynamo() losgelassen wird. Um beispielsweise den folgenden Satz
Ich wünschte, ich hätte Flügelmit völlig neuen Bedeutungen zu versehen, könntest du dynamo.js wie folgt verwenden:
Ich wünschte, ich hätte <span class="dynamo" data-lines="zehn Millionen Euro,immer Recht,Urlaub">Flügel</span> Nun würde dynamo.js die innerhalb des Data-Atributs data-lines stehenden Ausdrücke alle drei Sekunden durchwechseln. Heraus käme (ohne den Fettsatz):
Ich wünschte, ich hätte Flügel
Ich wünschte, ich hätte zehn Millionen Euro
Ich wünschte, ich hätte immer Recht
Ich wünschte, ich hätte Urlaub
Dieser und andere Effekte sind auf der dynamo-Website zu betrachten. Anders, als ich das hier getan habe, solltest du Umlaute, Leer- und sonstige Sonderzeichen sicherheitshalber in ihren jeweiligen Entitäten schreiben. Dynamo.js nimmt es da bisweilen sehr genau.
Zusätzlich zur Angabe der rotierenden Inhalte steuerst du über die Attribute data-speed und data-delay die Geschwindigkeit der Rotation. Das Attribut data-centerzentriert die Textinhalte innerhalb des Span. Grundsätzlich kannst du .dynamo() auf jedes Element anwenden. Durch eine wilde Kombination innerhalb ein und desselben Textes kann man zu geradezu chaotischen inhaltlichen Verfremdungen gelangen.
Das Script steht auf GitHub zur kostenlosen Nutzung unter MIT-Lizenz bereit. Es setzt jQuery voraus.
Animationen mit skrollr
skrollr erlaubt die Animation jedweder CSS-Eigenschaft eines Elements in Abhängigkeit zur Position des horizontalen Scrollbalkens. Klingt kompliziert, ist es aber gar nicht.
Die Animation wird über Data-Attribute gesteuert. Der folgende (vergleichsweise einfache) Codeschnipsel führt etwa zu einer Änderung der Hintergrundfarbe der Website während des Scrollvorganges.
<body data-0="background:hsl(0, 50%, 70%);" data-end="background:hsl(360, 50%, 70%);"></body>Das Attribut data-0 bezeichnet dabei den Ausgangszustand, das korrespondierende data-end den Endzustand. Die Zwischenzustände berechnet skrollr automatisch.
Die Steuerung erfolgt über Keyframes aus dem DOM und kann daher sehr fein werden. So lassen sich äußerst komplexe Animationen erstellen, wie sie etwa auf der Beispiel-Website Verwendung finden.
Kenntnisse in JavaScript sind für die Verwendung der skrollr-Funktionalität nicht erforderlich. In CSS solltest du dich allerdings auskennen.
Da innerhalb der Data-Attribute mit CSS gearbeitet wird, sind deinen Möglichkeiten kaum Grenzen gesetzt. Das leidige Vendor-Prefixing erledigt skrollr automatisch, da ein manuelles Prefixing innerhalb der skrollr-Syntax gar nicht möglich wäre.
skrollr benötigt keine sonstige Unterstützung in Form von etwa jQuery oder anderen Bibliotheken und bringt schlanke 12 Kilobyte auf die Waage. Die kleine Animations-Bibliothek wurde maßgeblich von Alexander Prinzhorn entwickelt und steht auf GitHub unter der MIT-Lizenz zur kostenlosen Nutzung bereit.
Zu beachten ist, und darauf weist Alexander dankenswerterweise selber hin, dass skrollr seit mittlerweile fast vier Jahren, nämlich seit September 2014, nicht mehr aktiv weiterentwickelt wird. Das wird bei der Verwendung in modernen Browsern, vornehmlich mobilen Vertretern ihrer Zunft, irgendwann zum Problem werden.
Andererseits arbeitet skrollr auf Mobilgeräten ohnehin anders als auf dem Desktop. Die Bibliothek erkennt den mobilen Zugriff und schaltet das native Scrolling ab. Das vorgetäuschte Scrolling erfolgt dann mit CSS Transforms auf Basis von Touch-Events. Nach meinem Verständnis sollte das Konzept durchaus noch eine Weile halten.
Auf dieser Seite stellt der Entwickler eine recht lange Liste von Verwendern der Bibliothek zusammen. Mir persönlich gefällt die Seite des Eckwerk sehr gut. Anders als in der doch recht theoretischen, zumindest aber trockenen Präsentation der Bibliothek auf der eigens dafür erstellten Demoseite, zeigt das Eckwerk was skrollr kann, wenn es auf interessante Inhalte mit einer lebendigen Gestaltung losgelassen wird.
Suchst du nach einer Lösung, wie du HTML und CSS bearbeitest? Wir haben 10 HTML-Editoren getestet und stellen sie vor. Vielleicht ist auch für dich etwas dabei?
