molily: Technik hinter Webseite

Beitrag lesen

Hallo,

Falls einer von euch mir sagen könnte, wie sowas umgesetzt wurde bzw. wonach ich suchen muss, um etwas ähnliches zu erstellen, wäre ich sehr sehr dankbar.

Da gibt es keine einfache Antwort und kein fertiges Tutorial. Das ist eine Mischung aus verschiedenen JavaScripten und responsivem CSS.

Die Anpassungsfähigkeit hinsichtlich der Viewport-Breite wird vermutlich mit altbekannten CSS-Media-Queries und flexiblen Layouts gelöst.

JavaScript fängt scroll-Events ab und sorgt durch programmatisches Scrollen für den bildschirmfüllenden Blätter-Effekt. Dazu müssen die einzelnen »Slides« vorher auf die Viewport-Höhe gesetzt werden. Das geht theoretisch auch mit CSS, aber robust nur mit zusätzlichem JavaScript.

JavaScript hört auch auf bestimmte Scroll-Schwellen, lädt Inhalte oder blendet sie ein, und aktualisiert die Navigation.

jQuery ist eine vielseitige DOM-Bibliothek, die diese Aufgaben auf unterster Ebene abdeckt. Es gibt einige Bibliotheken und Plugins, die in die Richtung gehen, z.B.:

http://scrolldjs.com/
https://github.com/peachananr/onepage-scroll
http://alvarotrigo.com/fullPage/

Die Logik auf oberster Ebene müsstest du wahrscheinlich selbst schreiben.

Siehe auch meinen Hintergrundartikel zum Interactive Storytelling.

Grüße
Mathias