主題

實作一個當畫面滾動到圖片區域時圖片以動畫方式跑出

成果

完整程式碼
Demo效果

實作重點

學習 window 事件

Javascript

1. 先了解 window 事件(MDN)
   windowTop ：畫面最上面 = window.scrollY 、
   windowBottom：畫面最底部 = windowTop + window.innerHeight

2. 圖片樣式：圖片中加上 .active 時就會彈出

3. 取得所有圖片

   const sliderImages = document.querySelectorAll('.slide-in');
   

4. 使用 window 事件的 scroll 觸發 function ，可以 console 確認。

    window.addEventListener('scroll', scrollHandler);
   

5. 建立 callbackscrollHandler

    function scrollHandler() {} 
   

6. 計算照片彈入彈出時間點：

   1. 計算圖片的一半位置

      const imgMiddle = sliderImage.offsetTop + sliderImage.height / 2;
      

   2. 當圖片的一半小於畫面底部 和 圖片的一半大於畫面頂部時 就彈出圖片

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

7. 加入debounce : 加入以後圖片會比較慢彈入(20毫秒不做事就彈入)。

   function debounce(func, wait = 20, immediate = true) {
     var timeout;
     return function () {
       var context = this,
         args = arguments;
       var later = function () {
         timeout = null;
         func.apply(context, args);
       };
       if (timeout) return;
       clearTimeout(timeout);
       timeout = setTimeout(later, wait);
       if (immediate) func.apply(context, args);
     };
   }
   
   window.addEventListener('scroll', debounce(scrollHandler));
   

額外知識

window.scroll

• window.scrollTo() ：移動至，畫面上(x, y)軸的距離。
• window scroll 是一個連續觸發的事件，相對比較耗效能。

debounce 防抖動

• debounce 是針對連續觸發事件，希望過濾它把次數降低，大部分會有幾個參數 func ：要觸發的function 、 wait : 等待多久時間、immediate 立即觸發。
• 範例中debounce 是一種閉包的寫法：封閉的包裝，內層函式可以取得外層函式作用域內的變數。
• 範例中debounce function 裡 apply
  • apply ：傳參數限定 2 筆，第二筆之後用陣列包起來，可以對應 argument 。
  • call 有點像apply只是傳參數不限定筆數
• debounce 和 throttle 差別 文章
  • debounce 計時器重啟時間
  • throttle 控制計時器執行完前不做任何事，執行完後在執行一次計時器