How to Semi static photos scrolling on one page website (example inside)

Question

How I achieve an effect like Janne.me ?

When you scroll the page a background image come up, but then the image stop and just the content text continue scrolling, then, when the content text scoll up, another image starting coming up with her paragraph.

Any Idea on how i could "stop" the image for a certain "time"?

Thanks

Answer 1

This effect is called parallax. There are several good libraries that can help you do this:

• ScrollMagic: https://github.com/janpaepke/ScrollMagic (requires jQuery I believe)
• rellax: https://github.com/dixonandmoe/rellax (vanilla js)
• react-parallax: https://github.com/RRutsche/react-parallax (if you're using React)

Alternatively this can be done with pure CSS, as the ever awesome David Walsh has outlined here: https://davidwalsh.name/parallax

Hope this helps!