Geschichten erzählen mit Parallax Scrolling
In Ergänzung zu meinem gestrigen Beitrag, in dem es unter anderem ja auch um mein Projekt »Zurück zu den Wurzeln – (statische) Webseiten basteln ohne Sinn und Verstand« ging, ist mir (verspätet) noch eine interessante Playlist in meinen Feedreader gespült:
Im »Long Way Down Tutorial« (neun kurze, maximal zehnminütige Videos) geht es um die Implementierung einer Website mit Parallax Scrolling. Was zur Hölle ist Parallax Scrolling? Ich gestehe, ich mußte auch erst einmal nachgoogeln. Websites mit Prallax Scrolling bestehen aus einer einzigen HTML-Seite, die mit der Scroll-Funktion gesteuert wird. Dabei bewegen sich die Elemente der Website unterschiedlich schnell. Ein Hintergrundbild bewegt sich langsam, während Bilder oder Graphikelemente sich im Vordergrund schneller bewegen. Dieser Effekt wird ausschließlich durch den Einsatz von HTML5 und CSS3 erzeugt, dafür ist weder JavaScript noch ein (serverseitiges) Framework erforderlich.
Schon das Tutorial spielt damit und auch mir kam sofort die Idee: Mit diesem Effekt lassen sich doch wunderbar Geschichten erzählen. Zum Beispiel eine Escape-Room-Story, in der ein Spieler mehrere Etagen eines Hochhauses durchlaufen und dabei Rätsel lösen muß, um den Ausgang zu erreichen. Ob man dabei auf den Spuren von SCP 3008 durch die Labyrinthe von IKEA irrt, oder wie John McClane in »Die Hard« ein Hochhaus von Terroristen säubern muß, bleibt dabei der Phantasie (und der Blutrünstigkeit) der Entwicklerin oder des Entwicklers überlassen.
Ein wenig JavaScript wird man dafür sicher im Endeffekt dennoch benötigen, aber die Idee eines Spiels, das nur aus einer statischen Webseite besteht, ist erst einmal bestechend. Da müßte sich doch was daraus machen lassen. Ich bin jedenfalls hin- und hergerissen – so viel zu spielen, wo wenig Zeit.
Bild: Schnitt durch ein Hochhaus, erstellt mit DreamStudio, Prompt: »Section through a multi-story, inhabited residential building«, Model: stable-diffusion-xl-1024-v1-0, Style: Comic Book.