Scorsese
Cute parallax engine. See demo.
Usage
.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
}]
});
Smooth scroll
In some cases some browsers suck with it. But you can always use simple lib which should be only included on the page
API
var inst = scorsese(config)
Process config and listen scroll.
scene config
-
scene
- selector of element which is used to calculate ratio when it's in viewport -
cast
- array of animation definitions
cast config
-
actor
- selector of animated element -
easing
- 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)
inst.reinit()
Destroy and reinitialize instance with the same config.
inst.update([breakpoint])
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.
inst.destroy()
Destroy instance and stop scroll listening.
MIT © Bogdan Chadkin