简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Image vibration and animation not working css
P粉513318114
P粉513318114 2024-04-02 20:07:39
0
1
374

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>

I'm trying to build a sushi website, but my main section image keeps vibrating when scrolling down in full screen desktop. My navbar also doesn't work in the mobile version when scrolling down, the navbar doesn't collapse smaller like it does in desktop. I also had an issue with the animation not loading when I first visited the site.

P粉513318114
P粉513318114

reply all(1)
P粉926174288
P粉9261742882024-04-03 17:26:03 1 floor

I would say that the mobile version of the navbar is not collapsed because the javascript event listener is not receiving the "scroll" event, maybe it is named a different event on mobile, or maybe it never reaches a certain Amount of space on top of mobile device? To test this, I recommend doing a console.log in the "scroll" event listener (a space from the top or something). As for the vibration, maybe try the elimination process and just remove random stuff from your CSS until it works? As for animation, I don't know.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！