Question

我试图创造这个＆＃34;视差＆＃34;效果：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进行视差，this page上的教程很少。

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

还有一个纯CSS视差教程here。

Answer 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/

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

2 个答案: