Question

我决定通过JQuery + CSS3添加一些滚动效果来重新设计我的网站我有一组水平居中的div，垂直间隔一点。

我正在尝试应用this效果，因此每个div会在滚动时淡入淡出/缩小/缩小/缩小，同时淡化/缩放另一个。

我知道我可以使用.scroll事件处理程序，但不确定它将如何用于此类效果。

这是发布时添加的当前jQuery。

$(document).ready(function() {
    $(".container").scroll(function() {
        if ($(".container").scrollTop() > 50) {
            $(".container div").css('background', 'rgb(200, 54, 54)').stop().animate({"opacity":".5"}, 1000)
        }
    });
});

Answer 1

这可能是一个非常有用的脚本，只是不重新创建轮子： http://www.bytemuse.com/scrollIt.js/

$.scrollIt({
  upKey: 38,             // key code to navigate to the next section
  downKey: 40,           // key code to navigate to the previous section
  easing: 'linear',      // the easing function for animation
  scrollTime: 600,       // how long (in ms) the animation takes
  activeClass: 'active', // class given to the active nav element
  onPageChange: null,    // function(pageIndex) that is called when page is changed
  topOffset: 0           // offste (in px) for fixed top navigation
});

它将自动检测显示器上显示的活动元素，然后您可以在激活elemnt时触发任何操作（元素已滚动到）。

以防您需要原生解决方案，然后在滚动容器时使用它：

http://opensource.teamdf.com/visible/examples/demo-basic.html

if($('#element').visible();) {//do whatever you want}

这是一个小提琴： http://jsfiddle.net/prollygeek/AHguL/8/

最后如果您正在寻找非常酷的滚动效果，这将是一个完美的选择： http://johnpolacek.github.io/superscrollorama/

使用JQuery Scroll淡入/缩放Div In / Out

1 个答案: