How to use paroller.js with oxygen builder in WordPress

Subscribe to my newsletter and never miss my upcoming articles

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

header and footer plugin to add snippets to WordPress website.PNG

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

paroller.js code snippet in oxygen builder.PNG

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

No Comments Yet