css JavaScript在滚动动画不工作

mefy6pfw  于 2023-05-02  发布在  Java
关注(0)|答案(2)|浏览(138)

我试图让我的网站显示动画时，滚动在一个元素在artis div，但不知何故，动画工程时，加载页面，然后元素完全消失。

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>

我尝试了很多东西，主要是在CSS中，但似乎没有工作。

css

2条答案

按热度按时间
tzdcorbm

tzdcorbm1#

元素消失是因为你设置了它们的opacity: 0;改变你的CSS如下：

.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;
}
赞(0）分享  回复(0）举报  2023-05-02
omtl5h9j

omtl5h9j2#

你可以阅读这个github文档，它可能会帮助你Scroll Observer

赞(0）分享  回复(0）举报  2023-05-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com