Anzeige
Anzeige
UX & Design
Artikel merken

Dynamisches Webdesign mit HTML5-Data-Attributen: So geht’s

Dynamische Effekte auf Websites sind zwar nicht für jedes Projekt geeignet. Wenn es aber passt, dann kann es bisweilen gar nicht dynamisch genug sein. Parallaxes Scrolling hat viele Fans, ist aber nicht die einzige Option für lebendiges Webdesign.

3 Min. Lesezeit
Anzeige
Anzeige
Sooo dynamisch muss es natürlich meist doch nicht sein. (Foto: Pixabay)

Sooo dynamisch muss es natürlich meist doch nicht sein. (Foto: Pixabay)

Sooo dynamisch muss es meist gar nicht sein. (Foto: Pixabay)

HTML5-Data-Attribute: Unsichtbar, aber nicht unnötig

Mit HTML5-Data-Attributen können wir beliebige Daten innerhalb eines validen Quellcodes unterbringen. 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

Anzeige
Anzeige

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: dynamo.js)

dynamo.js konzentriert sich auf das Auswechseln von Textteilen. (Screenshot: dynamo.js)

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

Anzeige
Anzeige
Ich wünschte, ich hätte Flügel

mit völlig neuen Bedeutungen zu versehen, könntet ihr dynamo.js wie folgt verwenden:

Anzeige
Anzeige

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:

Anzeige
Anzeige

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, solltet ihr 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 steuert ihr über die Attribute data-speed und data-delay die Geschwindigkeit der Rotation. Das Attribut data-center zentriert die Textinhalte innerhalb des Span. Grundsätzlich könnt ihr.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.

Anzeige
Anzeige

Animationen mit skrollr

Die Demos zu skrollr zeigen, was geht, sind aber keine Augenweide. (Screenshot: skrollr)

Die Demos zu skrollr zeigen, was geht, sind aber keine Augenweide. (Screenshot: 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.

Anzeige
Anzeige

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 sollte man sich allerdings auskennen.

Da innerhalb der Data-Attribute mit CSS gearbeitet wird, sind den 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.

Anzeige
Anzeige

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 wird 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 einem Jahr, also seit September 2014, nicht mehr aktiv weiterentwickelt wird. Das kann 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.

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

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

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.

Was nutzt ihr, wenn es mal dynamischer zugehen soll?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
4 Kommentare
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

Sebastian

Skrollr ist ein grossartiges kleines Tool. Aber wie gross ist die Librarie nun ? Im org. Artikel auf Dr.Web stand noch 2kb. Sind eigtl. Alternativen bekannt die ähnlich gut funkt. ? Schade auch, dass er es nicht weiterentwickelt wird.

Antworten
Dieter Petereit

Richtig sind 12 kb. Zur damaligen Zeit war 2kb richtig.

Antworten
Sebastian

Danke für die Antwort. Und zwecks Alternativen? Ich sehe da grad nur ScrollMagic… Sind Dir da noch andere Libraries bekannt die auch mobil unterstützen ?

Antworten
Seven20

Scrollorama und Superscrollorama?

Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige