Jquery/Javascript不透明度动画和滚动
我希望根据用户的滚动更改对象的不透明度(并设置过渡动画)。 范例(http://davegamache.com/) 我到处都找过了 就像这里,但它最终指向了waypoints插件(http://stackoverflow.com/questions/6316757/opacity-based-on-scroll-position) 我已经实现了[waypoints][1]插件,当对象的像素值高于100px时,它就会消失。[使用offet属性]但希望基本上控制对象的不透明度,并使动画像上面的示例一样可见 我到处都找过了,这是我最后的选择。Jquery/Javascript不透明度动画和滚动,javascript,jquery,html,css,jquery-animate,Javascript,Jquery,Html,Css,Jquery Animate,我希望根据用户的滚动更改对象的不透明度(并设置过渡动画)。 范例(http://davegamache.com/) 我到处都找过了 就像这里,但它最终指向了waypoints插件(http://stackoverflow.com/questions/6316757/opacity-based-on-scroll-position) 我已经实现了[waypoints][1]插件,当对象的像素值高于100px时,它就会消失。[使用offet属性]但希望基本上控制对象的不透明度,并使动画像上面的示例一
非常感谢您的帮助。工作示例的起点和终点如下: 我在这里复制粘贴基本代码
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);
});
var fadeStart=100//100px或更小的滚动将等于1不透明度
,fadeUntil=200//200px或更大的滚动将等于0不透明度
,褪色=$(“#褪色”)
;
$(窗口).bind('scroll',function(){
var offset=$(文档).scrollTop()
,不透明度=0
;
if(offset我查看了该站点的源代码。
它使用:$(document).scrollTop();
要确定滚动高度,请单击$(window).scroll(function(){})
,将事件侦听器绑定到滚动
试试这个:
$(window).scroll(function(){
var fromtop = $(document).scrollTop(); // pixels from top of screen
$('#fademeout').css({opacity: 100-fromtop}); // use a better formula for better fading
});
下面是一个工作示例:
以及守则:
var target = $('div');
var targetHeight = target.outerHeight();
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
我们所要做的就是抓取窗口的当前滚动位置,计算出问题元素在屏幕外的百分比,并用该百分比设置其不透明度。我喜欢这个解决方案
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);
});
var fadeStart=100//100px或更小的滚动将等于1不透明度
,fadeUntil=200//200px或更大的滚动将等于0不透明度
,褪色=$(“#褪色”)
;
$(窗口).bind('scroll',function(){
var offset=$(文档).scrollTop()
,不透明度=0
;
如果(offset由于我的声誉低于50,我无法回答Lonut的问题,如何进行反向操作。如果您想要反向操作,这里是我的代码,对于导航栏非常方便
$(window).scroll(function () {
var offset = $(document).scrollTop()
var opacity = 0;
if (offset <= 0) {
opacity = 0;
} else if (offset > 0 & offset <= 200) {
opacity = (offset - 1) / 200;
}
else {
opacity = 1;
}
$('.black-background').css('opacity', opacity).html(opacity);
});
$(窗口)。滚动(函数(){
var offset=$(文档).scrollTop()
var不透明度=0;
如果(offset 0&offset我知道我参加聚会有点晚,但我的方法是:
$(window).scroll(function(){
var st = $(window).scrollTop();
var range = 300 // finetune this to the desired effect
$('.yourelement').css("opacity", 1- st / range); // animate your element
});
只需在我的答案中添加一个起点和终点,我的答案肯定会更符合您的要求。这太好了。我感谢您的快速响应。绝妙的解决方案!:)与此相反的是什么?我的意思是将不透明度从0更改为1。