文科少女學程式

今天要來用jQuery實作捲軸滑動後，圖片自動滑入的效果！

實作的大方向
1. 需要偵測捲軸滾到哪
2. 將圖片的預設位置設定在外側
3. 設定一個回到顯示位置的CSS，依照滾軸滑動的位置套用這個CSS

細部實作內容
1. 設定好HTML(我先大概設定一個簡單的樣板，美觀不重要，重點是功能)
詳細內容可參考連結 https://codepen.io/pinkymini/pen/QWEPQZx?editors=1010
2. 設定圖片的初始位置設
HTML的部分

CSS的部分
初始位置依照圖片放置的方向，往外移動30%

這樣設定後，圖片會被擺放到這樣的位置

另外也別忘記要先把圖片隱藏起來，這裡用的是opacity。
transition的部分則是為了讓圖片能有緩緩飛進的效果。

這樣設定後，就看不見圖片了，但是圖片實際上還是存在於HTML當中喔！

3. 監聽捲軸滾動
準備事件處理器
接著把所有圖片的部分都選取起來

因為圖片一共有三張，所以會用遍歷的方式去找到每張圖片的位置，
這邊也就是用jQuery的$.each下去對每張圖片進行處理。

再來遍歷裡面要做的事情是找到每張圖片的中間位置和現在捲軸滾到的位置
圖片的中間位置=image.offsetTop(圖片最上端距離網頁最上端的位置) + image.height/2(圖片的高度除以2)
捲軸滾動到的位置=window.scrollY(捲軸已經滾動的距離)+window.innerHeight(可視視窗的高)
可以查看下面圖片中黃框的部分~

當捲軸的位置到圖片中間時，要讓圖片顯示出來，所以在事件處理器裡面要加上一個條件判斷內容。
當捲軸位置大於圖片中間位置時，就加上一個讓圖片顯示的class，也就是綠框的部分。

設定讓圖片顯示的CSS
前面的事件處理器內容中，當捲軸滾動到圖片中間，會幫圖片加上一個active的class。
而這個class也就是會讓圖片顯示在正常位置的CSS內容，設定如下。


掛上事件監聽


4. 用debounce函式優化效能
因為監聽的事件式捲軸滾動事件scroll，所以也就是說每次在滾動捲軸時，
就會不斷地觸發事件處理器，這樣也就會造成效能遍差，
這時候用debounce函示就可以排除這樣的狀況。


5. 透過debounce執行事件處理器
改寫原本的掛上事件監聽的部分變成以下這樣

這樣就完成這次的實作內容了~

最後附上這次實作的codepen連結
https://codepen.io/pinkymini/pen/QWEPQZx?editors=0110

打完收工~掰餔