Dieter Petereit 16. Februar 2018

Einfache Lösungen für dynamisches Webdesign mit HTML5-Data-Attributen

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 konzentriert sich auf das Auswechseln von Textteilen. (Screenshot: Dr. Web)

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ügel

mit 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 Demo zu skrollr zeigt, was geht, ist aber wirklich keine Augenweide. (Screenshot: Dr. Web)

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.

Eckwerk zeigt, dass man mit skrollr richtig schicke und dynamische Designs bauen kann. (Screenshot: Dr. Web)

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.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück