Scrollmonitor Parallax
Installation
npm install -S scrollmonitor-parallax
Examples
Basic Usage
var parallax = ;var eases = ; // https://github.com/mattdesl/eases // Create a root element. Parallax will start when this// element enters the viewport and stop when it exits.var parallaxRoot = parallax; // to make an element scroll at a speed relative to the// scroll parent, just add a value for speed.var parallaxChild2 = parallaxRoot; // for more complex animations you can start and end positions.// If it's left blank, the start position is taken from the element's CSS.var parallaxChild = parallaxRoot;
Existing ScrollMonitor
If you need to create your own ScrollMonitorContainer
, you may create a parallax root and pass an existing container as the third parameter, and scrollmonitor-parallax will use that instead of using the default ScrollMonitorContainer
instance:
var scrollMonitor = ;var parallax = ; var container = scrollMonitor;// Any other watching logic here.var parallaxRoot = parallax;// Any elements you wish to add to your parallax.