Change scroller in css

[KaTko]

Guten Tag,
ich lerne grade bisschen HTML und CSS und dann JS.
Um paar Sachen zu lernen und auszuprobieren erstelle ich mir gerade eine eigene Seite!
Für alle Ideen usw. schau ich mir meist einfach die Documentations oder YouTube Video an.
Nun habe ich diese Seite hier gefunden.
Ich finde ziemlich cool das man beim runterscrollen die Hintergrundbilder scrollt, solange bis man zu einem Feld kommt welches Texte und Bilder enthält. Ab einer bestimmten Höhe scrollt man dann automatisch dieses Feld weiter und nicht mehr die Hintergründe.
Ihr wisst bestimmt was ich meine wenn ihr mal auf der Seite wart
Auf jedenfalls ist meine Frage nun 1. wie man sowas macht (auch ob das rein mit HTML und CSS geht oder für sowas auch JS benötigt wird), und 2. ob jemand vielleicht einen Hinweis hat wo man noch Information dazu findet, da ich nicht wirklich eine Idee habe wie ich gezielt nach so einer Funktion suche.

Hoffe das war jetzt einigermaßen Verständlich.

Danke schon mal im Voraus!

 

[floq0r]

Ich kann dir ans Herz legen dich mit dem Inspector von FF oder Chrome vertraut zu machen (STRG+SHIFT+C). Dort kannst du dir das DOM anschauen und welche CSS rules für welche Elemente greifen.
Auf der von der verlinkten Seite sieht man, dass das Hintergrundbild mit der Skyline in einem <canvas> Element steckt, das default absolut positioniert ist und aber bestimmten Scrollheight (vermutlich check über scroll event handler in JS) fixed positioniert wird. Du scrollst damit die Seite weiter, das Hintergrundbild bleibt aber durch die neue Positionierung stehen.
Wie man das nennt weiß ich leider nicht, u.a. haben Apple und Rolex das eine zeitlang verwendet, scheinbar nutzen es beide nicht mehr.

 

[Mihawk90]

Wie man das nennt weiß ich leider nicht

Parallax scrolling

Den Effekt kann man (eventuell?) auch mit CSS umsetzen, dafür gibt es jetzt die CSS Eigenschaft position: sticky, dann müsste aber auch das DOM entsprechend umgeschrieben werden, dass das Hintergrundbild ein Teil der jeweiligen Artikel-Sektion ist.
Hab das hier und da mal verwendet, aber nicht mit dem Effekt den du hier siehst. Sticky ist eigentlich dazu gedacht Elemente innerhalb eines parents am Bildschirmrand kleben zu lassen, ob/wie das als Hintergrundbild funktioniert habe ich nie probiert.

 

[floq0r]

AFAIK ist es parallax scrolling nur dann, wenn der Hintergrund entsprechend langsaner mitscrollt um die optische Perspektive um einen Fluchtpunkt herum zu simulieren. Mit sticky würde das nur in eine Richtung funktionieren, hier sind Anfang und Ende definiert.

 

[Mihawk90]

Naja, in der Entwicklung fällt das alles unter dasselbe weil die Umsetzung die gleiche ist und man die gleichen Libs dafür verwenden kann

Ja rein von der Definition ist es nicht das gleiche, aber in der Entwicklung schon

 

[floq0r]

Libs, Pfui