Best Webdesign: HTML5 Tutorials und jQuery Parallax Plugins
Kommentare

HTML5 und Parallax Scrolling sind zwei dominierende Themen im Webdesign. Während HTML5 ein Auszeichnungssprache ist, die laufend weiterentwickelt wird und das Aussehen des WWW verändert, stellt Parallax Scrolling einen Design-Trend dar, der immer populärer wird. 

In folgendem Beitrag erklären wir Euch die Grundlagen von HTML5 und von Parallax Scrolling und zeigen Euch Best Practice Beispiele und Tutorials.

HTML

Hyper Text Markup Language, kurz HTML genannt, ist eine textbasierte Auszeichnungssprache die am 3. November 1990 erschien und nun vom World Wide Web Consortium W3C und der Web Hypertext Application Working Group (WHATWG) weiterentwickelt wird.

Vorteile von HTML5 Video 

HTML5 weist einige Stärken auf, die das Entwicklerherz höher schlagen lassen. Die Entwicklung von HTML5 steckt zwar noch in den Kinderschuhen – folgende Features sind aber bereits jetzt integriert und werden die Zukunft des Webdesigns maßgeblich mitgestalten:

 

  • Eine große Stärke von HTML 5 ist die Wiedergabe von Video- und Audio-Dateien ohne Plugins. Dafür gibt es zwei Tags im Quelltext. Diese werden mit einer einzigen Codezeile im Quelltext aufgeführt und lassen sich auch per CSS-formatieren.
  • Video- und Audio-Elemente lassen sich über eine Javascript API ansprechen – das Zusammenspiel von HTML, CSS und Javascript verschiebt die Grenzen des Möglichen und ermöglicht neue Webdesign-Konzepte.
  • Audio ist eines der wichtigsten Features von HTML5, weil es den Weg für neue Web-Radiosender, die auf dem Smartphone funktionieren, oder neue Browser Games geebnet hat.
  • Grafisch aufwendige Anwendungen wurden in der Vergangenheit mit Plugins umgesetzt. HTML5 bietet mit Canvas und SVG gleich zwei Grafik-Schnittstellen. Wobei SVG eigentlich ein eigener Standard ist und mit HTML5 nicht direkt etwas zu tun hat.
  • Canvas ist eine Pixel-orientierte Immediate-Mode-Grafikschnittstelle. Simple betrachtet ist Canvas ein neuer Tag, der mit HTML5 eingeführt wird und der Bildgestaltung im Webdesign neue Horizonte eröffnet.

 

Watch and learn

Hier sind zwei HTML5-basierte Webseiten, die aufgrund ihrer Originalität oder souveränen Umsetzung der neuesten Webtechnologien aus der Masse herausstechen: 

Wall of Resistance

Hier geht es um Politik und um eine friedliche Form des Protestes im Netz: Die türkische Website Wall of Resistance, auch bekannt als #direnduvar, ist eine interaktive Wand, auf der jeder seine eigene politische Botschaft in Form eines Skribbles hinterlassen kann.

Im vergangenen Jahr gingen in Istanbul Bürger wochenlang auf die Straße, um gegen die Regierung von Recep Erdogan zu demonstrieren. Die gewaltsamen Auseinandersetzungen zwischen Zivilisten und der Polizei hatten weltweit für Empörung gesorgt.

Mit Wall of Resistance geht der Protest im Netz weiter und zwar friedlich, demokratisch und für jeden zugänglich.

Die Besucher der HTML5-basierten Website können die Ansicht verändern, indem sie hineien- und hinauszoomen. Dank dieser Navigationstechnik lässt sich Direnduvar auch auf mobilen Endgeräten hervorragend aufrufen:

html5 website

Screenshot: http://direnduvar.com/#x=-96&y=63&z=5

 

Antro.ca

Flat Design ist so angesagt und präsent, dass wir uns bald daran sattgesehen haben könnten. Die beste Chance für eine längere Halbwertszeit: Wenn Webdesigner mit ausgefallenen Konzepten frischen Wind in die immer sachlicher und flacher designte Web-Welt bringen.

Ein gelungenes Beispiel dafür liefern uns die kreativen Köpfe von Antro.ca, einer in Montreal ansässigen Agentur. Die HTML5-basierte Webseite spielt mit Animationen, netten Parallax-Scrolling-Effekten und einer neuen Sachlichkeit, die alles andere als flach ist.

Die ausgefallene Typografie sowie die minimalistischen Grafiken runden das optische Erscheinungsbild der Webseite ab und bescheinigen den Designern ein gutes Händchen, wenn es darum geht, aktuelle Webdesign-Trends neu zu interpretieren:

html best practice

Screenshot: http://www.antro.ca/en/

HTML5 Tutorials

HTML5 bietet ein breites Spektrum an Möglichkeiten, eine Webseite einzigartig zu gestalten. Einen kleinen Eindruck davon, was mit HTML5 möglich ist, zeigen die Links zu folgenden Tutorials:

 

Einen Fortschrittsbalken mit HTML5 Canvas erstellen

html 5 canvas

Screenshot: http://mag.splashnology.com/article/how-to-create-a-progress-bar-with-ht…

 

 

Einen personalisierten HTML5 Video-Player mit CSS3 und jQuery bauen

jquery tutorial

Screenshot: http://dev.opera.com/articles/custom-html5-video-player-with-css3-and-jq…

 

In fünf einfachen Schritten einen „Post-it“-Effekt mit HTML5 und CSS3 generieren

html5 tutorial

Screenshot: http://code.tutsplus.com/tutorials/create-a-sticky-note-effect-in-5-easy…

 

Parallax Scrolling

Parallax Scrolling, ist eine Webdesign-Technik, bei der sich verschiedene Ebenen in unterschiedlichen Geschwindigkeiten bewegen, wenn man über die Webseite scrollt. So lassen sich etwa grafische Elemente wie Wolken oder Vögel im Hintergrund, zeitversetzt animieren. Der dabei entstehende 3D-Effekt verleiht der Seite Tiefe und lädt den Besucher der Seite zum Verweilen ein.

Der Einsatz von Parallax Scrolling oder zu Deutsch einfach Bewegungs-Parallaxe genannt, häuft sich seit 2008 auf Webseiten. 2013 bekam Parallax Scrolling einen Schub, nachdem der Sportatikelhersteller Nike eine aufwendige Parallax-Scrolling-Webseite gelauncht hatte. Mit Hilfe von kostenlosen Plugins, kann mittlerweile jeder Webdesigner coole Parallax Effekte auf seine Seite hinzufügen. 

Parallax Scrolling Plugins

Parallax Backround mit jQuery

Dieses Tutorial von Themeforest.net zeigt Euch Schritt für Schritt, wie Ihr die oben angesprochenen Wolken auf Eurer Webseite zum Leben erwecken könnt. Das besondere an diesem jQuery-basierten Tutorial ist, dass sich die Wolken im Hintergrund horizontal bewegen, während der Besucher aber nach unten, also vertikal scrollt. Mehr über jQuery könnt ihr übrigens auch noch in diesem Artikel nachlesen.

 parallax plugin

Bidquelle Screenshot: Themeforest.net

Parallax.JS

Das Parallax JavaScript Bibliothek basiert auf HTML und CSS. Jeder <secton> Tag wird zusammen mit jedem Element aus der animate Klasse geparsed, um Parallax-Effekte zu generieren. Eine der Besonderheiten ist unter anderem ein Pause-Feature, das einen Seitenteil für eine zu bestimmende Dauer locked, sprich feststellt. Eine Demonstrationsseite visualisiert die Möglichkeiten. Runterladen kann man Parallax.JS bei Github.

parallax scrolling

Screenshot: http://razorfish.github.io/Parallax-JS/#intel

 

Parallax Slider

Wie der Name schon vermuten lässt, handelt es sich bei dem Parallax Slider nicht um ein vertikales Design, sondern um ein horizontales, bei dem man durch ein Verschieben nach rechts oder links den Parallax-Effekt auslöst. Dies eignet sich zum Beispiel für Fotogallerien oder Links zu Artikeln. Die Demo gibt es hier, den Code könnt Ihr auf der Seite der Entwickler kostenlos herunterladen.

parallax slide show

Screenshot:http://tympanus.net/Tutorials/ParallaxSlider/

Responsive jQuery kostenlose Plugins und Tutorials

SlidesJS

SlidesJS ist ein responsives Slideshow-Plugin für jQuery 1.7 und höher. Es unterstützt Touch und CSS3 Transitions. Mit der einfachen Einbindung werden auch Neulinge gut zurecht kommen.

slidejs

Screenshot: http://slidesjs.com/

Weitere Slider Plugins:

Für responsive Fans bietet jQuery zahlreiche kostenlose Plugins an. Wir haben hier einige für euch aufgezählt.

jQuery Slider Shock

Der responsive jQuery-/WordPress-Slider bietet sehr viele unterschiedliche Konfigurationsmöglichkeiten. An Bord sind Effekte für das Überblenden und es gibt Thumbnails und 3D Animationen. Eines der interessantesten Features ist „Multiple Data Sources“. Das bedeutet, dass sich YouTube Videos sowie Bilder von Instagram, Flickr oder aus einem RSS-Feed einbinden lassen. Auch der Inhalt eines Twitter-Accounts kann eingebunden werden.

html5 tutorial

Screenshot: http://www.jqueryslidershock.com/

Modern Slide In

Dieser schlichte Responsive Slider setzt auf CSS Transitions und eignet sich vor allem für Produktpräsentationen. Er funktioniert auf Desktop, Tablet und Mobile. Die Slides gleiten von rechts herein, bei einem Slide-Wechsel wird das verschwindenden Slide per Fade ausgeblendet. Dank Touch Support kann man auch mit dem Finger zwischen den Slides wechseln.

html5 tutorial

Screenshot http://www.sequencejs.com/themes/modern-slide-in/

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -