Wie halb statische Fotos auf einer Website scrollen (Beispiel innen)

Question

Wie erreiche ich einen Effekt wie Janne.me?

Wenn Sie die Seite blättern, erscheint ein Hintergrundbild, aber dann wird das Bild angehalten und nur der Inhaltstext wird weiter gescrollt. Wenn der Inhalt dann scrollt, erscheint ein anderes Bild mit ihrem Absatz.

Irgendeine Idee, wie ich das Bild für eine bestimmte "Zeit" "stoppen" könnte?

Dank

Answer 1

Dieser Effekt wird Parallaxe genannt. Es gibt mehrere gute Bibliotheken, die Sie tun dies helfen kann:

• ScrollMagic: https://github.com/janpaepke/ScrollMagic (erfordert jQuery glaube ich)
• rellax: https://github.com/dixonandmoe/rellax (Vanille js)
• reagieren-Parallaxe: https://github.com/RRutsche/react-parallax (wenn Sie Reagieren Sie mit)

Alternativ kann dies mit reinem CSS erfolgen, da die immer genial David Walsh hat hier skizziert: https://davidwalsh.name/parallax

Hoffe das hilft!