如何解决视差在较小的 DIV 中不起作用，但在“全屏”中起作用
当它在小于 100vh 的 div 中时，我有视差问题......当它的 100vh 和宽度为 100% 时它工作得很好......我的目标是以不同的速度移动 .beba 、 .ball1 和 .ball2 .我假设我在带有位置或显示的代码中有一些错误，但无法弄清楚，因为我是编码新手:)
HTML：
<body>
<div id="sadrzaj" class="sadrzaj">
<section id="home">
<header>
<nav id="nav">
<ul class="navul">
<li><a href="#">Home</a></li>
<li><a href="#gallery">Photos</a></li>
<img class="logo" src="img/logo.png" alt="logo" height="80px" />
<li><a href="#about">About us</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</nav>
</header>
<div class="homecont">
<div class="homepic">
<img src="img/yoga.jpg" alt="" />
</div>
<div class="beba">
<img src="img/beba.jpg" alt="" />
</div>
<img src="img/loptica.png" alt="" class="ball1" />
<img src="img/loptica.png" alt="" class="ball2" />
<p class="phtxt">Photography</p>
</div>
</section>
<section id="gallery">
</section>
<section id="about">
</section>
<section id="contact">
</section>
</div>
<script src="app.js"></script>
</body>
CSS：
* {
margin: 0;
padding: 0;
Box-sizing: border-Box;
font-family: sans-serif;
scroll-behavior: smooth;
}
body {
background-color: rosybrown;
}
#sadrzaj {
height: 79.8vh;
width: 75vw;
background-color: rgb(255,255,255);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow-y: scroll;
scroll-snap-type: y proximity;
}
#sadrzaj::-webkit-scrollbar {
display: none;
width: 0px;
}
#home {
height: 80vh;
position: relative;
z-index: -1;
scroll-snap-align: start;
}
#gallery {
height: 80vh;
background-color: rgb(206,206,206);
scroll-snap-align: start;
}
#about {
display: flex;
height: 80vh;
background-color: white;
scroll-snap-align: start;
}
#contact {
display: flex;
flex-direction: column;
height: 80vh;
background-color: white;
scroll-snap-align: start;
}
.homecont {
height: 68vh;
}
.homepic {
height: 80%;
width: 75%;
position: relative;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
}
.homepic img {
height: 100%;
width: 100%;
}
.beba {
height: 65%;
width: 65%;
position: relative;
top: -50%;
left: 20%;
}
.beba img {
height: 100%;
width: 40%;
}
.ball1 {
height: 9%;
max-width: 100%;
position: absolute;
top: 85%;
left: 13%;
}
.ball2 {
height: 6%;
position: absolute;
top: 55%;
left: 9%;
}
JavaScript：
function parallax (element,distance,speed){
const item = document.querySelector(element);
item.style.transform = `translateY(${distance * speed}px)`;
}
window.addEventListener('scroll',function(){
parallax("header",window.scrollY,-0.1) ;
parallax("#home",0);
parallax(".beba",-0.5);
parallax(".ball1",-1.3);
parallax(".ball2",-0.7);
});
这就是第一部分的样子......
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
