Streaming live at 10am (PST)

Sticky + Slider while scrolling

#1

Hello!

I’m trying to remake this same effect: https://www.useloom.com/share/c1c5d046f0a7439ca02e36390fefd2a9

There are many effect happening here but my question is only about that Sticky+Slider while scrolling. I found some topics talking about fullpage.js but I was not able to make this.

Thanks in advance for your help


#2

Hey Palombokevin,

Can you be more specific about which effect you’re trying to recreate?
Is it the element with the 4 lines? (I think it’s a Tab element) What about it are you looking to re create? the animations of the elements inside it when you change tabs?

1 Like
#3

I was asking almost the same question few weeks ago. No one answered. Can please someone help?

#4

I think, he want the same what I want to do. So there are tutorials on how to make fullpage.js effect (scrolling effect) when each page sticks to top and to the bottom like on the first part of the website he attached. But I was trying to figure out how to do fullpage.js and sticky part on the same page.

Because when I implement fullpage.js it starts from the beginning of the website (or page), but I want it to start from the place I want to - for example, the first part of the website is regular - we can add sticky and stuff like that, but on the middle fullpage.js starts, then on the third part the website again has a regular scroll.

Here is my link:

https://preview.webflow.com/preview/evgeniys-five-star-project-dce2d1?utm_source=evgeniys-five-star-project-dce2d1&preview=ba6b319a0b457d42762bec1b8dd86359

It has a div that I want to stick throughout the bigger div and then, when it comes to “sections” I want fullpage.js to start

1 Like
#5

hmm… I understand
The screen recording did not include the scroll bar, so it is impossible to know if he is only scrolling down or clicking on the lines (could be tab links).

Regarding fullpage.js- It is an external plugin, with not too much documentation and examples (IMO) and to create a specific custom effects, you will need to know JS pretty well (or find someone who does).

Lastly, I am pretty sure you can achieve very similar or almost identical effect using position:sticky and some interactions. I created this a few months ago. Does that help you?

#6

@avivtech @Evgeniy_Kadzin

Yes that’s totally what I was looking for. When you scroll the tabs passes to one to another.

Now, @avivtech, your link is already a nice example. Can you share your webflow link of this project or explain precisely how you did this? btw your website is pretty cool!!!

1 Like
#7

Sure, here you go:

1 Like