Scroll through "slides" effect

[jmbalegn]

I’m trying to create an effect that is only activated by scrolling that wipes away slides as you scroll back and forth. I am currently trying to use Rev Slider but can’t figure out how. Here is an example of what I’d like to achieve.

[details=Summary]
https://corenyc.com/[/details]

Can I do this without the rev slider just using sections?

Thanks!

[christian]

Hey Jenna,

This is possible with Pro. Here’s the setup.

• Create a menu in Appearance > Menu with custom links pointing to the Sections. You basically would need to setup a One Page Navigation page. Here’s a video tutorial: https://www.youtube.com/watch?v=7tPKzmYsaQc
• In the video, the setup is Top Header. You will need to use the Left Header.
  
• In the Left Header, add a Navigation Collapsed element like in the screenshot above.
• Text is disabled in the Navigation Inline setup and only the Graphic is on.
• Set the Graphic of each menu item in Appearance > Menu.
  

If you’re using X, regretfully, you’ll need to use Slider Revolution. The effect you need is not totally possible with Slider Revolution. You’d first need to setup Navigation (Bullet). Here’s ThemePunch’s documentation: https://www.themepunch.com/slider-revolution/navigation-editor/

You also then can setup Keyboard or Mouse Navigation. Please see https://www.themepunch.com/slider-revolution/keyboard-arrows-mouse-wheel/

Hope that helps.

[jmbalegn]

Thanks so much for your reply… I have Pro so will give it a shot. Just to be sure, this solution creates the effect that the slides/sections are being revealed as the visitor is scrolling?

Thanks again for your help!

[albrecht]

Hi Jenna,

Yes, it could have that effect.

To achieve that. First you have to set a background image to the sections and give each section the same class name, in my example below I used fixed-background. Here’s a screenshot of where you can add a class to a section.

After that, you just have to add this css.

.fixed-background {
  min-height: 100vh;
}
.fixed-background .x-bg div {
    background-attachment: fixed;
}

Let us know how it goes.

Thanks!