Day26 不要躲在下面動! Animate On Scroll 自己做

calendarOct 10, 2023 · 3 分鐘長 · HTML CSS JS  ·
分享到: linkedincopy

我們都知道 CSS 動畫可以用 @keyframes 來做，但是他們都是馬上就觸發的。就算元素還沒有出現在畫面上，動畫也已經開始了。

如果要做出滾動到某個位置才觸發的動畫，就需要用到 JavaScript 來偵測滾動位置，然後再加上 CSS 動畫。沒錯，JavaScript 回來了。

原理

我們要做的是當元素出現在畫面上時，才觸發動畫。所以我們要偵測元素是否出現在畫面上。

我們可以用 getBoundingClientRect() 來取得元素相對於螢幕的位置，然後再用 window.innerHeight 來取得畫面的高度，就可以知道元素是否出現在畫面上了。

這裡是一個我做的範例。你可以看到當元素的上方超出畫面時top就會變負值。當元素的下方超出畫面時bottom的值會大於螢幕高度。那麼我們只需要有任何一部分有顯示在畫面上就可以觸發動畫了。

https://codepen.io/edit-mr/pen/ExGrxjX

getBoundingClientRect()

為甚麼不要等整個元素顯示出來在觸發動畫?
因為如果元素很長，可能到半個畫面都空白之後他才出現會很奇怪。所以我們只要有任何一部分有顯示在畫面上就可以觸發動畫了，這樣滾動起來會比較順暢。
如果你想要的話可以自己改成等整個元素顯示出來再觸發動畫，或是設置一些延遲時間以及增加動畫長度。後者我比較推薦。

實作

先打點簡單的內容。我們幫需要動畫的內容加上 aos 這個 class。這樣我們只要偵測這些元素是否出現在畫面上。如果有的話就加上 ed 這個 class。這樣我們就可以用 CSS 來做動畫了。

叫做 ed 是因為英文過去式常常加上 ed，想說蠻直覺野蠻短的。如果你有更好的主意也可以改成其他名字。

簡單的版面

 1<h1 class="aos">Animate On Scroll</h1>
 2<p class="aos">
 3  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, mollitia magni nemo eius obcaecati aliquam ex nisi maiores. Autem hic illo quas amet ipsam. Eos tempore repellat sint illum tenetur!
 4</p>
 5<h2 class="aos">Scroll</h2>
 6<div></div>
 7<div class="aos"></div>
 8<div class="aos"></div>
 9<div class="aos"></div>
10<div class="aos"></div>

 1body {
 2  max-width: 600px;
 3  margin: 0 auto;
 4  font-size: 2em;
 5}
 6h2 {
 7  font-size: 2em;
 8}
 9div {
10  height: 5em;
11  background: lightblue;
12  margin: 1em;
13}

好的動畫我先簡單做一個淡入的動畫。平常隱藏起來，當加上 ed 這個 class 時就顯示出來。

1.aos {
2  opacity: 0;
3  transition: opacity 1s;
4}
5
6.aos.ed {
7  opacity: 1;
8}

加上 JavaScript ，在頁面滾動時偵測每個有 .aos 的元素是否出現在畫面上。如果有的話就加上 ed 這個 class，沒有的話就回收。

 1function isElementInViewport(el) {
 2  const rect = el.getBoundingClientRect();
 3  return rect.bottom < 0 || rect.top > window.innerHeight;
 4}
 5
 6function addClassToVisibleElements() {
 7  var aosElements = document.querySelectorAll(".aos");
 8  aosElements.forEach(function (aosElement) {
 9    if (!isElementInViewport(aosElement)) aosElement.classList.add("ed");
10    else aosElement.classList.remove("ed");
11  });
12}
13
14document.addEventListener("scroll", addClassToVisibleElements);
15addClassToVisibleElements();

淡入動畫

ok 成功，我們來多做幾個更浮誇的動畫。

盡情發揮

我希望文字出來的時候可以有一點浮出水面的感覺。套用這個 class 的元素會先隱藏起來，當加上 ed 這個 class 時就會從下方滑出來。

1.slideIn {
2  transform: translateY(1em);
3}
4.slideIn.ed {
5  transform: translateY(0em);
6}

再來做一個從螢幕左邊滑近來的動畫。

1.slideInLeft {
2  transform: translateX(-100vw);
3}
4.slideInLeft.ed {
5  transform: translateX(0);
6}

最後來示範一個 @keyframes 的動畫，我們讓他放大縮小好了。因為它不需要漸入所以把原本的 opacity 拿掉了。蓋掉

 1.zoom {
 2  opacity: 1;
 3}
 4.zoom.ed {
 5  animation: zoom 1.5s forwards linear;
 6}
 7@keyframes zoom {
 8  0% {
 9    scale: 1;
10  }
11  25% {
12    scale: 1.5;
13  }
14  50% {
15    scale: 1;
16  }
17  75% {
18    scale: 1.25;
19  }
20  100% {
21    scale: 1;
22  }
23}

好啦成果如下，你可以試著滾動一下頁面看看。今天這幾行程式碼就一次取代了 Animate.css、WOW.js、AOS、ScrollReveal 這些函式庫，而且還有更簡單更高的自訂性。

https://codepen.io/edit-mr/pen/rNoPBZe

所有效果

 1<h1 class="aos slideIn">Animate On Scroll</h1>
 2<p class="aos slideIn">
 3  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, mollitia magni nemo eius obcaecati aliquam ex nisi maiores. Autem hic illo quas amet ipsam. Eos tempore repellat sint illum tenetur!
 4</p>
 5<h2 class="aos slideIn">Scroll</h2>
 6<div class="aos"></div>
 7<div class="aos"></div>
 8<div class="aos slideInLeft"></div>
 9<div class="aos zoom"></div>
10<div class="aos slideIn"></div>

 1body {
 2  max-width: 600px;
 3  margin: 0 auto;
 4  font-size: 2em;
 5}
 6h2 {
 7  font-size: 2em;
 8}
 9
10div {
11  height: 5em;
12  background: lightblue;
13  margin: 1em;
14}
15
16.aos {
17  opacity: 0;
18  transition: all 1s;
19}
20
21.aos.ed {
22  opacity: 1;
23}
24
25.slideIn {
26  transform: translateY(1em);
27}
28.slideIn.ed {
29  transform: translateY(0em);
30}
31
32.slideInLeft {
33  transform: translateX(-100vw);
34}
35.slideInLeft.ed {
36  transform: translateX(0);
37}
38
39.zoom {
40  opacity: 1;
41}
42.zoom.ed {
43  animation: zoom 1.5s forwards linear;
44}
45@keyframes zoom {
46  0% {
47    scale: 1;
48  }
49  25% {
50    scale: 1.5;
51  }
52  50% {
53    scale: 1;
54  }
55  75% {
56    scale: 1.25;
57  }
58  100% {
59    scale: 1;
60  }
61}

 1function isElementInViewport(el) {
 2  const rect = el.getBoundingClientRect();
 3  return rect.bottom < 0 || rect.top > window.innerHeight;
 4}
 5
 6function addClassToVisibleElements() {
 7  var aosElements = document.querySelectorAll(".aos");
 8  aosElements.forEach(function (aosElement) {
 9    if (!isElementInViewport(aosElement)) aosElement.classList.add("ed");
10    else aosElement.classList.remove("ed");
11  });
12}
13
14document.addEventListener("scroll", addClassToVisibleElements);
15addClassToVisibleElements();

以上就是我今天的分享，歡迎在 Instagram 和 Google 新聞追蹤毛哥EM資訊密技，也歡迎訂閱我新開的YouTube頻道：網棧。

我是毛哥EM，讓我們明天再見。

Posts in this Series