JavaScript 30 Day -- 12 圖片的滑入滑出

實現效果：

頁面中的文章有幾張配圖，隨着頁面上下滾動，圖片位置劃過圖片一半時，圖片從兩側滑入；圖片位置離開可見區域時，圖片向兩側滑出。、

關鍵點：

涉及控制圖片的 CSS 屬性：
    translateX 來控制左右移動
    scale 來控制縮放
涉及頁面尺寸的屬性：
    window.scrollY 文檔從頂部開始滾動過的像素值
    window.innerHeight viewport 部分的高度
    ele.height 元素的高度
    ele.offsetTop 當前元素頂部相對於其 offsetParent 元素的頂部的距離。
    debounce 的作用： 降低事件監聽的頻率，使用了 Lodash 中的 debounce 方法。

javascript

    function debounce(func, wait = 20, immediate = true) {
      var timeout;
      return function() {
        var context = this, args = arguments;
        var later = function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    }


    var sliderImages = document.querySelectorAll('.slide-in');
    function checkSlide(e){
      sliderImages.forEach(key =>{
        // console.log(key.height);
        var imgSize = (window.innerHeight + window.scrollY) - key.height/2;
        var imgWindow = key.height + key.offsetTop;
        if((imgSize > key.offsetTop) && (imgWindow > window.scrollY)){
          key.classList.add('active');
        }else{
          key.classList.remove('active');
        }
      });
      // console.log(sliderImages[0].offsetTop);
      // console.log(sliderImages[1].offsetTop);
      // console.log(e);
      // console.log(window.scrollY);
      // console.log(window.innerHeight);
    }
    // window.addEventListener('scroll',checkSlide);

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