Skip to content
← Back to Community
CSS Transition
Profile icon
Smart0ne

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.

An example: https://solarsystem.nasa.gov/missions/cassini/the-journey/the-grand-finale/

Can anyone help me implement this?

Voters
Profile icon
Smart0ne
Comments
hotnewtop
Profile icon
fuzzyastrocat

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!

Profile icon
fuzzyastrocat

@SmartOne Does this help at all?

Profile icon
Whacko

Here's a nice website. Ooh, and here. And here and here and here!

Is that enough?

Profile icon
Smart0ne

@JavaMaster1 Do you know a website the uses this feature (where when you scroll down a little, some elements disappear and others appear)

Example: https://solarsystem.nasa.gov/missions/cassini/the-journey/the-grand-finale/

P.S. I'm not using that website since it's the transition is too sudden

Profile icon
Whacko

@Smart0ne I don't know what you are talking about, but W3schools.com has helpful examples and even a editor!

Profile icon
Smart0ne

@JavaMaster1 Please take a look at the example website. w3schools.com doesn't seem to have what I want.

Profile icon
Whacko

@Smart0ne I think they used JavaScript.

Profile icon
Smart0ne

@JavaMaster1 Thanks! Time to learn JavaScript.

Profile icon
Whacko

@Smart0ne I think they might've used something like this:

<div class="slide1" id="slide1"> <h1>Whatever.</h1> <p>Blah blah blah.</p> </div> <div class="slide2" id="slide2"> <h1>Why are you looking here?</h1> <p>There is nothing here.</p> </div> <div class="slide3" id="slide3"> <h1>This is the final slide.</h1> <p>You can go home now.</p> </div> <style> /* Style */ html { scroll-behavior: smooth; } .slide1, .slide2, .slide3 { height: 100%; width: 100%; } .slide1 { background-color: green; } .slide2 { background-color: red; } .slide3 { background-color: blue; } </style> <script> // JavaScript var slide = 1; function glideToSlide(slide) { window.location.href = slide; } window.onscroll = function() { slide += 1 if (slide == 1) { glideToSlide("#slide1") } else if ("slide == 2") { glideToSlide("#slide2") } else if ("slide == 3") { glideToSlide("#slide3") } else { // Slideshow over } } </script>

I honestly have no idea if this works, or even if it works good.

Does it work?

Profile icon
Smart0ne

@JavaMaster1 Hmm.. take a look at the updated repl. It doesn't seem to work. Maybe find a way to change the visibility of slides that are not in focus?

Profile icon
Whacko

@Smart0ne You forgot the style.

Profile icon
Smart0ne

@JavaMaster1 Am I supposed to do the style? I just put the style in the CSS file.

Profile icon
Whacko

@Smart0ne Oooh I see. The style is not linked. You need to add this to your head:

<link href="style.css" rel="stylesheet" type="text/css" />
Profile icon
Smart0ne

@JavaMaster1 I did in the html file. (i think) :)

Profile icon
Whacko

@Smart0ne this obviously isn't working, so add the <style> code to index.html.

Profile icon
Smart0ne

@JavaMaster1 https://legalimmaterialpublishing.smart0ne.repl.co/#slide2

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?

Profile icon
Whacko

@Smart0ne Yeah I tested it and it was too slow. It also got stuck on section 2.

Profile icon
Whacko

@Smart0ne And you shouldn't be sorry, you're not bothering me. I actually enjoy this.

Profile icon
Whacko

@Smart0ne does it work?

Profile icon
Smart0ne

@JavaMaster1 Not really...

Profile icon
Whacko

@Smart0ne Hmmmm... Try inviting me to the repl

Profile icon
Smart0ne

@JavaMaster1 Alright. EDIT: Invited.

Profile icon
Whacko

@Smart0ne didn't get it yet... EDIT: Yes i did

Profile icon
Whacko

@Smart0ne I think we can do it... with PHP.

Profile icon
Smart0ne

@JavaMaster1 :( Oh boy, that's out of my knowledge now.

Profile icon
Whacko

@Smart0ne Don't worry I know PHP.

Profile icon
Smart0ne

@JavaMaster1 Okay. But how?

Profile icon
Whacko

@Smart0ne I'll make a PHP repl and invite you.

Profile icon
Smart0ne

@JavaMaster1 Okay. Wait.. is it possible to link PHP with HTML, CSS, JS?

Profile icon
Whacko

@Smart0ne Hello I'm ready

Profile icon
Coder100

Is this what you are looking for?

Maybe this too?