Streaming live at 10am (PST)

Triggering a slide when scrolling


#1

Hi all! Has someone implemented (or has someone ideas on how to do it) a slider in which users can change slides by scrolling up and down?

Thanks!


#2

Perhaps there is an easier way to do it, but one I have thought of is the following.
Assuming you know how to work with layers.
Create a layer that flows like a regular website, perhaps divs that have a height of 100vh or whatever you like.
Then multiple divs with a layer that is higher and has a fixed position, perhaps also 100vh, or of your choosing.
Then use interactions with the on scroll effect to trigger one of the higher layers when the lower regular style layer scrolls over each div.
Scrolling up or down and reaching a new div on the lower layer would reduce the opacity of all higher layer fixed divs to 0, followed by increasing the desired fixed div to 100.
Or you could use a different effect other than opacity, such as moving the position.


#3

That's the idea that made me get up one night, I wanted to try it, like right now... I could see myself swiping and swiping on mobile, getting one slide/card after another... Well, in reality, it kind of works, but it's very difficult to fine-tune. I stopped before the thing was really usable.

I haven't touched it since. Maybe with a lazy scroll, it could be better. https://preview.webflow.com/preview/vincents-radical-cards?preview=62be1e41c57b0216268d5870fdc23b29


#4

That sounds great! Until now, it is the best path to follow. However, if someone may have an idea on how to achieve it using the native Webflow slider, ideas will be welcome.

Thanks @rcm . I'll share a link when it is ready.


#5

I think you are right, Vincent. Tuning it just looks painful. Thanks again, I'll keep my self-researching and will post news soon, if I succeed.


#6

Yes come back and report! :slightly_smiling:


#7

@diegona and @vincent.
Yea I have semi implemented this kind of thing.
Depending on what you need to do I think it can be alright.
It could be a feature you use on a full screen computer view, and then stick with something more static for tablet and mobile, perhaps a regular slide for tablet view down, as those are the views where technical features require a lot of fine tuning

I'm also keen to hear where you go with this.

I'll check your preview in a bit (on tablet now).


#8