今日任務: 往下滾動進到某位置時，圖片滑入，再滾動離開時，圖片滑出

CSS 部分

使用float排版，translateX(-30%)先將圖片移到外面，並將opacity透明度設為0
使用JS加上active就可營造圖片滑入效果

 .slide-left {
     float: left;
     margin-right: 20px;
 }

 .slide-right {
     float: right;
     margin-left: 20px;
 }

 .slide-in {
     width: 300px;
     opacity: 0;
     transition: all 0.5s;
 }

 .slide-left.slide-in {
     transform: translateX(-30%) scale(0.95);
 }

 .slide-right.slide-in {
     transform: translateX(30%) scale(0.95);
 }

 .slide-in.active {
     opacity: 1;
     transform: translateX(0%) scale(1);
 }

Js 部分

偵測視窗滾動

window.addEventListener('scroll', slideCheck);

function slideCheck(e) {
    console.count(e);
}

scoll會執行太多次，導致效能不好

作者有提供debounce function，讓他在某段時間以內(預設20毫秒)只執行一次

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);
  };
}

再加入到我們的監聽函式內(30為30毫秒執行一次的意思)

window.addEventListener('scroll', debounce(slideCheck, 30));

捲到圖片一半高的位置的時候圖片進來

window.scrollY: 從頂部開始捲軸已捲動的長度，別名window.pageYOffset
window.innerHeight 視窗高度
image.height 圖片高度

offsetTop是元素本身相對於offsetParent的垂直距離。
offsetParent是與元素最近的，有被定位(position不等於static)的父層
這邊的image.offsetTop = 到body的垂直距離

所以捲到圖片一半高的位置為image.offsetTop + image.height/2

當視窗捲到圖片一半高的位置或以上:
window.scrollY + window.innerHeight >= image.offsetTop + image.height/2;
的時候圖片會滑入

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

function slideCheck() {
    images.forEach((image) => {
        //圖片一半高的位置
        const slideInAt = image.offsetTop + image.height / 2;
        const isShown = window.scrollY + window.innerHeight >= slideInAt;
        if (isShown) {
            image.classList.add('active');
        }
    });
}

視窗離開的時候圖片要滑出

當視窗捲到離開圖片:
window.scrollY >= image.offsetTop + image.height
的時候圖片出去

如果(圖片一半高的位置)且(沒有捲到離開圖片)，讓圖片滑入，否則就滑出

function slideCheck() {
   images.forEach((image) => {
       //圖片一半高的位置
       const imgHalfAt = image.offsetTop + image.height / 2;
       const slideIn = window.scrollY + window.innerHeight >= imgHalfAt;
       //視窗捲到離開圖片
       const slideOut = window.scrollY >= image.offsetTop + image.height;
       
       if (slideIn && !slideOut) {
           image.classList.add('active');
       } else {
           image.classList.remove('active');
       }
   });
}

今日學習到的:

• 偵測視窗滾動window.addEventListener('scroll', function)
• scoll會執行太多次，導致效能不好，可以使用debounce function在某段時間以內只執行一次
• window.scrollY: 從頂部開始捲軸已捲動的長度，別名window.pageYOffset
• window.innerHeight 視窗高度
• image.height 圖片高度
• offsetTop是元素本身相對於offsetParent的垂直距離。
• offsetParent是與元素最近的，有被定位(position不等於static)的父層

效果連結:連結

參考連結:
MDN: window.scrollY
什麼是 clientHeight, clientWidth, offSetHeight, offsetWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft