iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
3
自我挑戰組

前端之 " wow~原來是這樣啊 "系列 第 19

Day19 JS Scroll 實作學習

在網頁互動中,經常可見滾動觸發事件,今天來試試看吧

最近在一個專案中需要監聽網頁 Scroll 事件,用以觸發元素的移動。學習了JS Scroll 事件,今天來把這個事件整理記錄一下。我們先看效果(僅示意,非專案畫面)。

scroll

在此範例中,畫面上有兩個 section,分別爲粉色及藍色的。當畫面向下滾動到剩下一半的地球時,觸發向下移動;同理,當畫面向滾上動到剩下一半的地球時,觸發向上移動。在此需要監聽頁面滾動、獲取滾動資訊、計算觸發對應點、CSS 動畫設定,以及考慮網頁效能需要使用 debounce 函數。

在撰寫 JS 之前,可以先寫好 CSS 動畫,在相對應的圖片加上 transition: transform 2s; ,接著寫一個 class 是移動向下,如下:

.move{
 transform: translate(-270px,110vh);
}

transition 設定當 transform 有所變動時,就會觸發動畫效果,所以我們只需要添加一個向下移動的 transform 設定。在 class 添加 .move 就會向下,當我們希望它向上,就移除該 class。變動 transform 的值,就可以完成我們想要的效果。

接下來看 JS 程式碼,再逐一解釋。

const earthImg = document.querySelector(".moveicon")
function earthmove() {
  const moveToNextAt = (earthImg.offsetTop) + (earthImg.clientHeight / 2);
  if (window.scrollY > moveToNextAt) {
    earthImg.classList.add('move');
  } else {
    earthImg.classList.remove('move');
  }
}
window.addEventListener('scroll', debounce(earthmove, 5));

首先獲取我們的主角地球圖片放在變數earthImg裡面。接著新增一個方法 earthmove。

const moveToNextAt = (earthImg.offsetTop) + (earthImg.clientHeight / 2);

計算當畫面滾動向下時,要在什麼時候觸動動畫,計算完的結果存放在變數 moveToNextAt 裡面。計算方式爲圖片頂端到 body 最上方的距離(earthImg.offsetTop) ,加上圖片高度的一半(earthImg.clientHeight / 2)。

接下來是判斷觸發動畫。

if (window.scrollY > moveToNextAt) {
    earthImg.classList.add('move');
  } else {
    earthImg.classList.remove('move');
  }

如果目前已經滾動的垂直距離(window.scrollY )大於剛剛計算的觸發點(moveToNextAt),則添加 class move,觸發向下的動畫。反之當目前已經滾動的垂直距離 (window.scrollY )小於剛剛計算的觸發點(moveToNextAt),就移除向下的動畫,則圖片會往上移動。

window.addEventListener('scroll', debounce(earthmove, 5));

最後添加監聽事件,啓動它。這邊有個要注意的事情是我們在觸發的function 中,多套用了一層 debounce 方法,是因爲滾動頁面是一個連續觸發事件,但我們並不希望方法被不斷觸發,會產生效能問題,因此使用 debounce 做法,使事件在一定時間內只能夠被觸發一次。debounce 的寫法有很多種,選用一個喜歡的就可以囉,我用的是js30 中作者使用的方式,有興趣可以去看看第十三天。若不考慮效能問題,直接觸發動畫,也是可以達成效果的。

以上就是今天的小實作囉,試試看吧/images/emoticon/emoticon35.gif


上一篇
Day18 來一個 Google Pie Chart 吧
下一篇
Day20 練習使用簡單的 GET 方法接一個 open data
系列文
前端之 " wow~原來是這樣啊 "30

1 則留言

0
SunAllen
iT邦研究生 1 級 ‧ 2018-11-03 14:21:44

/images/emoticon/emoticon07.gif

Lai iT邦新手 5 級 ‧ 2018-11-03 22:29:21 檢舉

/images/emoticon/emoticon42.gif

我要留言

立即登入留言