用于视差滚动层动画的最轻量级 JavaScript 插件是什么？ [关闭]答案

【问题标题】：What is the lightest JavaScript plugin for parallax scrolling layers animations? [closed]用于视差滚动层动画的最轻量级 JavaScript 插件是什么？ [关闭]
【发布时间】：2015-02-17 01:35:09
【问题描述】：

我正在尝试创建这种“视差”效果：https://www.laruchequiditoui.fr/fr （如.homeSection--collection 部分）。

它是一个包含三层的 div，具有滚动透视效果。该网站使用 TweenMax，但对我来说，制作这种效果似乎很沉重。

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

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

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

提前致谢！

【问题讨论】：

skrollr
+1 for skrollr 但这不是权威意见，因为我没有尝试过 scrollmagic，但是在阅读了它们之后，skrollr 似乎对于最近的一个项目来说是最简单的，而且对我来说当然效果很好。
哦，Skrollr 看起来非常轻巧且易于使用。我会做一些测试。谢谢。
我刚刚发布了一个简单视差的快速示例，以帮助您入门。我第一次尝试时发现他们的演示示例有点复杂！
Skrollr 似乎是您的最佳选择。请注意，在 ScrollMagic 2.0（目前处于测试阶段）中，您还可以在没有 TweenMax 的情况下制作纯 CSS 动画。

标签： javascript jquery parallax gsap scrollmagic

【解决方案1】：

我个人会使用skrollr.js 进行视差，this page 上的教程很少。

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

还有纯CSS视差教程here。

【讨论】：

我正在检查完整的 CSS 示例，看起来真的很有趣。谢谢。

【解决方案2】：

用于视差滚动的最小 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-->

#splash 的一些 CSS：

#splash {
    position: fixed;
}

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

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

把它放在你的<head> 或<body> 的底部。

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

【讨论】：