Creating a reverse rolling effect

[mrutyunjaya]

Hi,

Wondering how to create a reverse rolling effect as used under the header section on this example site (https://www.petarceklic.com/)? Can it be done using PRO native functionalities?

Any suggestions appreciated. Thanks

[RubberDuckers]

You could maybe bodge something like this with parralax if that was one image that was really wide.
Otherwise an external library like: https://locomotivemtl.github.io/locomotive-scroll/

[tristup]

Hi Mrutyunjaya,

Thanks for reaching out.
Regretfully, there is no such option available currently. I would suggest you go through the following thread which may help you to achieve it.

[Feature Request] Header Builder - Show Sticky Menu Only On Reverse Scroll

Hi Ravi, I will forward this as a feature request. For the mean time, you an try adding a class to your bar [image] Then add this in Theme Options > JS (function($){ var iScrollPos = 0; $(window).scroll(function () { var iCurScrollPos = $(this).scrollTop(); if (iCurScrollPos > iScrollPos) { //Scrolling Down $('.my-bar').addClass('hidden-away'); } else { //Scrolling Up $('.my-bar').removeClass('hidden-away'); } if(document.body…

Please remember that code provided is a sample code, and it varies from case to case, and we can’t guarantee it works for you.
Thanks

[mrutyunjaya]

Hi Tristup,

Thanks. This helped. Would be great if such an asset can be added to design cloud.

[tristup]

Hi Mrutyunjaya,

Glad that we are able to help you. I will check and ask the development team if that can be possible to add into a demo in Design Cloud.

Thanks

[mrutyunjaya]

Thanks, This is an easy way is in some cases.

[tristup]

Hi Mrutyunjaya,

I have already made a feature request on this so it might be taken into account in the future.

Thanks