Question 101472 in Html Question posted in
Some basic documentation can be found here.

Html – Javascript on scroll animation not working

I am trying to make my website show an animation when scrolling over an element in the artis div but somehow the animation works when loading the page and then the elements disappear completely.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry)
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    }
    else {
      entry.target.classList.remove('show');
    }


  });

});

const hiddenElements = document.querySelectorAll('hidden');

hiddenElements.forEach((el) => observer.observe(el));
body {
  font: 24px/1.5 "Playfair", serif;
  background-color: #f5f5f5;
}

head {
  background-color: #b4fdc0;
}

div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
  text-align: center;
  font-size: 22px;
  background-color: #b4fdc0;
}

div.scrollmenu li {
  list-style: none;
  display: inline;
}

div.scrollmenu li a {
  color: #e6007e;
  font-weight: bold;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  background-color: #b4fdc0;
  text-decoration: none;
  padding: 15px;
}

div.scrollmenu a:hover {
  border-radius: 50%;
}

div.scrollmenu li {
  padding: 0 15%;
  /* Adjust the value to add more or less space */
}

div.scrollmenu li:first-child {
  padding-left: 0;
}

div.scrollmenu li:last-child {
  padding-right: 0;
}

.Banner {
  display: grid;
  align-items: center;
  background-color: #b4fdc0;
}

.profile-pic {
  margin: 25px 50px 25px 100px;
  border-radius: 50%;
  grid-column: 1/2;
}

.typewriter {
  grid-column: 2/2;
}

@media (max-width: 768px) {
  .Banner {
    flex-direction: column;
  }
  .profile-pic {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

.typewriter {
  width: 75%;
}

.typewriter h1 {
  color: #53565a;
  font-weight: bold;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid #009ccf;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  /* Adjust as needed */
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: #e6007e;
  }
}

.fade-in-image {
  animation: fadeInLeft 3.5s;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.menulist {
  list-style: none;
}

.menulist li {
  text-align: center;
  opacity: 0;
  animation: fadeIn-down 1s ease-in both;
}

.menulist li:nth-child(2) {
  animation-delay: 1s;
}

.menulist li:nth-child(3) {
  animation-delay: 2s;
}

@keyframes fadeIn-down {
  from {
    opacity: 0;
    transform: translate3d(0, -20%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

div.scrollmenu .dot {
  width: 6px;
  height: 6px;
  background: #fddb3a;
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

div.scrollmenu a:nth-child(1):hover~.dot {
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

div.scrollmenu a:nth-child(2):hover~.dot {
  -webkit-transform: translateX(110px);
  transform: translateX(110px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

div.scrollmenu a:nth-child(3):hover~.dot {
  -webkit-transform: translateX(200px);
  transform: translateX(200px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

.spacer {
  aspect-ratio: 900/50;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.wave {
  background-image: url('./images/svg/wave.svg');
}

H1,
H2,
H3,
H4 {
  text-align: center;
  color: #333333;
  margin-bottom: 3%;
}

hr {
  width: 50%;
  height: 5px;
  border: none;
  background: #ffcd00;
}

.tableArtistes {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.artiste {
  width: 30%;
  height: 300px;
  justify-content: center;
  align-items: center;
  float: left;
  margin-left: 3%;
}

.eminem {
  opacity: 0;
  animation: fadeInLeft 1.5s ease-in-out;
}

.kendrick {
  opacity: 0;
  animation: fadeInDown 1.5s ease-in-out;
}

.jcole {
  opacity: 0;
  animation: fadeInRight 1.5s ease-in-out;
}

.show {
  opacity: 1;
}

.artist_picture {
  border-radius: 50%;
  text-align: center;
  width: 60%;
}

.citation {
  font-family: 'Dancing Script', cursive;
  font-weight: bold;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-300px);
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-300px);
  }
  to {
    opacity: 1;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <link rel="stylesheet" type="text/css" href="style.css">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;700&display=swap" rel="stylesheet">
</head>

<body>
  <section class="head">
    <div class="scrollmenu">
      <ul class="menulist">
        <li><a href="#home">Accueil</a></li>
        <li><a href="#news">projets</a></li>
        <li><a class="button" href="cv de Gunst.">Télécharger mon CV </a></li>

      </ul>

    </div>

    <div class="Banner">


      <div class="fade-in-image">
        <img class="profile-pic" src="./images/accueil/profil.jfif">
      </div>

      <div class="typewriter">
        <h1>Bonjour, je m'appelle Noah.</h1>
      </div>

    </div>

  </section>

  <div class="spacer wave "></div>

  <section class="interets">
    <H1> Mes centres d'intéret</H1>


    <div class="musique">
      <H2>La musique</H2>
      <hr>

      <p> Je suis un grand fan de rap américain. Après une journée de travail, j'aime bien d'écouter ce genre de musique pour me détendre.</p>

      <H3> Voici quelques artistes que j'écoute régulièrement : </H3>

      <div class="tableArtistes">
        <div class="artiste eminem hidden"> <img src="./images/accueil/artists/eminem.jpg" class="artist_picture">
          <H4>Eminem</H4>
          <p class="citation"> "Rien n'a jamais réuni autant de races et de personnes de tous les horizons que le hip-hop."</p>
        </div>
        <div class="artiste kendrick hidden"> <img src="./images/accueil/artists/kendrick.png" class="artist_picture">
          <H4>Kendrick Lamar</H4>
          <p class="citation"> "Mais le jour viendra où je ne serai plus là quand quelqu'un aura besoin de moi."</p>
        </div>
        <div class="artiste jcole hidden"> <img src="./images/accueil/artists/Jcole.png" class="artist_picture">
          <H4>J.Cole</H4>
          <p class="citation"> "Je me mets beaucoup de pression. Je pense que quelque chose n'est pas assez bien et je ne m'arrêterai pas tant que je n'aurai pas l'impression d'avoir réussi. "</p>
        </div>
      </div>



    </div>
  </section>

  <script src="./scripts/scroll-animation.js"></script>
</body>

</html>

I tried multiple things, mostly in the css but nothing seems to work.

Tags:

2

Answers


  1. 0

    The elements disappear is because you set their opacity: 0;
    Change your CSS as follows:

    .eminem{
  opacity: 1;
    animation: fadeInLeft 1.5s ease-in-out;
}

.kendrick{
  opacity: 1;
    animation: fadeInDown 1.5s ease-in-out;
}

.jcole{
  opacity: 1;
    animation: fadeInRight 1.5s ease-in-out;
}
    Login or Signup to reply.
  2. 0

    You can read this github doc that may help you Scroll Observer

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search