0

我有 2 个 div，我们称它们为 #div_1 和 #div_2。两个 div 都有内容。我想做但不知道的是：当用户滚动页面时，我希望看到 div_1 消失在屏幕顶部，就像它被推离屏幕一样。同时 div_2 应该在 div_1 下方可见。然后当 div_2 完全可见时， div_2 应该能够滚动，如果您愿意，可以延迟滚动。

沿着：http ://eephusleague.com/magazine/

我已经尝试编写和编辑很多片段，但我似乎无法找到方法。我是 jQuery 的新手，所以如果可能的话，我真的很感激例子。

提前致谢

4

2 回答 2

1

有很多 jquery 插件可用于产生这种影响，并且这些天非常流行。下面称为视差滚动网站是一些插件。

http://markdalgleish.com/projects/stellar.js/demos/

http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/

http://johnpolacek.github.com/scrollorama/

http://joelb.me/scrollpath/

http://curtain.victorcoulon.fr/#intro

网站示例：

http://www.1stwebdesigner.com/inspiration/parallax-website-design/

于 2012-06-19T06:24:41.203 回答
0

你看到和说的是视差滚动。

http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design

有一些 jQuery 插件，但如果你不管它是如何工作的，我可以给你一个小例子：

在文档滚动时，它是一个 jquery 事件：

   $(window).scroll(function() {


   });

如果用户使用本机浏览器滚动条滚动窗口，则此函数中的所有内容都会做出反应。

您可以在此函数中进行一些检查，例如：

if ($(this).scrollTop() > 10) {
    // if current window top position greater than 10 you cant let move some elements
    $('#div_2').css{top:$(this).scrollTop()};
}

全部一起：

   $(window).scroll(function() {

      if ($(this).scrollTop() > 10) {
         $('#div_2').css{top:$(this).scrollTop()};
      }

   });

这是非常基本的

一些额外的获取当前滚动方向：

var oldPos = 0;
function getScrollDirection(actPos) {

   if (actPos > oldPos) {
       console.log("down");
   } else {
       console.log("up");
   }
   oldPos = actPos;

},

将此函数放在滚动事件中，例如：

$(window).scroll(function() {

      getScrollDirection($(this).scrollTop());

});

现在您有了一些工具和信息来为您的网站构建自己的视差滚动 :-)

我认为这个插件是最好的：

http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

所以我希望这会有所帮助。

于 2012-06-19T06:37:52.913 回答