Schulaufgabe (praktische Arbeit): Scrollytelling

Aufgabe

Sie entwickeln im Team eine Scrollytelling-Website zu einem selbst gewählten Thema. Die Geschichte entfaltet sich beim Scrollen: Texte, Bilder und Grafiken erscheinen, wechseln oder verändern sich abhängig davon, wie weit die Nutzerin oder der Nutzer gescrollt hat.

Das Thema ist frei wählbar, zum Beispiel Nachhaltigkeit, Kultur, Technik, Sport, Ihre Region oder eine persönliche Geschichte. Entscheidend ist, dass Ihr Thema eine echte Geschichte trägt und nicht nur eine Sammlung von Informationen ist.

Was ist Scrollytelling?

Scrollytelling setzt sich aus „Scrolling“ und „Storytelling“ zusammen. Das Scrollen wird zum Erzählmittel: Die Nutzerin oder der Nutzer bestimmt das Tempo, die Website reagiert darauf. Typisch ist eine Sticky-Sequenz. Dabei bleibt eine Grafik oder ein Bild stehen, während Textabschnitte daran vorbeilaufen. Jeder neue Textabschnitt verändert die Grafik.

Ein bloßer Effekt, etwa ein eingeblendetes Bild, macht noch kein Scrollytelling. Die Interaktion muss die Geschichte unterstützen und darf nicht nur dekorativ sein.

Rahmenbedingungen

• Teamarbeit: 2–3 Personen pro Team. Einzelarbeit ist auf Wunsch möglich.
• Umfang: 4–6 Kapitel, insgesamt ca. 600–1.000 Wörter Text.
• Zeit: ca. 20 Unterrichtsstunden. Heimarbeit ist erlaubt, aber nicht verpflichtend.
• Technik: HTML, CSS und JavaScript ohne Frameworks oder Bibliotheken. Für die Sticky-Sequenz erhalten Sie eine Vorlage, die Sie anpassen und erweitern.
• Medien: Verwenden Sie eigene Fotos, Grafiken und Texte oder Material mit geklärten Nutzungsrechten. Alle Quellen werden im Abspann der Website angegeben.
• KI: Der Einsatz von KI ist erlaubt. Jede Nutzung muss gekennzeichnet werden, in der Dokumentation und als Kommentar im Code. Sie müssen jede Zeile Ihres Codes erklären können.

Technische Mindestanforderungen

1. Semantisches HTML (header, main, section, figure, footer …) und valider Code (Prüfung mit dem W3C-Validator).
2. Responsives Layout, entwickelt nach dem Prinzip Mobile First. Die Seite funktioniert auf dem Smartphone und am Desktop.
3. Mindestens eine Sticky-Sequenz auf Basis der Vorlage, mit eigenen Inhalten und eigener Gestaltung.
4. Berücksichtigung von prefers-reduced-motion: Ihre Geschichte muss auch ohne Animationen verständlich sein.
5. Optimierte Bilder: moderne Formate (WebP oder AVIF), angemessene Abmessungen, alt-Texte und loading="lazy" für Bilder unterhalb des ersten Bildschirms.
6. Veröffentlichung der Website über Netlify.

Wahlmodul

Setzen Sie zusätzlich mindestens eine der folgenden Funktionen um:

• Bildvergleich (Vorher/Nachher-Schieberegler)
• Einfache Datenvisualisierung, zum Beispiel ein Balkendiagramm aus HTML/CSS oder SVG
• Fortschrittsanzeige, die zeigt, wie weit die Geschichte schon gelesen wurde
• Zweite Sticky-Sequenz mit anderer Funktion, zum Beispiel einer Grafik, die sich schrittweise aufbaut
• Eigene Idee nach Absprache mit der Lehrkraft

Ablauf

1. Einstieg (ca. 2 Std.): Analyse von Scrollytelling-Beispielen, Teambildung, Themenfindung
2. Konzept (ca. 3 Std.): Storyboard bzw. Scroll-Map (welcher Textabschnitt löst was aus), Moodboard, Festlegung von Farben, Schriften und Bildstil, Arbeitsteilung im Team
3. Meilenstein Konzept: Kurze Vorstellung Ihres Konzepts (ca. 3 Min.). Sie erhalten Rückmeldung, bevor Sie mit der Umsetzung beginnen.