How do I make it work?
You'll need the paraxify.js file and also the _paraxify.scss file or the CSS equivalent.
- Start with a centered background image bigger than the element it's been set on.
- Add the
paraxifyclass to the elements that you want to paraxify. - Now just start the JavaScript part at the end of your document:
- Ready to go! You should see the background images parallaxing.
.paraxify{
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
myParaxify = paraxify('.paraxify');
IMPORTANT: Parallax and touch devices usually don't get along. So I highly suggest you to use modernizr's touch events. For example:
if(!Modernizr.touch){
myParaxify = paraxify('.paraxify');
}