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