javascript - 這種特效怎麼做？

Question

不使用任何套件的情況下.... https://www.spotify.com/us/進入後慢慢往下捲右側的"What’s on Spotify?"文字會慢慢出現等等手機版也相同可以使用

PHP中文网 · Answer

给所有要缓缓出现（fadeup）的元素加个初始化class默认opacity为0，然后在页面加载完成后，找到所有的有该class的dom集合，然后监听页面滚动事件，每次滚动后遍历一下dom集合，如果在显示区域内然后就加个css的opacity渐变为1的动画，然后从集合中移除这个dom，直到左右的dom被移除，集合为空就取消监听器。

给你写了个demo，点击看代码和预览。
https://jsfiddle.net/1vLf6c8r/1/

还可以优化下滚动的时候延迟几十毫秒，避免持续滚动带来的抖动。