Scrolling Effekt nur mit CSS, ohne JavaScript?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet
Franky12345678
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
01.10.2020, 02:43

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.
MrAmazing2 
Fragesteller
 01.10.2020, 21:20

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.

0