-1

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

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

重新创建这种视差滚动效果的最简单和最轻松的方法是什么？

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

我需要在一个页面上有多个实例，比如laruchequiditoui.frwebsite ；如果可能的话和enter code hereiPad 兼容。

提前致谢 ！

4

2 回答 2

1

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

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

这里还有一个纯 CSS 视差教程。

于 2015-02-17T01:45:23.990 回答
1

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

于 2015-02-17T01:48:16.903 回答