改進平板電腦和手機上的視差滾動

我有一個關於視差滾動效果的問題，我對我正在處理的網站上的英雄封面有影響。改進平板電腦和手機上的視差滾動

所以我想讓英雄封面滾動的背景圖像比整個網站的速度慢。

不要做到這一點我用下面的方法：

window.requestAnimationFrame = window.requestAnimationFrame 
 
    || window.mozRequestAnimationFrame 
 
    || window.webkitRequestAnimationFrame 
 
    || window.msRequestAnimationFrame 
 
    || function(f){setTimeout(f, 1000/60)} 
 

 
var hero = document.getElementsByClassName('hero'); 
 

 
function parallax(){ 
 
    var scrolltop = window.pageYOffset; 
 
    hero[0].style.backgroundPosition = '25% ' + (+scrolltop * .5 - 217) + 'px'; 
 
} 
 

 
window.addEventListener('scroll', function(){ 
 

 
    requestAnimationFrame(parallax); 
 
    
 
}, false)

.hero{ 
 

 
\t padding: 140px 0px; 
 

 
\t background-image: url("https://s-media-cache-ak0.pinimg.com/originals/0e/18/3b/0e183b91a011639bfed7ebfd6a1f7063.jpg"); 
 
\t background-repeat: no-repeat; 
 
\t background-position: 25% -217px; 
 
\t background-size: cover; 
 
} 
 

 
.paddingTop{ 
 
    padding: 50px 0; 
 
} 
 
.paddingBottom{ 
 
    padding: 800px 0; 
 
}

<div class='paddingTop'> 
 
</div> 
 

 
<div class="hero"> 
 
</div> 
 

 
<div class='paddingBottom'> 
 
</div>

在桌面上它的罰款，但麻煩與平板電腦和移動設備開始。滾動網站時，此類設備上的結果會變得非常不穩定和/或動畫完全滯後。

雖然這個問題似乎與所有移動瀏覽器不一致。

這裏是一個小報告：

在Android移動互聯網 - 波濤洶涌
火狐在手機上的Android - 非常波濤洶涌
Chrome瀏覽器在手機上的Android - 完美流暢，沒有任何問題
火狐上Android平板電腦 - 簡陋不如手機對手
Android平板電腦上的Chrome - 不穩定
三星互聯網上的Android平板 - 非常波濤洶涌
Safari瀏覽器在iOS上 - 完美流暢

來源

2017-04-17 Raul Špilev

視差滾動是移動出了名的棘手。

從歷史上看，javascript解決方案在移動設備上存在問題，因爲onscroll事件爲fired when the page stops scrolling。

你可以嘗試在https://developers.google.com/web/updates/2016/12/performant-parallaxing描述這個充滿希望的CSS驅動的解決方案：

這種方法的CSS看起來就像這樣：

.container { 
    width: 100%; 
    height: 100%; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    perspective: 1px; 
    perspective-origin: 0 0; 
} 

.parallax-child { 
    transform-origin: 0 0; 
    transform: translateZ(-2px) scale(3); 
}

它假定HTML的網頁摘要此：

<div class="container」> 
    <div class="parallax-child」></div> 
</div>

但是，正如鏈接所述，這種技術目前也存在缺陷 - 特別是在移動Safari中。

來源

2017-04-29 20:32:14 Mike

改進平板電腦和手機上的視差滾動

回答

相關問題