如何实现此背景滚动效果

How can I achieve this background scroll effect?

本文关键字：背景 滚动 何实现 实现      更新时间：2023-09-26

我真的很喜欢每个背景部分向下滚动的方式。我已经看到它做了很多：这是链接 ： http://www.soleilnoir.net/believein/

有什么想法如何达到类似的效果吗？

谢谢

这种效应称为视差。

以下是与此效果相关的一些链接：

  • 耐克 http://www.nike.com/jumpman23/aj2012/的精彩演示
  • 视差 http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design 的集合（一定要看到每个例子，有些真的很棒！例如：http://benthebodyguard.com/index.php http://www.siebennull.com/http://janploch.de/）
  • 梅赛德斯A级网站 http://a-class.mercedes-benz.com/com/en/index.html#!/?s=live（不是真正的视差，但仍然很棒）
  • 有关如何使用视差效果 http://tympanus.net/codrops/2011/01/03/parallax-slider/制作图像滑块的教程
  • 另一个具有不同效果的教程 http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
  • 做视差 https://github.com/cameronmcefee/plax 的图书馆
  • 另一个图书馆 https://github.com/markdalgleish/stellar.js

您可能还喜欢这个：

  • http://johnpolacek.github.com/scrollorama/
  • http://joelb.me/scrollpath/

您可以通过观察滚动偏移位置，然后根据该滚动位置对不同元素进行动画处理的组合来实现这一点。 您将设置一个事件侦听器，并在某些位置触发函数以在页面上对元素进行动画处理。

如果使用jQuery，像这样：

$(document).on("scroll", checkScrollPosition);
function checkScrollPosition() { 
    var scrollPos = $(window).scrollTop();
    switch (scrollPos) {
        case (500):
           doSomething();
           break;
        case (1000):
           doSomethingElse();
           break;
    }
}
function() doSomething {
   // use animate to animate element(s) at 500
}
function() doSomethingElse {
   // use animate to animate element(s) at 1000
}

我相信可以比这更好地优化，但这应该足以开始。

相关文章：