首先實現淡入的動畫

CSS代碼如下： @keyframes float { from { position: relative; margin-top:200px; opacity: 0; } to { position: relative; margin-top: 50px; opacity: 1; } }

接下來用JS判斷當前滾動的位置并加入動畫

window.onscroll = function() {//檢測鼠標滾輪距離頂部位置var top = document.documentElement.scrollTop || document.body.scrollTop;console.log(top);//頁面滾動時可以得到滾動的距離可以根據這個數值來決定何時給div綁定動畫//要設置到DIV剛顯示出來時給div添加動畫if(top > （box.offsetTop-box.offsetHeight）) { box.style.animation = "key 2s"//添加動畫 }}

總結

以上是生活随笔為你收集整理的实现滚到div时淡入效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。