我正在尝试基于此codepen创建视差效果:https://codepen.io/chaobu/pen/qsyhf
但是,在移动设备上,这行不通。我如何在移动浏览器上使视差效应工作?
似乎这里的JavaScript不会影响视差效应。我最初认为将JavaScript点击事件更改为触摸...但是这无效。我还尝试为背景图像和位置创建媒体查询:粘性;他们,这也没有用。
html:
<section id="1">
<article>
<p class="title"><strong>OUR WORK</strong></p>
<a class="homelink" href="#"><p class="link">FULL PROJECT LIST</p></a>
</article>
</section>
<section id="2">
<article>
<p class="title"><strong>DRAWINGS</strong></p>
<a class="homelink" href="#"><p>CONTENT LINK</p></a>
</article>
</section>
<section id="3">
<article>
<p class="title"><strong>WHO WE ARE:</strong></p>
<a class="homelink" href="#"><p>CONTENT LINK</p></a>
</article>
</section>
<section id="4">
<article>
<p class="title"><strong>WHAT WE DO:</strong></p>
<a class="homelink" href="#"><p>CONTENT LINK</p></a>
</article>
</section>
<section id="5">
<article>
<h1>TITLE</h1>
<a class="homelink" href="#"><p>CONTENT LINK</p></a>
</article>
</section>
</div>
CSS:
.wrapper {
position: relative;
box-shadow: 0 0 1em #333333;
}
.wrapper section {
position: relative;
background: #00477C;
}
.wrapper section article {
width: 50%;
margin: 0 auto;
padding: 2em 0;
}
.wrapper section article p {
margin-bottom: 1em;
}
.wrapper section article p:last-of-type {
margin-bottom: 0;
}
.wrapper section:after {
content: "";
display: block;
position: relative;
background-attachment: fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100vh;
width: 100%;
}
.img-src {
position: fixed;
background-position: center;
-webkit-background-size: cover;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.wrapper section:nth-child(1):after {
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(2):after {
background-image: url("../img/test2.jpg");
}
.wrapper section:nth-child(3):after {
background-image: url("../img/test3.jpg");
}
.wrapper section:nth-child(4):after {
background-image: url("../img/test4.jpg");
}
.wrapper section:nth-child(5):after {
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(6):after {
background-image: url("../img/test2.jpg");
}
@media only screen and (max-width: 600px) {
.wrapper section:nth-child(1):after {
position: -webkit-sticky;
top:65px;
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(2):after {
position: -webkit-sticky;
background-image: url("../img/test2.jpg");
}
.wrapper section:nth-child(3):after {
position: -webkit-sticky;
background-image: url("../img/test3.jpg");
}
.wrapper section:nth-child(4):after {
position: -webkit-sticky;
background-image: url("../img/test4.jpg");
}
.wrapper section:nth-child(5):after {
position: -webkit-sticky;
background-image: url("../img/test.jpg");
}
.wrapper section:nth-child(6):after {
position: -webkit-sticky;
background-image: url("../img/test2.jpg");
}
}
@media only screen and (max-width: 600px) {
.wrapper section article {
width: 80%;
}
.wrapper section:after {
height: 100vh;
}
}
我希望这种视差能够在移动设备上工作,但事实并非如此。谁能帮忙吗?谢谢!
在许多移动浏览器上,视差效果无法按预期或根本起作用。W3上有一个非常基本的演示,可以在这里看到。在您的移动浏览器中对其进行测试,效果也可能失败。它当然是在我的。
我确实想提供另一种选择。我在视差效果以及其他桌面浏览器上也有类似的问题。与其使用background-attachment: fixed
,它正在杀死浏览器性能,很可能是大多数移动浏览器不按预期解释这一点的原因,而是使用jQuery用滚动值来翻译背景的y轴。这将图像保持在适当的位置。
您可以在此处找到我的解决方案的实现。还包括原始代码,因此您可以调整它以满足您的需求。让我知道这是否有任何帮助。