我正在尝试基于此codepen创建视差效果:https://codepen.io/chaobu/pen/qsyhf
但是,在移动设备上,这不起作用。如何让视差效果在移动浏览器上发挥作用?
看来这里的Javascript并没有影响视差效果。我最初想将 javascript 点击事件更改为 touch...,但这没有用。我还尝试为背景图像和位置创建媒体查询:sticky;他们,但这也不起作用。
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 有一个非常基本的演示,可以在here 看到。在手机浏览器中测试一下,效果也可能会失败。对我来说确实如此。
不过我确实想提供一种替代方案。我的视差效果以及其他桌面浏览器也遇到了类似的问题。我没有使用
background-attachment: fixed
(它会降低浏览器性能,并且很可能是大多数移动浏览器不按预期解释的原因),而是使用 jQuery 来通过滚动值平移背景的 Y 轴。这可以使图像保持在适当的位置。
您可以在这里找到我的解决方案的实现。原始代码也包含在内,因此您可以对其进行调整以满足您的需求。 让我知道这是否有任何帮助。
这不是真的。当然可以,你只需要调用移动CSS即可。如果您有大量图像或大量内容,请谨慎使用它,并且可能会陷入困境。
等级 移动视差 将此类添加到任何部分、行、列或模块的 CSS 类框中,设置背景图像,然后打开视差效果。真正的视差和 CSS 视差都可以工作。