@liquidlight/buttery-parallax

Buttery.js

Yes, another jQuery parallax image slider...

Buttery is a parallax image scroller which uses transforms and doesn't allow the user to scroll past the end of the image.

It creates a new element inside your selected element and sets the background. This element is then adjusted with CSS transforms.

Parameters

Parameter	Default	Description
parallaxSelector	'.parallaxInner'	Class of the new div that gets created
scale	1.5	The scale of the element/image
height	image	How high the parallaxSelector box is (can be px, % or 'image' to use the image height)
scrollFraction	2	What speed the scrolling effect is
image	background	Whether to use a background image or image in the code

Examples

$(window).on('load', function() {
	$('.banner').buttery({
		parallaxSelector: '.parallaxInner',
		scale: 1.5,
		height: 'image',
		scrollFraction: 2,
	});
});

Contributing

We welcome pull requests and issues!

If making a PR, it would be handy if you could please run npm run dist before committing and pushing. To run this you will need uglifyjs installed as a global module.

If you can't run it, don't let it put you off - we'll run it our end 😀