问题描述
当它在小于 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 (将#修改为@)