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
paraxify
class 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'); }