的jsfiddle

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

我正在尝试应用效果,因此每个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)
        }
    });
});

===============>>#1 票数: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/

  ask by Michael Schwartz translate from so

未解决问题?本站智能推荐:

2回复

jQuery自动在div中淡入并在滚动中淡出

我对JQuery有点陌生,我试图使页面底部的div在加载页面时淡入,然后在用户开始滚动时,div需要淡出,然后在滚动回顶部时重新出现。 我刚刚用来淡入div的代码无法正常工作,可以在此处查看http://jsfiddle.net/DeZnT/ 我正在使用的jQuery是 预先
3回复

在jQuery滚动中淡入淡出div

我有几个div,基本上只是彩色矩形,以帮助可视化。 当我向下滚动页面时,每个矩形应该根据滚动条位置fadeIn或fadeOut 。 不幸的是,它变得怪异,褪色更像痉挛闪光灯。 我认为最好通过每个元素的滚动方式来确定不透明度水平,但我甚至不确定从哪个开始就是那种愚蠢。 似乎这家伙有类似
1回复

使用jQuery淡出DIV并淡入下一个DIV

我试图从头开始构建一个滑块,只是有点卡住了,我基本上希望每个div淡出,然后下一个逐渐淡入,一旦每个div淡入,我希望其中的图像具有动画效果,我就是我做了一个小提琴来尝试解释。 谢谢你的帮助! http://jsfiddle.net/FeqkB/2/
3回复

jQuery-如何在滚动时淡入和淡出元素(div)

我对Jquery和Javascript很陌生。 我知道有一堆完全相同的帖子或问题,但都不起作用,或者我只是盲目使用。 我的目标是在向下滚动时在div中淡入,在某个点向下滚动时,我要向后淡出div,而另一个div逐渐淡入。当然,淡入是没有问题的,但是淡出是问题。 我要应用6个div序列。
3回复

jQuery-使用复选框淡入和淡出div

我想使用一个复选框淡入和淡出div,但是我不确定如何操作,当您选中该复选框会在div中淡入时,而取消选中该复选框则会使其淡出。 我的代码如下:
2回复

Jquery:Div淡入淡出

我一直试图在30秒内在evey中进行淡入淡出并在30秒后消失
1回复

jQuery淡入/淡出滚动公式

当您向下滚动页面时,我的图像会淡入淡出。 我遇到的问题是,一旦开始滚动,不透明度就会改变。 公式如下: 据我了解,当向下滚动500像素时,一张图像会淡出,而另一张图像则在该点处淡入。 我想做的只是稍后在滚动中开始不透明度更改。 我如何开始将不透明度从500像素下移,然后从
1回复

使用jQuery淡入和淡出不同的div以及输入文本

我对jQuery相当陌生,并且正在尝试重现此网站http://www.wolframalpha.com/的帮助提示 我已经取得了一些进展,但现在正在挣扎。 这是我到目前为止所拥有的: 帮助气泡的html: 风格: 加载dom时运行的jQuery: 短暂延迟后
2回复

如何使用jQuery隐藏div,然后在文档滚动条上使其淡入淡出?

我正在尝试使用jQuery在页面加载时隐藏div,但是当您向下滚动到某个点时,它会逐渐消失。现在下面的脚本几乎可以做到这一点,我遇到的问题是div首先在页面加载时可见,我想将其隐藏...我似乎无法弄清楚如何。 我尝试将.hide()添加到脚本中,但是我不知道如何重新格式化它。 我原
1回复

在固定位置div上使用jquery淡入/淡出功能时,防止页面自动向上滚动

我有一个网页,我想通过单击一个按钮来使div出现在屏幕右侧(div和按钮都具有固定位置),我使用jQuery fadein / out使其显示 它工作正常,但是当我单击按钮时,页面自动滑到顶部 htmlCode: CSS代码: JS代码: