What is paroller.js?

paroller.js is a lightweight jQuery plugin that enables a parallax scrolling effect on selected elements.

in this tutorial, I'll show you how to implement paroller.js in our site and use it in oxygen builder.

add the paroller script tag into our site

here we are going to use Header Footer Code Manager plugin you can add it to your WordPress website from this Link

after installing the plugin a new menu called HFCM will appear in the dashboard click Add new to add new snippet and the settings should be like the image below

the CDN URL for paroller.js is

<script src="https://cdnjs.cloudflare.com/ajax/libs/paroller.js/1.4.7/jquery.paroller.min.js" integrity="sha512-/YNPbFUTvpH1Ecv9UkU6plNvm+MwskxOr6/IR/58Kb0gO0DCN2h7OTNC2GCq6E4RgOYUbZkEPg8tXO5lZ3Kx+A==" crossorigin="anonymous"></script>

in oxygen builder

now in our oxygen builder, let's say we wanna animate a heading text add a heading element in oxygen then in advanced tab > javascript of the element add the code below

  jQuery(".paroller, [data-paroller-factor]").paroller({
                factor: 0.3,            // multiplier for scrolling speed and offset
                factorXs: 0.1,          // multiplier for scrolling speed and offset if window width is <576px
                factorSm: 0.2,          // multiplier for scrolling speed and offset if window width is <=768px
                factorMd: 0.2,          // multiplier for scrolling speed and offset if window width is <=1024px
                factorLg: 0.3,          // multiplier for scrolling speed and offset if window width is <=1200px
                type: 'foreground',     // background, foreground
                direction: 'horizontal', // vertical, horizontal
                transition: 'transform 0.1s ease' // CSS transition, added on elements where type:'foreground'
            });

change the setting as you see it fits your need

next you have to add .paroller class to the element you wanna animate even if it's in another section

you can put the code into code block too.

Final result