Updated on September 02, 2019
This tutorial provides the steps to implement Jarallax in Oxygen for simulating parallax animated backgrounds.
If you do not care about IE but want a working parallax effect you could alternatively give this CSS method (via David Browne) a try.
Install and activate my custom functionality plugin.
Upload ofi.min.js (polyfill to make object-fit styles work in IE11 and below) and jarallax.min.js to the plugin's assets/js directory.
Inside the custom_enqueue_files() function, add
Comments
Provide a URL of your site/webpage if something is not working.
5 comments on “Parallax in Oxygen using Jarallax”
Thanks for this Sridhar. I wonder how to set up multiple Jarallax images with each a different scroll speed. A class doesn’t work. Can you help with this? Thank you!
Just initialize based on the ID instead of class.
Ex.:
jarallax(document.getElementById('#section-2-60'), {speed: 0.4,
});
jarallax(document.getElementById('#section-11-60'), {
speed: 0.7,
});
in step 2c.
Great mate.. One question.. How do you stop it from working on mobile.. I´ve tested in my mobile and the parallax effect does not work good it all
Change Step 2c Javascript to:
objectFitImages();jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.2,
disableParallax: /iPad|iPhone|iPod|Android/
});
Thanks