简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 這種特效怎麼做？
大家讲道理
大家讲道理 2017-04-11 09:56:47
0
3
349

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

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

大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

全員に返信(3)
Ty80
Ty802017-04-11 09:58:47 3棟

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

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

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

いいねを押す +0
返信を追加
Peter_Zhu
Peter_Zhu2017-04-11 09:58:47 2棟

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

<p class="wow fadeInUp">...</p>
いいねを押す +0
返信を追加
巴扎黑
巴扎黑2017-04-11 09:58:47 1棟

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

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！