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