不使用任何套件的情況下....
https://www.spotify.com/us/
進入後
慢慢往下捲
右側的"What’s on Spotify?"文字會慢慢出現等等
手機版也相同可以使用
不使用任何套件的情況下....
https://www.spotify.com/us/
進入後
慢慢往下捲
右側的"What’s on Spotify?"文字會慢慢出現等等
手機版也相同可以使用
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
给所有要缓缓出现(fadeup)的元素加个初始化class默认opacity为0,然后在页面加载完成后,找到所有的有该class的dom集合,然后监听页面滚动事件,每次滚动后遍历一下dom集合,如果在显示区域内然后就加个css的opacity渐变为1的动画,然后从集合中移除这个dom,直到左右的dom被移除,集合为空就取消监听器。
给你写了个demo,点击看代码和预览。
https://jsfiddle.net/1vLf6c8r/1/
还可以优化下滚动的时候延迟几十毫秒,避免持续滚动带来的抖动。