84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
不使用任何套件的情況下....
https://www.spotify.com/us/進入後慢慢往下捲右側的"What’s on Spotify?"文字會慢慢出現等等手機版也相同可以使用
光阴似箭催人老,日月如移越少年。
给所有要缓缓出现(fadeup)的元素加个初始化class默认opacity为0,然后在页面加载完成后,找到所有的有该class的dom集合,然后监听页面滚动事件,每次滚动后遍历一下dom集合,如果在显示区域内然后就加个css的opacity渐变为1的动画,然后从集合中移除这个dom,直到左右的dom被移除,集合为空就取消监听器。
给你写了个demo,点击看代码和预览。https://jsfiddle.net/1vLf6c8r/1/
还可以优化下滚动的时候延迟几十毫秒,避免持续滚动带来的抖动。
wow.js + animate.css 要什么效果在这找 比如你说的那个效果 就是
...
用getBoundingclientreat.top判断距离顶部距离,不过听说这个方法老了
给所有要缓缓出现(fadeup)的元素加个初始化class默认opacity为0,然后在页面加载完成后,找到所有的有该class的dom集合,然后监听页面滚动事件,每次滚动后遍历一下dom集合,如果在显示区域内然后就加个css的opacity渐变为1的动画,然后从集合中移除这个dom,直到左右的dom被移除,集合为空就取消监听器。
给你写了个demo,点击看代码和预览。
https://jsfiddle.net/1vLf6c8r/1/
还可以优化下滚动的时候延迟几十毫秒,避免持续滚动带来的抖动。
wow.js + animate.css 要什么效果在这找 比如你说的那个效果 就是
用getBoundingclientreat.top判断距离顶部距离,不过听说这个方法老了