iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 13
0

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篇中所需用到的技巧與方法,歡迎留言討論是否有更好的方法來完成今天的課題,感謝您的閱讀!!


上一篇
JS30-Day12-Key Sequence Detection
下一篇
JS30-Day14-JS Reference VS Copy
系列文
新手也能懂的JS3030

尚未有邦友留言

立即登入留言