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{

	padding: 140px 0px;

	background-image: url("https://s-media-cache-ak0.pinimg.com/originals/0e/18/3b/0e183b91a011639bfed7ebfd6a1f7063.jpg");
	background-repeat: no-repeat;
	background-position: 25% -217px;
	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 on Mobile Android - 非常不稳定
Chrome on Mobile Android - 非常流畅，没有问题
Android平板电脑上的Firefox - 波澜不那么严重移动对手
Android平板电脑上的Chrome浏览器 - 不稳定
安卓平板电脑上的三星互联网 - 非常不稳定
iOS上的Safari - 非常流畅

Answer 1

在移动设备中，视差滚动非常棘手。

从历史上看，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>

然而，如链接中所述，此技术目前也存在缺陷 - 特别是在Mobile Safari中。

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

1 个答案: