CSS-Transformationen kombinieren

[Killua]

Ich habe jetzt ein paar Stunden lang versucht, die transform-Variante dieses Tutorials auf einen sinnvollen Stand zu bekommen.

Wie gesagt, Danke an alle, die das überarbeiten; die sogar einem ewigen Dummie zuhören und versuchen, diese Dinge dödelsicher zu erklären. Glaube aber, das wird nie klappen. Es ist einfach alles zu komplex, es gibt so viele Wege zur gewünschten Anim, so viele Begriffe, die ich immer wieder durcheinanderbringe ...

Mit Perspektiveffekten bekommt man 2 Scrollgeschwindigkeiten hin, ja, aber das genau auszutarieren ist erstmal gar nicht so einfach

Mit so Sachen wie Z Achse, transform-style: preserve-3d; uvam. befasse ich mich erst, wenn ich die Grundlagen gut kann. Mir gehts nur darum, wie man die gewöhnlichen transform translate Sachen per Scroll starten kann.

Wie exakt das aussieht, ist mir erstmal völlig wurst, ich will nur wissen, wie man das mit CSS oder wenn es sein muss mit JS auslösen kann.

Ich habe da ein paar Begriffe aufgeschnappt:

• da gäbe es was mit scroll-, weiß aber nicht, ob das (oder eins der ähnlich klingenden Sachen) das ist, was ich suche?

• Das JS da könnte evtl. auch dafür brauchbar sein? So ähnlich müsste man doch irgendwie abfragen können, ob gescrollt wird, wenn ja, dann starte die Bewegungen ...

• Ja und dann fand ich noch einige Bibliotheken für so Effekte. Wie dieses skrollr. Leider weiß ich bei Verweisen auf Github nie, was von den vielen Sachen muss ich nun runterladen, was gehört wohin usw.

---

Die Variante 1 mit background-position:fixed ist dagegen verwendbar;

Eh klar und in einer Sekunde erledigt. Geschickt designt, kann das auch dieses einfachste Lösung gut aussehen. Aber halt nicht so cool "perspektivisch" wie wenn man 2 oder mehr Elemente in unterschiedlichen Geschwindigkeiten bewegt.