请教大神一个设计思路,还望赐教,谢谢大家
javascript吧
全部回复
仅看楼主
level 1
我想做一个滚动后改变某div的透明度,监听滚动事件后,滚动值是100的时候,变为半透明,200的时候完全透明,但是会出现一个问题,性能损耗,从1 -> 100 发送了100百次滚动,执行同样的操作半透明。 如果加上防抖函数滚动过快会出现直接跳跃100半透明的情况,变成200完全透明,没有过度的动画效果,左右为难,还望大神不吝赐教。
2020年05月04日 15点05分 1
level 3
这个嘛你首先要拆分问题!
1,做一个滚动后改变某div的透明度,监听滚动事件后,滚动值是100的时候,变为半透明。2,200的时候完全透明。
遇到的问题:
但是会出现一个问题,性能损耗,从1 -> 100 发送了100百次滚动,执行同样的操作半透明。
如果加上防抖函数滚动过快会出现直接跳跃100半透明的情况,变成200完全透明,没有过度的动画效果,左右为难,还望大神不吝赐教。
首先性能!滚动值我建议改成100%,这样不管你的div多大都能适应,其次每1%的滚动值刷新在5毫秒左右(低于5毫秒不刷新,一直到停下来或者超过5毫秒的1%滚动再刷新),也就是说一瞬间的滚动在500毫秒之内就直接发一个事件100%。这样就不会有性能损耗。
变半通明应该是代码bug请检查。
2020年05月05日 08点05分 3
level 3
如果你可以说的更详细我可以帮你,我也是程序全栈。
2020年05月05日 08点05分 4
麻烦了,我想要做的是页面滚动后一个div位移加透明,就是鼠标滑轮也在页面滚动一下发生一次位移且变半透明,鼠标滑轮继续滑继续位移然后透明度更低。所以上面的滚定只改为100%貌似实现不了
2020年05月05日 10点05分
level 13
常用的延时思路:
配合 css
transition:background-color 0.1s
基本就可以实现平滑变化
var functionName=(function(){ //闭包,functionName 写你的函数名
var free=true; //是否空闲
var temp=null; //缓冲数据区
var wait=false; //延时期间是否有调用
function entrance(value) { //入口,value 为你的滚动值
if (free) { //判断是否空闲,如果空闲,如下
doSomething(value); //调用你的实现,传递传入数值
delay(); //设置延时器
} else { //判断是否空闲,如果不空闲,如下
temp=value; //缓冲数据
wait=true; //标记延时期间有调用
}
};
function delay() { //延时器
free=false; //标记为非空闲状态
setTimeout(function(){
if (wait) { //判断延时期间是否有调用,如有,如下
doSomething(temp); //调用你的实现,传递缓冲数值
wait=false; //清除延时期间调用标记
temp=null; //清除缓冲数据区
};
free=true; //标记为空闲状态
},100); //延时长度,自己设置合适的,这里为每秒上限10次
};
function doSomething(value) { //你的实现,函数名可以自己设置,记得把其他地方的也改了
//你的代码,value 为滚动值
};
return entrance; //暴露入口
})();
functionName(value) //调用
2020年05月07日 16点05分 5
看不懂了...这个平滑是能做trsnsform translate吗
2020年05月07日 16点05分
@极光掠过天边❤️ 如果你要改的属性很多,建议分开写,transition-property:你会修改的所有属性,用逗号分隔。 transition-duration:过渡时常,配合延时函数。 支持所有css属性,但需要注意,translate属于transform下的子样式,合为transform
2020年05月07日 16点05分
@BSPR0002 我以后要页面滚动一下 很多个div 慢慢发生透明度变化 translate变化 这个可以吗
2020年05月08日 02点05分
@极光掠过天边❤️ 都可以的,只要你js写对了啥都能干
2020年05月08日 02点05分
level 13
2020年05月07日 18点05分 6
1