CSS Transition - Replit

Skip to content

← Back to Community

CSS Transition

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

Comments

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!

@SmartOne Does this help at all?

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

Is that enough?

@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

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

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

@Smart0ne I think they used JavaScript.

@JavaMaster1 Thanks! Time to learn JavaScript.

@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?

@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?

@Smart0ne You forgot the style.

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

@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" />

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

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

@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?

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

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

@Smart0ne does it work?

@JavaMaster1 Not really...

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

@JavaMaster1 Alright. EDIT: Invited.

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

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

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

@Smart0ne Don't worry I know PHP.

@JavaMaster1 Okay. But how?

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

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

@Smart0ne Hello I'm ready

Is this what you are looking for?

Maybe this too?