[英]Parallax scrolling in Safari on iOS
据我了解,滚动时无法执行JS。 它知道的所有有效的iOS视差滚动脚本都可以在js中重新创建本机滚动效果以实现此目的。 Iscroll
苹果如何在自己的网站上实现这一目标。
在此页面上滚动时,请查看模糊的背景图像。
完全可以在没有JS的iOS设备上创建CSS。 有一些很好的例子,例如基思·克拉克(Keith Clark),您可以在这里找到
但是我个人发现这在iOS设备上没有达到预期的效果。 正如我期望的那样,在释放触摸后页面将继续滚动,但是似乎没有发生-好像页面是“粘性的”。 我发现我遇到的许多Pure CSS解决方案就是这种情况。
我通常使用Bootstrap,因此以下示例是我用来产生我所追求的视差效果的示例。
在您的CSS中添加以下内容:
#fixedbg {
background:url(../img/yourparallax-image.jpg) no-repeat center center;
background-size:cover;
height:100%;
position:fixed !important;
width:100%;
z-index:-2;
top:0;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
}
然后在您的html中添加以下内容:
<div id="fixedbg"></div>
<header id="top" class="header">
</header>
<section id="article" class="article">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-12">
<p class="text">Example text content goes here</p>
</div>
</div>
</div>
</section>
#fixedbg从CSS调用正确的图像,然后标题部分设置要在其上运行视差效果的整页图像。
我通常针对各种设备屏幕尺寸放置#fixedbg css媒体查询,因为我喜欢根据内容使用不同的尺寸。
请注意,这是一个简单的视差,到目前为止,我还没有在同一页面上“叠加”多个倍,但是在上面的代码和上面的Keith Clark的示例中所采样的代码之间,这应该提供一个很好的起点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.