Jquery / Javascript不透明动画滚动 [英] Jquery/Javascript Opacity animation with scroll
问题描述
我想根据用户滚动更改对象的不透明度(并使过渡为动画)。
example(http://davegamache.com/)
I'm looking to change the opacity on an object (and have the transition be animated) based on a users scroll. example(http://davegamache.com/)
我在这里搜索了所有地方
,但它最终指向我waypoints插件(http://stackoverflow.com/questions/6316757/opacity-based-on-scroll-position)
I've searched everywhere like here, but it ends up pointing me to the waypoints plugin (http://stackoverflow.com/questions/6316757/opacity-based-on-scroll-position)
我已经实现了[waypoints] [1 ]插件,并且一旦它的高于100px,对象就会褪色。 [使用offet属性]但是想基本上控制对象的不透明度,并且动画是可见的,如上面的例子。
I've implemented the [waypoints][1] plugin and have the object fading once it's higher than 100px. [Using the offet attribute] but would like to basically control the opacity of an object and have the animation be visible like the above example.
这是我最后的手段。非常感谢任何帮助。
I've searched all over- this is my last resort. Any help is greatly appreciated.
推荐答案
工作示例,起点和终点:$ b $ b http://jsfiddle.net/z7E9u/1/
working exemple with starting and ending point here: http://jsfiddle.net/z7E9u/1/
我复制粘贴基本代码
var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity
,fading = $('#fading')
;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
,opacity=0
;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity).html(opacity);
});
这篇关于Jquery / Javascript不透明动画滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!