slowparallax

Parallax. With momentum.

npm i --save slowparallax

Example: http://www.ofo.so/

import SlowParallax from 'slowparallax';

<SlowParallax
	class='someClass'
	content={
		<div className='myContent'>Some content</div>
	}
	distance={200}
	time={10}
	timeMax={15} // optional
	style={{ prop: 'value' }} // optional
	triggerStyle={{ otherProp: 'otherValue' }} // optional
>

yields:-

<div class="slowParallax someClass someClass999" style={{ prop: 'value' }}>
	<div class="someClassTrigger999" ref="someClassTrigger999" style={{ otherProp: 'otherValue' }} />
	<div class="myContent">Some content</div>
</div>

As the user scrolls, the someClass <div> will float lazily up & down the screen by 200px. This takes place over the course of a random amount of time between 10 and 15 seconds.

Exposed property	Type	Default	Required	Description
class or className	string		✔	Class name given to the outer parent <div>.
content	HTML element		✔	HTML content which will be animated.
distance	number	200		Distance in px the content will travel in each direction.
time	number	10		Amount of time it will take the content to travel to its destination after each scroll event. This amount is slightly randomized to make the effect more natural.
timeMax	number			If provided, the time used will be a random amount between the time and timeMax.
style	object	{}		Style applied to the outer parent <div>.
triggerStyle	object	{}		Style applied to the trigger <div>.