Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 16. Februar 2018

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

Lebendige Effekte auf Websites kön­nen dir im Wettbewerb um die Aufmerksamkeit der Nutzer gute Dienste leis­ten. Du denkst viel­leicht direkt an par­al­la­xes Scrolling. Das aber ist nicht die ein­zi­ge Option für dyna­mi­sches Webdesign.

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

Mit HTML5-Data-Attributen bringst du belie­bi­ge Daten inner­halb eines vali­den Quellcodes unter. Unter Verwendung von Data-Attributen aus­ge­zeich­ne­te Daten wer­den dem Betrachter nicht ange­zeigt und wir­ken sich nicht auf das Layout aus. Dennoch sind sie in der Seite ent­hal­ten und kön­nen ein­fach, bei­spiels­wei­se unter Verwendung von JavaScript, wei­ter­ver­ar­bei­tet wer­den.

Dynamische Textschnipsel mit dynamo.js

dynamo.js ist ein recht ein­fa­ches, nahe­zu idio­ten­si­che­res JavaScript des Entwicklers Jordan Scales, der haupt­be­ruf­lich für die Khan Academy tätig ist. Die Aufgabe von dynamo.js besteht dar­in, Textinhalte mit Animationen so aus­zu­stat­ten, dass Textteile dyna­misch aus­ge­wech­selt wer­den kön­nen. Das klingt auf den ers­ten Blick reich­lich unnö­tig, bie­tet bei nähe­rem Hinsehen aber durch­aus inter­es­san­te Möglichkeiten.

dynamo.js kon­zen­triert sich auf das Auswechseln von Textteilen. (Screenshot: Dr. Web)

dynamo.js arbei­tet mit HTML5-Data-Attributen und einer CSS-Klasse namens dynamo, auf die dann die Funktion .dynamo() los­ge­las­sen wird. Um bei­spiels­wei­se den fol­gen­den Satz

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

mit völ­lig neu­en Bedeutungen zu ver­se­hen, könn­test du dynamo.js wie folgt ver­wen­den:

Ich wünschte, ich hätte <span class="dynamo" data-lines="zehn Millionen Euro,immer Recht,Urlaub">Flügel</span> 

Nun wür­de dynamo.js die inner­halb des Data-Atributs data-lines ste­hen­den Ausdrücke alle drei Sekunden durch­wech­seln. Heraus käme (ohne den Fettsatz):

Ich wünsch­te, ich hät­te Flügel
Ich wünsch­te, ich hät­te zehn Millionen Euro
Ich wünsch­te, ich hät­te immer Recht
Ich wünsch­te, ich hät­te Urlaub

Dieser und ande­re Effekte sind auf der dyna­mo-Website zu betrach­ten. Anders, als ich das hier getan habe, soll­test du Umlaute, Leer- und sons­ti­ge Sonderzeichen sicher­heits­hal­ber in ihren jewei­li­gen Entitäten schrei­ben. Dynamo.js nimmt es da bis­wei­len sehr genau.

Zusätzlich zur Angabe der rotie­ren­den Inhalte steu­erst du über die Attribute data-speed und data-delay die Geschwindigkeit der Rotation. Das Attribut data-centerzen­triert die Textinhalte inner­halb des Span. Grundsätzlich kannst du .dynamo() auf jedes Element anwen­den. Durch eine wil­de Kombination inner­halb ein und des­sel­ben Textes kann man zu gera­de­zu chao­ti­schen inhalt­li­chen Verfremdungen gelan­gen.

Das Script steht auf GitHub zur kos­ten­lo­sen Nutzung unter MIT-Lizenz bereit. Es setzt jQuery vor­aus.

Animationen mit skrollr

skrollr erlaubt die Animation jed­we­der CSS-Eigenschaft eines Elements in Abhängigkeit zur Position des hori­zon­ta­len Scrollbalkens. Klingt kom­pli­ziert, ist es aber gar nicht.

Die Demo zu skrollr zeigt, was geht, ist aber wirk­lich kei­ne Augenweide. (Screenshot: Dr. Web)

Die Animation wird über Data-Attribute gesteu­ert. Der fol­gen­de (ver­gleichs­wei­se ein­fa­che) Codeschnipsel führt etwa zu einer Änderung der Hintergrundfarbe der Website wäh­rend des Scrollvorganges.

<body data-0="background:hsl(0, 50%, 70%);" data-end="background:hsl(360, 50%, 70%);"></body>

Das Attribut data-0 bezeich­net dabei den Ausgangszustand, das kor­re­spon­die­ren­de data-end den Endzustand. Die Zwischenzustände berech­net skrollr auto­ma­tisch.

Die Steuerung erfolgt über Keyframes aus dem DOM und kann daher sehr fein wer­den. So las­sen sich äußerst kom­ple­xe Animationen erstel­len, wie sie etwa auf der Beispiel-Website Verwendung fin­den.

Kenntnisse in JavaScript sind für die Verwendung der skrollr-Funktionalität nicht erfor­der­lich. In CSS soll­test du dich aller­dings aus­ken­nen.

Da inner­halb der Data-Attribute mit CSS gear­bei­tet wird, sind dei­nen Möglichkeiten kaum Grenzen gesetzt. Das lei­di­ge Vendor-Prefixing erle­digt skrollr auto­ma­tisch, da ein manu­el­les Prefixing inner­halb der skrollr-Syntax gar nicht mög­lich wäre.

skrollr benö­tigt kei­ne sons­ti­ge Unterstützung in Form von etwa jQuery oder ande­ren Bibliotheken und bringt schlan­ke 12 Kilobyte auf die Waage. Die klei­ne Animations-Bibliothek wur­de maß­geb­lich von Alexander Prinzhorn ent­wi­ckelt und steht auf GitHub unter der MIT-Lizenz zur kos­ten­lo­sen Nutzung bereit.

Zu beach­ten ist, und dar­auf weist Alexander dan­kens­wer­ter­wei­se sel­ber hin, dass skrollr seit mitt­ler­wei­le fast vier Jahren, näm­lich seit September 2014, nicht mehr aktiv wei­ter­ent­wi­ckelt wird. Das wird bei der Verwendung in moder­nen Browsern, vor­nehm­lich mobi­len Vertretern ihrer Zunft, irgend­wann zum Problem wer­den.

Andererseits arbei­tet skrollr auf Mobilgeräten ohne­hin anders als auf dem Desktop. Die Bibliothek erkennt den mobi­len Zugriff und schal­tet das nati­ve Scrolling ab. Das vor­ge­täusch­te Scrolling erfolgt dann mit CSS Transforms auf Basis von Touch-Events. Nach mei­nem Verständnis soll­te das Konzept durch­aus noch eine Weile hal­ten.

Eckwerk zeigt, dass man mit skrollr rich­tig schi­cke und dyna­mi­sche Designs bau­en kann. (Screenshot: Dr. Web)

Auf die­ser Seite stellt der Entwickler eine recht lan­ge Liste von Verwendern der Bibliothek zusam­men. Mir per­sön­lich gefällt die Seite des Eckwerk sehr gut. Anders als in der doch recht theo­re­ti­schen, zumin­dest aber tro­cke­nen Präsentation der Bibliothek auf der eigens dafür erstell­ten Demoseite, zeigt das Eckwerk was skrollr kann, wenn es auf inter­es­san­te Inhalte mit einer leben­di­gen Gestaltung los­ge­las­sen 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.

Schreibe einen Kommentar

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