Bildschirmfoto der Website The Beginning

The Beginning

Inspiriert von Webseiten mit Parallaxeffekt und Interaktionen mit dem Scrollen, wollte ich diese Arte der One Page Webseite selbst ausprobieren. Dazu schien mir eine Geschichte mit einer klaren Aufteilung in wenige Bilder optimal für diese Art von Storytelling.

Link zur Webseite:
beginning.hunziker-art.ch

The Beginning zeigt die Schöpfungsgeschichte unterteilt in acht Bilder oder Screens die sich bewegen und verändern beim Scrollen. Somit wird die Story interaktiv erzählt.

Tag 1 – Startseite

Auf der ersten Seite sind flackernde Sterne zu sehen. Um ein natürliches Aussehen der Sterne zu erreichen wurde der Himmel in Photoshop erstellt. Damit nicht alle Sterne immer sichtbar sind wird eine Maske über den Sternen bewegt (Siehe: http://www.script-tutorials.com/night-sky-with-twinkling-stars/).

Tag 2 – Sonnenaufgang

Am zweiten Tag wird der Übergang von der dunklen Nacht mit Sternen zum hellen Sonnenaufgang als Animation mit Überlang der zwei Zuständen dargestellt.

Screenshot von Tag 2 mit Navigation oben

Screenshot von Tag 2 mit Navigation oben

 

Screenshot Tag 2 Übergang

Screenshot Tag 2 Übergang

Tag 3 – Land und Wasser

Beim Scrollen wir die Landschaft beim Übergang zum nächsten Bild näher gezoomt.

Screenshot

Screenshot von Tag 3

Tag 4 – Tag & Nacht

Die Photomontage wird während des Scollen anders belichtet.

Screenshot Tag 4 Sonne & Mond

Screenshot Tag 4 Sonne & Mond

Tag 5 – Sich bewegende Fische

Die Fische im Vordergrund bewegen sich abhängig vom Scrollen.

Bildschirmfoto2

Screenshot von Tag 5. Die Fische bewegen sich während dem Scrollen.

 

Tag 6 – Rennende Zebras

Die Zebras bewegen sich von links nach rechts.

Screenshot Tag 6 Zebras in Bewegung

Screenshot Tag 6 Zebras in Bewegung

Tag 7 – Ruhetag

Um den Bogen zum Anfang zu schlagen ist wieder ein ähnlicher Übergang zum «Abspann» verwendet worden.

Screenshot Tag 7 und Abspann

Screenshot Tag 7 und Abspann

Weitere Funktionen & Credits

Es ist möglich alle Texte auszublenden um nur die Animationen sehen zu können. Bei Klick auf einen Tag scrollt die Webseite zum entsprechenden Tag. Die ganze Webseite wurde ohne CMS direkt als HTML, CSS und Javascript erstellt.

Scrolling Parallax Scripts
http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
https://github.com/Prinzhorn/skrollr

Smooth Scrolling to Link
css-scripts.com

Twinkling Stars
http://www.script-tutorials.com/night-sky-with-twinkling-stars/

Bilder
fotolia.de

Schriften
Arvo und Roboto von Google Webfonts.

Am besten testen Sie die Webseite selbst, da die Scrollanimationen nur schwer in Bilder gefasst werden können.

Oliver Hunziker

Oliver Hunziker ist ein in der Kreativindustrie tätiger Webdesigner, Grafiker, Fotograf, Filmemacher, Onlinemarketingexperte und SEO-Spezialist. Seine Projekte umfassen verschiedenste Fachgebiete und Medien. Folge oh-design auf Twitter: @oliver_hunziker oder kontaktiere Oliver Hunziker über die Kontaktseite.