On scroll you either push or pull the containers up/down relative to the scroll speed eg. for every pixel scrolled push down 0.5px via translateY so that the container appears to move slower than scroll.
with layers overlapping
Just combine z-index with the above
If you want the most basic explanation possible of how to start writing some parallax code here's a little example I made a couple of years ago.
On scroll you either push or pull the containers up/down relative to the scroll speed eg. for every pixel scrolled push down
0.5pxviatranslateYso that the container appears to move slower than scroll.Just combine
z-indexwith the aboveIf you want the most basic explanation possible of how to start writing some parallax code here's a little example I made a couple of years ago.
If you actually want to write production ready code yourself (instead of using a plugin) then definitely check out this article: medium.com/@dhg/parallax-done-right it's a great resource for parallax or scroll functions in general. This article is also great for more performance tips: kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps
Hope that helps :)