I linked a repl so take a look at it.
I want to find a way to implement a transition where when I scroll down a little the following happens:I want the stuff in the first div element to go up and fade out. I also want the stuff in the second div to go up and fade in. The transitions should be ease-in. P.S. I want it when I scroll down A LITTLE, the entire stuff in the first div element goes up and fades out.
Can anyone help me implement this?
Rather than just link some random websites, I think I've found a solution to your problem. Check out my repl here: https://repl.it/@fuzzyastrocat/CSS-Slide
What I'm doing is using the CSS property
scroll-snap-type on a container and setting to to
y mandatory (ie, the scroll must be snapped to a scroll point along the y axis). Then, I create a
<ul> list inside the container (to simplify things vertically) and set the
scroll-snap-align property on each of those elements to
center, which creates a new scroll snap point at the center of each slide. That way, when you scroll a little bit, it moves your scroll all the way to the snap point on the next slide (if one exists).
Hope this helps! If you have any questions, or if this was not what you were looking for, please ask!
@JavaMaster1 Do you know a website the uses this feature (where when you scroll down a little, some elements disappear and others appear)
P.S. I'm not using that website since it's the transition is too sudden
@Smart0ne I think they might've used something like this:
I honestly have no idea if this works, or even if it works good.
Does it work?
Apparently this works, but I don't know why using separate files don't work. P.S. sorry for bothering you again, but how do I change the gliding speed?