javascript - 這種特效怎麼做？

Question

不使用任何套件的情況下....

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

Answer 1

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

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

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

Answer 2

wow.js + animate.css 要什么效果在这找 比如你说的那个效果 就是

<p class="wow fadeInUp">...</p>

Answer 3

用getBoundingclientreat.top判断距离顶部距离，不过听说这个方法老了