タブレットとモバイルの視差スクロールを改善する

Question

私が取り組んでいるウェブサイト上のヒーローカバーにある視差スクロール効果に関する問題があります。

私はヒーローカバースクロールの背景画像をウェブサイト全体よりも遅くしたいと思っています。デスクトップで

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上のFirefox - モバイルAndroid上で非常に途切れ

クロム - 完全に滑らかな、無問題

のFirefoxのモバイルのAndroid上

• インターネット：ここ

  は少しレポートですAndroidのタブレット - チョッパーは、モバイル対応の モバイルデバイスと比べると重大ではありません。

• Androidタブレットのクロム
iOSの非常にとぎれとぎれ
• サファリ - -
• サムスンのAndroidタブレットのインターネット完全に滑らか

Answer 1

ラスタースクロールは、モバイルで悪名高いトリッキーです。

これまでのonscrollイベントがfired when the page stops scrollingであったため、JavaScriptソリューションではモバイルで問題が発生しました。

が

このアプローチのためのCSSはそうのようになります：

あなたはhttps://developers.google.com/web/updates/2016/12/performant-parallaxingで説明し、この有望なCSSドリブンソリューションを試みることができるようにHTMLのスニペットを前提としてい

.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); 
} 

これは：

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

しかし、リンクに記載されているように、この技術には現在、特にMobile Safariでは落とし穴があります。