iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 18
1
Modern Web

實作經典 JavaScript 30系列 第 18

Day 18 : 為網頁增加圖片動畫效果

WES BOS系列影片
Alex快速導讀系列影片

今天要為靜態的文章,
添加一些圖片進場的動畫效果
練習抓取螢幕與圖片的長度,
進而控制圖片的進場時間。

1.先抓出需要做互動效果的圖片們

let sliderImages = document.querySelectorAll('img')

2.設置監聽器
今天用到scroll事件,scroll時會觸發checkSide函式

window.addEventListener('scroll', checkSide)

3.撰寫checkSide函式
我們的目標是要讓圖片進入視窗一半時,讓圖片產生進場效果
需要知道三個定位
視窗的最頂部位置- windowTop
視窗的最底部位置- windowBottom
該圖片的一半高度位於視窗的位置- imgMiddle

function checkSlide() {
  const windowTop = window.scrollY
  const windowBottom =  windowTop + window.innerHeight
  sliderImages.forEach(sliderImage => {
    const imgMiddle = sliderImage.offsetTop + sliderImage.height / 2;
  });
}

接下來作判斷
如果
該圖片的一半高度位於視窗的位置 > 視窗的最底部位置

該圖片的一半高度位於視窗的位置 < 視窗的最頂部位置
才加上 active 樣式
否則就
取消 active 樣式

if (imgMiddle < windowBottom && imgMiddle > windowTop) {
  sliderImage.classList.add("active");
} else {
  sliderImage.classList.remove("active");
}

4.加入debounce,使scroll事件延遲觸發
關於debounce請參考
網頁 DOM 事件的效能優化:Debounce 和 Throttle
這邊不再深究,或者有興趣也可以聽聽Alex老師的講解,會有更深入的理解

window.addEventListener('scroll', debounce(checkSlide));

今天的小動態製作完成
給自己鼓勵鼓勵~~
明天見。

完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30


上一篇
Day17: 為網站設計一個彩蛋
下一篇
Day19: JS中引用與複製的差異(一)
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言