Dynamisches Webdesign mit HTML5-Elementen

Ausgefallene Farb- oder Scroll-Effekte, wechselnde Anzeigen von Inhalten, Animationen und mehr: Nicht immer passt es, mitunter kann ein dynamisches Webdesign jedoch die „Wertigkeit“ und Wirkung einer Website signifikant erhöhen. Wie das mit HTML5-Data-Attributen geht, zeigt ein neuer Artikel auf t3n.

Mit HTML5-Data-Attributen können beliebige Daten valide im Quellcode eines HTML-Dokuments untergebracht werden. Für den Betrachter sind diese zuerst unsichtbar – aber nicht unnötig, wie der Artikel von Dieter Petereit so schön titeln. Die Daten können nämlich anschließend ausgewertet und für bestimmte Aktionen auf der Website verwendet werden.

So lassen sich sowohl optische Effekte als auch die Steuerung von einzelnen Inhalten realisieren, ohne dass dazu z.B. gleich eine Datenbank-Anwendung mit aufwändiger PHP-Programmierung im Hintergrund werkeln muss. Für die Weiterverarbeitung bietet sich dann beispielsweise JavaScript an.

In dem Artikel gibt tn3 anschließend auch konkrete Beispiele für die Verwendung und Weiterverarbeitung von HTML5-Data-Attributen. So lassen sich mit dynamo.js dynamische Textschnipsel erzeugen und entsprechend im Kontext der Website anzeigen. Bekannter und auch auf zahlreichen Websites in der Praxis zu finden ist skrollr, mit dem sich vielfältige Animationen realisieren lassen. Gesteuert werden Aussehen und Verhalten der Website hierbei weitgehend über CSS, so dass für die Erstellung von Animationen und Effekten mit skrollr nicht unbedingt js-Kenntnisse erforderlich sind. Unter anderem lässt sich auch der bekannte Parallax Effekt mit skrollr einfach verwirklichen.

Hier geht’s zum Artikel auf t3n:
Dynamisches Webdesign mit HTML5-Data-Attributen: So geht’s

Tag-It: Dynamisches Webdesign, HTML5-Elemeten, HMTL-Programmierung, JavaScript, CSS, skrollr