OnePage - Wann ist das sinnvoll?

Auf Pad, machts mehr Spass als auf Desktop

Die Grundlage meiner JS-Dateien fand ich bei Petr Tichy: https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/

Daraus baute ich eine Silverstripe-Site, damit ich eine "OnePage" mit Parrallax-scrolling direkt im Backend Bewirtschaften kann.
Eingabefelder für Reihenfolge, Position und Grösse, Colorpicker für Farben, Upload für die Hintergrund-Bilder.

Werner Krauss baute daraus ein Silverstripe-Modul (Layout auf "simple", zum selber anpassen)
https://github.com/wernerkrauss/silverstripe-onepage

Einen verteiften Einstieg bietet Petr Tichy in seiner Online-Master-Class an: https://ihatetomatoes.net/product/parallax-scrolling-master-class/


Hier gets weiter mit den Informationen zu Parrallax-Scrolling. Um die Inhalte als "OnePage" kurz halten zu können, verwende ich das Silverstripe-Theme "simle" im Hintergrund, als ganz normale Website. Die OnePage soll eine typische "LandingPage" für Informationen bleiben.

Die Bausteine
editor.png
Den Haupinhalten wurden Datum, Randnotitz (Title), Untertitel und die Slide-Reihenfolge dazugebaut.
tree.png
Eine HolderPage sammelt alle "Childs" um sie mit Parrallax scrollen zu lassen.

formste.png
Hintergrundbild und Formate lassen sich unter dem Reiter "Formate" eintragen.

farbe.png
Die Farben für Hintergrund / Transparenz und Textfarbe lassen sich optional mit vorgegebener Palette oder einem Colorpicker eintragen.

(i)

Martin Luther King

Der erste Schritt

king

Etwas Content für den ersten Artikel. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

(i)

Albert Einstein

Der zweite Streich

Noch was Content für den zweiten Artikel. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

einstein

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

(i)

Mahatma Gandhi

Der dritte Artikel

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

gandhi

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

(i)