Animation parallax on Scrool vertical using requestAnimationFrame and CSS3 3D transitions.
- X: X axis translation (in pixels)
- Y: Y axis translation (in pixels)
- Z: Z axis translation (pixels)
from-scroll
: vertical scroll position the animation starts (default: when the element is visible)distance
: distance on vertical scroll position the animation will last (default: the window visible height)to-scroll
: vertical scroll position the animation ends (default: from-scroll + distance)smoothness
: factor that slowdown the animation, the more the smoothier (default: 30)
<div data-parallax='{"x": 650, "from-scroll": 90, "distance": 0}'>Number One</li>