改进平板电脑和手机上的视差滚动

我有一个关于视差滚动效果的问题，我对我正在处理的网站上的英雄封面有影响。改进平板电脑和手机上的视差滚动

所以我想让英雄封面滚动的背景图像比整个网站的速度慢。

不要做到这一点我用下面的方法：

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

改进平板电脑和手机上的视差滚动

回答

相关问题