JS30-Day13

在今天的題目當中，我們將學習如何讓畫面中的圖片，在滾動頁面的同時，產生進入、離開的效果。
從作者給的範例中，我們可以看到當圖片往上出現在畫面中時，此時圖片會慢慢浮現並從旁邊滑入。而當繼續往上離開畫面時，圖片會慢慢消失並滑出原本的位置。
實作範例

從前面的章節中，我們已經知道透過增加CSS中的2D transform以及transition property可以做出這樣的效果。但我們如何在圖片滾動至指定位置時，觸發我們想要的效果呢？

Scroll(捲動)

Scroll這個event，在指定元素捲動時會被觸發。而其中我們可以透過以下方法來取得目前捲動的距離：

//Window
window.scrollX;
window.scrollY;
//Element
element.scrollTop;
element.scrollLeft;

InnerHeight & OuterHeight

接下來，我們要認識window的innerHeight與outerHeight。InnerHeight指的是單純畫面的高度，而outerHeight指的是包含瀏覽器的介面高度：

了解這兩個屬性之後，我們就可以得知畫面捲動時底端的Y軸位置，便是Y軸捲動的量加上畫面的高度：

const currentPosition = window.scrollY + window.innerHeight;

Element.offsetTop

透過Offset這個屬性，我們可以得知該元素在父元素中的位置為何，這邊有從網站(https://goo.gl/kq6k6a)找到一個圖片，可以讓offset這個屬性更好理解：
從圖片中各個元素到由內到外的分佈來解析，p element的offsetTop與offsetLeft分別是距離其父元素div element上面以及左邊的距離。而div element的offsetTop與offsetLeft的值則是與其父元素body的距離。

而這次的題目當中，我們的圖片元素外圍只有一層父元素，因此我們可以直接取用：

//子元素在父元素上的水平位置
element.offsetLeft
//子元素在父元素上的垂直位置
element.offsetTop

Image功能觸發時的位置

接下來就是給定圖片顯示時的位置：
第一個為圖片向上移動時，進入畫面顯示當下的位置，因此第一個條件位置，即為圖片的offsetTop加上1/2的圖片高度。而為了方便看出效果，在這裡我們將條件改為1/4圖片高度。
第二個條件為圖片往上移動時，離開畫面消失時的位置，此時的位置即為圖片底端的位置，因此為圖片offsetTop加上圖片高度的總和，而這邊也為了方便看出效果，我們將條件改為3/4的圖片高度：
條件一： 圖片進入畫面顯示時的位置：

const imageShowPosition = image.offsetTop + image.height/4;

條件二： 圖片離開畫面消失時的位置：

const imageBottom = image.offsetTop + image.height*3/4;

Image特效的觸發條件

圖片出現在畫面上的條件，必須同時滿足以下兩點：

1. 當目前畫面的底端，在圖片進入畫面顯示的位置下面時，圖片就要被顯示。而畫面底端的位置，即為我們前面所給的變數。
2. 當目前畫面的頂端，未超過圖片離開畫面消失時的位置，圖片就要被保留在畫面中。而畫面的頂端位置，即為目前頁面所捲動的量。

綜合以上兩點，我們可以寫出我們的判斷式如下：

const imageAppear = currentPosition > imageShowPosition;
const imageOnWindow = window.scrollY <imageBottom;

當window捲動時的位置，符合以上兩個條件時，圖片就會被顯示出來。

組合成Code

剩下就是將window監聽scroll這個事件，並讓每個image元素在符合條件時就加上顯示圖片的class，或該消失時就移除原本加上的class，藉此來達到CSS屬性的轉換，做出浮現與消失的視覺效果。
將以上的內容組合起來，我們可以得到Code內容如下：

//window監聽scroll事件：
window.addEventListener('scroll', checkImage);
//選取所有的image元素：
const allImage = document.querySelectorAll('img');

function checkImage (e) {
    //將每個image元素都加上判斷式：
    allImage.forEach(function(image){
        //條件一：
        const currentPosition = window.scrollY + window.innerHeight;
        const imageShowPosition = image.offsetTop + image.height/4;
        const imageAppear = currentPosition > imageShowPosition;
        //條件二：
        const imageBottom = image.offsetTop + image.height*3/4;
        const imageOnWindow = window.scrollY < imageBottom;
        
        if(imageOnWindow && imageAppear) {
        //符合出現條件，加上active此class
          image.classList.add('active');
        } else {
        //不符合出現條件，移除active此class
          image.classList.remove('active');
        };
    });
};

完成之後，我們便能看到當圖片冒出在畫面上1/4時，會從兩旁浮現並滑入畫面中。而當圖片快要離開至剩下3/4時，便會逐漸消失並滑出畫面。

以上的內容，為JS30第13篇中所需用到的技巧與方法，歡迎留言討論是否有更好的方法來完成今天的課題，感謝您的閱讀！！