Cute parallax engine. See demo.
.actor-element
will start moving since 0px to -150px when .scene-element
top will be in viewport until element bottom will be in viewport.
scorsese([{
scene: '.scene-element',
cast: [{
actor: '.actor-element',
translateY: -150
}]
});
In some cases some browsers suck with it. But you can always use simple lib which should be only included on the page
Process config and listen scroll.
scene
- selector of element which is used to calculate ratio when it's in viewportcast
- array of animation definitionsactor
- selector of animated elementeasing
- function to process ratio and change linear easing. Returning value is constrained in [0..1]Animation starts with zero and ends with specified values.
You can also specify unit in string value like -20
, '20%'
, '20px'
etc.
translateX
(px unit if number)translateY
(px unit if number)scale
(units will be skipped)rotate
(deg unit if number)opacity
(units will be skipped)Destroy and reinitialize instance with the same config.
Request update position of all actors in viewport. If breakpoint argument is passed then on less window width instance will be destroyed and on greater - reinitialized.
Destroy instance and stop scroll listening.
MIT © Bogdan Chadkin