App Slider

Hey Adam,

One way to do it is to just use some JavaScript code that, when the user scrolls using the mousewheel, cycles the background color through a list of colors. This post has the details:

https://divibooster.com/add-a-color-cycling-background-on-scroll-in-divi/

Hope it does what you need, but let me know if not!

 

Hey Adam,

I think in that tutorial you only need to add the first block of code and the CSS class. All the rest of the CSS is just repeating that same block but highlighting different sections to explain them.

I'd think you could pretty much do everything with the slider module. I'd start by disabling the automatic animation on the slider. Then modify the change of color code to trigger a click on the up or down arrow at the same time that the "currentColor" is recalculated. If you want you could also hide the arrows - though that would stop anyone without a mouse wheel from scrolling them. Finally, you'd probably want to change the fade direction so that it fades up rather than sideways.

Two other thoughts...

If you want to keep the effect from the original page where the phone fully scrolls off the page while the next scrolls in, rather than having a fade, you might want to look at a carousel module rather than the slider - since carousels naturally have that appearance and it would probably save you some effort. If you can find one with a vertical option, that would be a bonus.

If you decide to keep the arrows, then you may want to modify the color cycling code so that it is triggered by clicks on the arrows - that way you get the color change effect even if the user manually advances the slide.

Hope that helps, but give us a shout if you need further help with any of it.

Cheers!