La vibration et l'animation de l'image ne fonctionnent pas CSS-Questions et réponses sur le réseau chinois PHP

document.addEventListener('scroll', function() {

  const navbar = document.querySelector(".nav-bar");
  const navbarHeight = 10;

  const distanceFromTop = Math.abs(
    document.body.getBoundingClientRect().top
  );
  if (distanceFromTop >= navbarHeight) navbar.classList.add("nav-bar-fixed");
  else navbar.classList.remove("nav-bar-fixed");
});

@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');
body {
  background-color: rgb(255, 255, 255);
  margin: 0px;
  box-sizing: border-box;
  font-family: 'Tilt Neon', cursive;
}

.nav-bar {
  width: 100%;
  position: fixed;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(255, 255, 255);
  border-bottom: black 5px solid;
  transition: 2s;
}

.nav-bar-anim {
  height: 12vh;
  transition: 2s;
}

.nav-bar-fixed {
  height: 8vh;
  transition: 2s;
}

.logo {
  width: 110px;
}

.logo img {
  width: 100%;
  object-fit: cover;
}

.nav-items {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-right: 5%;
}

.nav-items a {
  font-size: 5vw;
  text-decoration: none;
  color: black;
}


/* main-sector  */

.main-section {
  background-image: url(img/famous-japanese-food-sushi.jpg);
  height: 300px;
  width: 100%;
  padding-top: 80px;
  background-size: cover;
  backdrop-filter: blur(5px);
  position: relative;
}

.main-section .blur {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);
}

.main-section a {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 4vw;
  padding: 20px;
  text-decoration: none;
  color: rgb(0, 0, 0);
  background: rgb(255, 255, 255);
  border: 2px solid rgb(0, 0, 0);
}

.main-section .line {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  height: .5%;
  background-color: rgb(150, 29, 29);
  animation: expandline 5s forwards;
}

.second-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40vh;
  border-top: 4px solid black;
  ;
  border-bottom: 4px solid black;
  gap: 40px;
}

.second-section a {
  text-decoration: none;
  font-size: 2em;
  border: 2px solid black;
  padding: 10px 20px;
}

.color-change {
  color: black;
  transition: 2s;
}

@media (min-width: 800px) {
  .nav-bar {
    height: 16vh;
  }
  .nav-bar-fixed {
    height: 12vh;
    transition: 2s;
  }
  .logo {
    width: 10%;
  }
  .nav-items {
    gap: 30px;
  }
  .nav-items a {
    font-size: 2em;
  }
  .main-section {
    height: 80vh;
    width: 100%;
  }
}

.nav-items a:hover {
  color: red;
  transition: 1s;
}

@keyframes expandline {
  from {
    width: 0%;
  }
  to {
    width: 20%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="home.css">
  <title>Sushi</title>
</head>

<body>
  <div class="nav-bar" class="nav-bar-anim" class="nav-bar-anim">
    <div class="logo">
      <img src="img/logo.webp" alt="">
    </div>
    <div class="nav-items">
      <a href="">Contact</a>
      <a href="">Order</a>
      <a href="">About</a>
    </div>
  </div>

  <div class="main-section">



    <div class="blur"></div>
    <div class="line" class="first-line"></div>
    <a href="tel:747-272-2997">Order Now</a>
    <div class="line"></div>

  </div>

  <div class="second-section">
    <h1>Check Out Our Menu</h1>
    <a class="color-change" href="">Menu</a>




  </div>

  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis inventore aspernatur animi veritatis id eius illo, doloremque enim itaque pariatur, nostrum molestiae dolorum beatae delectus rem perspiciatis, deserunt vitae repellendus assumenda atque
  ipsam libero sequi ut consequatur. Laboriosam libero recusandae reiciendis ipsum, harum deleniti itaque doloremque officia praesentium voluptatibus similique dolores? In facilis impedit officia obcaecati ex tempore, quod laboriosam dicta voluptatibus?
  Qui quasi eius debitis! Neque minus maiores voluptates, quas architecto laboriosam perspiciatis explicabo vel quis, voluptas ipsam nemo omnis ipsum nesciunt? A incidunt amet cupiditate odio consectetur aperiam ex animi eum corrupti minus dolorum, doloremque
  cum perspiciatis ad velit quas veritatis labore nisi qu

</body>
<script src="home.js"></script>

</html>

J'essaie de créer un site Web de sushi, mais l'image de ma section principale continue de vibrer lorsque je la fais défiler vers le bas sur le bureau plein écran. Ma barre de navigation ne fonctionne pas non plus dans la version mobile lors du défilement vers le bas, la barre de navigation ne se réduit pas plus petite que sur le bureau. J'ai également eu un problème avec l'animation qui ne se chargeait pas la première fois que j'ai visité le site.

répondre à tous(1)

P粉9261742882024-04-03 17:26:03 1 plancher

Je dirais que la version mobile de la barre de navigation n'est pas réduite car l'écouteur d'événement javascript ne reçoit pas l'événement "scroll", peut-être qu'il est nommé un événement différent sur mobile, ou peut-être qu'il n'atteint jamais une certaine quantité de mouvement. Espace au dessus de l'appareil ? Pour tester cela, je recommande de faire un console.log dans l'écouteur d'événement "scroll" (un espace à partir du haut ou quelque chose du genre). En ce qui concerne la vibration, essayez peut-être le processus d'élimination et supprimez simplement les éléments aléatoires de votre CSS jusqu'à ce que cela fonctionne ? Pour l'animation, je ne sais pas.

Comme +0

Ajouter une réponse