
主題
這篇介紹當滾動視窗到定點時動畫滑入圖片的效果,
而我在這裡替圖片增加了簡易的lazy load效果。
步驟
Step1. 基礎設定
作者已經在所有的圖片中加入了待會會用到的class :
- align-right / align-left : 滑入效果用(左/右)
- slide-in : JavaScript抓取用
並已經將相關的動畫滑入效果寫好。
Step2. 建立觸發條件,並監聽滾動事件
目的是使滾動視窗到定點時顯示效果,
所以要監聽的是整個視窗,用window
,事件選用scroll
,
但是如果單純使用scroll
來操作的話,每次的畫面滾動都會有大量事件被觸發,
會對效能上造成影響,所以作者多寫了一個debounce
來使觸發間隔為20毫秒以上:
所以監聽事件就會寫成window.addEventListener('scroll', debounce(checkSlide));
。
Step3. 設定觸發後的事件內容
在一開始先取得所有.slide-in
的圖片元素,使用querySelectorAll
,
接著編寫每次scroll
處發的checkSlide
function:
探索
學會了抓取視窗高度並當滾動至對應位置時載入/移除動畫效果,
就想來試試看增加一個功能,當到對應位置時,才去做圖片的載入及動畫效果,
就是lazyload
的很簡易版應用,套用在這個練習上。
首先先把每個圖片改為用data-imglink
來放圖片連結,像是這樣
接著來修改觸發的事件內容,因為原本的寫法只要重新讀到圖片1/2位置就會觸發,
我要做的只要第一次觸發效果就好,且是在讀取圖片頂端時觸發,
所以修改如下,新增的用備註註明:
JavaScript語法備註
Window.scrollY
目前瀏覽器視窗已滾動的Y軸(垂直位置)
Window.innerHeight
目前瀏覽器視窗的高度
HTMLElement.offsetTop
返回指定元素相對於有父元素(offsetParent)
中的頂端位置,
以此練習來說,sliderImage
的父元素就是window
。
HTMLElement.dataset
透過dataset
可以取回在HTML中設置的data-*
內容,
注意使用dataset
時property不用再將加上data-
開頭,例如:
|
|