<!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>
@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%;
}
}
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");
});
我正在尝试建立一个寿司网站，但在全屏桌面中向下滚动时，我的主要部分图像一直在振动。我的导航栏在移动版本中也不起作用，因为向下滚动导航栏不会像在桌面上那样折叠得更小。我也遇到了第一次在网站上无法加载动画的问题。
我会说带有导航栏的移动版本没有折叠是因为 javascript 事件侦听器没有收到“滚动”事件，也许它在移动设备上被命名为不同的事件，或者它可能从来没有一定的空间从顶部移动？为了对此进行测试，我建议在“滚动”事件侦听器中执行 console.log（顶部的空间或其他）。至于振动，也许可以尝试消除过程，然后从您的 css 中删除随机内容，直到它起作用为止？至于动画，idrk.