什么是最轻的 JavaScript 视差滚动层动画插件？

Question

我正在尝试创建此 "parallax" 效果：https://www.laruchequiditoui.fr/fr （如 .homeSection--collection 部分）。

这是一个div包含三层的滚动透视效果。该网站使用 TweenMax，但对我来说，要达到这种效果似乎很重。

重现这种视差滚动效果的最简单、最轻松的方法是什么？

我试图清理 laruchequiditoui.fr 示例以仅保留必要的代码：http://is.gd/r0JNHl

我需要在一个页面上有多个实例，例如 laruchequiditoui.fr 网站；并且enter code here iPad 尽可能兼容。

提前致谢！

Answer 1

我个人会使用 skrollr.js for parallax, there are few tutorials on this page。

或者您可能更喜欢使用 ScrollMagic。

还有纯CSS视差教程here。

Answer 2

在您 link 的示例中，像山脉一样的视差滚动的最小 Skrollr 设置：

HTML - 在 <body> 标签内：

<div class="skrollr-body">

    <!-- 
      Put the slow image here. It will scroll only 500px for 1000 pixels of
      browser scroll, so 'half speed'. 
    -->
    <div id="splash" data-0="top: 0px" data-1000="top: -500px">
        <img src="..." />
    </div>

   <!-- 
    Put your normal image here, which will scroll with parallax over the above
    image. This will need a margin to push it below your fixed #splash. Set
    its margin-top to the height of #splash and set its position to absolute.
   -->
  <div>
      <img src="..." />
  </div>

</div><!--/.skroll-body-->

一些 CSS #splash:

#splash {
    position: fixed;
}

还有一些 JS 来实现它。假设您使用 jQuery，否则您需要 document.onload:

$(document).ready(function() {
    skrollr.init()
});

将其放入您的 <head> 或 <body> 的底部。

演示 - http://jsfiddle.net/sifriday/1ugaooj0/

什么是最轻的 JavaScript 视差滚动层动画插件？

What is the lightest JavaScript plugin for parallax scrolling layers animations?

javascript

jquery

parallax

scrollmagic

gsap