Scrolling Effekt nur mit CSS, ohne JavaScript?
Wie bekomme ich diesen Parallax Scrolling Effekt
https://www.youtube.com/watch?v=TawH-AqHTXc
Meine Umsetzung: https://codepen.io/MrAmazing2/pen/dyMByNr
mit purem CSS hin??
Denn die JavaScript Version ist oft sehr ruckelig, da JS Asynchron läuft. Mit purem CSS wäre es aber immer flüssig. (Quelle)
Ich bin bereits auf das hier gestoßen: https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
Jedoch schaffe ich es nicht, das ganze in ein Div zu packen, und darunter weitere Divs/Sections zu plazieren, sodass es aussieht wie in meiner Demo. Stattdessen überlappt es sich, oder der Parallax-Part bekommt eine extra Scrollbar.
Sitze nun schon seit 15 Stunden daran und schaffe es einfach nicht. Bin aber auch CSS Neuling.
1 Antwort
Das Beispiel "lebt" davon, dass der Vordergrundlayer etwas aufscaliert wird (scale=0.7). Dadurch scrollt dieser etwas schneller, fühlt sich aber meist etwas seltsam an (u.a. leicht unscharfe Schrift) und hat auch andere Nachteile (er ist halt aufgezoomt. Alle darin platzierten Elemente erscheinen größer als auf dem Hintergrundlayer). Solche "pure-CSS"-Geschichten eignen sich für kleine Dinge. Wenn aber auf beiden Layer Texte, Buttons etc. sollen, vergiss es^^.
Denn die JavaScript Version ist oft sehr ruckelig, da JS Asynchron läuft. Mit purem CSS wäre es aber immer flüssig. ( Quelle)
Hiermit kannst schon flüssig mit JavaScript arbeiten:
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
Damit kannst du dir einen Loop bauen und die JS-Animation sozusagen vsyncen. Dann wird's butterweich. Um die Berücksichtigung der Bildfrequenz musst du dich bei zeitlich abhängigen Animationen jedoch selbst kümmern (in deinem Fall aber nicht relevant).
Da musst du dann bei jedem Durchlauf die Scrollposition abfragen, mit sowas wie 0.2 multiplizieren (bissle probieren, je nachdem, wie stark du den Versatz haben möchtets) und die vertikale Position CSS-Eigenschaft transform:translate() des Vordergrundlayers auf diesen Wert setzen.
Vielen Dank, requestAnimationframe funkt super, scheint nicht zu laggen.
Hab gehofft dass man die CSS-Lösung in ein div (position:relative damits nicht die section 'verschluckt') packen kann, aber geht wohl nicht.