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>. |