學習筆記-JS30-Day13-Slide In on Scroll

今日重點：

滾動視窗，讓圖片產生飛進飛出的動態效果。

程式碼：github
線上看：Demo

學習筆記：

關鍵

1. 取得元素的控制權

2. 監聽元素

3. 放入判斷改變圖片CSS

取得元素的控制權

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

監聽元素

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

放入判斷改變圖片CSS

function handler(){
      imgAll.forEach( img =>{
        //條件一 
        let imgShow = img.offsetTop + img.height/2;
        let windowHeight = window.scrollY + window.innerHeight;
        let imgAppear = windowHeight > imgShow;

        //條件二
        let imgBottom = img.offsetTop + img.height;
        let imgOnWindow = imgBottom > window.scrollY;

        if( imgOnWindow && imgAppear ){
          img.classList.add('active');
          console.log('123')
        } else {
          img.classList.remove('active');
        } ;
      });
    }

提供我的github可以參考做法

參考資料

github:

• 13 — Slide in on Scroll
• 13 图片随屏幕滚动而滑入滑出的效果指南

hackmd筆記：Slide in on Scroll

鐵人賽文章：JS30-Day13-Slide in on Scroll

YT影片：深入淺出 Javascript30 快速導覽：Day 13：Slide in on Scroll