[英]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.