如何使用 CSS3 实现平滑视差滚动跨浏览器、跨平台答案

【问题标题】：How To Use CSS3 For Smooth Parallax Scrolling Cross-Browser, Cross-Platform如何使用 CSS3 实现平滑视差滚动跨浏览器、跨平台
【发布时间】：2015-04-22 04:03:29
【问题描述】：

我正在页面上实现视差标题。它与 Mac OS X 上的 Firefox 和 Safari 上的 Apple TrackPad 配合得很好。但在 Mac 版 Chrome 和 Windows 中的任何浏览器上都不能很好地工作。

这是我正在实现的 jQuery：

/*----------------------------------------------------------------------------*\
 * PARALLAX HEADER IMAGE
\*----------------------------------------------------------------------------*/
$(window).scroll( function(){
  var scroll = $(window).scrollTop(),
  slowScroll = scroll*.85;
  clearTimeout($.data(this, 'scrollTimer'));
  $.data(this, 'scrollTimer', setTimeout(function() {
    $('.no-touch  .js--parallax-header').css({ transition: "" });
  }, 50));
  $('.no-touch  .js--parallax-header').css({
    transform: "translate3d( 0, " + slowScroll + "px, 0)",
    transition: "none" });
});

This is the page我正在尝试实现它。

一个人很紧张。并且使用带有滚轮的鼠标，它非常跳跃。我的页面对于画布外导航菜单也有转换效果，所以我想我需要解决这个问题。

Squarespace does an excellent job 实现了同样的视差效果。他们是怎么做到的？

非常感谢任何帮助！谢谢！

【问题讨论】：

首先，您应该向 html 和 body 添加功能： $("html, body").scroll... 其次，我不知道您为什么要覆盖 jquery 的动画，但您可以用它。第三，您可以使用 translate3d 但使用 translateY 不是很简单，因为您只想垂直移动吗？第四，对于手机和一些设备，jquery的性能很差，我建议你使用纯js解决方案或者避免移动端的视差。
您的问题标题似乎不正确。您实际上不是在问“如何使用 jQuery 实现平滑视差...”吗？此外，Squarespace 主页不再包含视差。

标签： jquery css scroll transform parallax

【解决方案1】：

基于 SquareSpace 的做法：

背景图像与内容分开。见div.fullscreen-background-image 和section.hero-text
这允许section.hero-text 成为正常滚动的一部分
在滚动时，他们会更改 div.fullscreen-background-image 内部图像的 transform:translate3d(0px, 0px, 0px);，这很好，因为 transform 被视为 high performance animation！
如果不深入了解他们的js，我会假设他们debounced 滚动事件并使用requestAnimationFrame()。 Read more about that here!

话虽这么说，您没有太多内容可以滚动到女士身上，所以为什么不考虑将她添加到body 作为background-image 并让她成为background-attachment: fixed; 以便页面滚动超过她？ Read more.

【讨论】：