使用JQuery滚动淡入/淡出/缩放div

使用JQuery滚动淡入/淡出/缩放div,jquery,Jquery,今天我决定通过JQuery+CSS3添加一些滚动效果来重新设计我的网站。 我有一组div,水平居中,垂直间隔 我正在尝试应用效果,使每个div在滚动时淡入/缩放,在淡入/缩放另一个时淡入/缩放 我知道我可以使用事件处理程序,但不确定如何将其用于这种类型的效果 以下是发布时添加的当前jQuery $(document).ready(function() { $(".container").scroll(function() { if ($(".container").scr

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

我正在尝试应用效果,使每个
div
在滚动时淡入/缩放,在淡入/缩放另一个时淡入/缩放

我知道我可以使用事件处理程序,但不确定如何将其用于这种类型的效果

以下是发布时添加的当前jQuery

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

这可能是一个有用的脚本,只是不需要重新创建控制盘:

它将自动检测监视器上显示的活动元素,然后您可以在激活元素时触发任何操作(元素已滚动到)

如果您需要本机解决方案,请在滚动容器时使用:

这是一把小提琴:

最后,如果您正在搜索非常酷的滚动效果,这将是一个完美的选择:

这个插件太棒了@很高兴这对你有帮助。
$.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
});
if($('#element').visible();) {//do whatever you want}