Hike News
Hike News

Scroll Activate 捲軸滾動的動態效果

JavaScript, 函式, jQuery, library

目的

為了讓網頁有吸引力，所以在捲軸滾動畫面時做到監聽捲軸和元素之間的距離，以及觸發的事件或效果。

觸發事件需要用要 JavaScript 或 jQuery 在每次滾動時都要檢查和每個元件的距離，為了不影響效能，在使用上還是要注意監聽的數量。

這裡要做的和之前寫的文章 Scrollspy 滾動監控 類似，但在前一篇寫的文章主要是以滑鼠滑到的區塊作出類似 提示當前滑到的元素名稱 的效果，現在要作的是監聽捲軸和新增動畫效果。

CSS + JavaScript

使用套件製作效果既方便又快速，但是要作 1、2 個效果而去下載套件，套件需要先載入到網頁，其實用不到這麼多功能、檔案也會變大，所以可以試試自已作效果。

主要是靠 JavaScript 在捲軸滾動時被觸發和新增、移除設計好的 CSS 動畫樣式。

在 CSS 的動畫樣式可參考 CSS 動畫- CSS | MDN

JavaScript 是使用事件監聽的 scroll 觸發執行

1
2
let el = document.body;
el.addEventListener("scroll", myScript);

或是改成在 HTML 加上 onscroll="myfunction()" 來執行函式也可以，但要注意 執行的區域 ，只有在加上 onscroll 元件內的捲軸才有作用，之外的捲軸是不會觸發的。

所以要監聽整個畫面的捲軸時，區域就要設定在 body

1
<body onscroll="myFunction()"></body>

再來就要判斷捲軸和元件是不是要達到要作動畫的條件，所以就要取得捲軸和元件的位置，這在 JavaScript 有提供可以取值也可以設定的方法

所以就可以作判斷條件

1
2
3
4
5
function Onscrollfnction() {
  let bodyBottom = window.scrollY + window.innerHeight; // 視窗最底
  let box = document.getElementById('content');
  (box.offsetTop < bodyBottom) ? console.log('See box') : console.log('Cant see') 
};

接下來只要再加上已經有動畫效果樣式的 class

1
document.getElementById("content").classList.add("active");

當往回滾動就移除

1
document.getElementById("content").classList.remove("active");

這就完成了一個動畫效果。

如果要作效果的元件很多的話，還是別一個一個刻了，可以參考下方的套件，只要套用就會有效果。

AOS 套件

https://michalsnik.github.io/aos/

這是當捲軸滾動時產生動畫的資料庫，只要在 HTML 要加上 data-aos 和要套用的動畫名稱，就會像官網內卡片所產生的效果，這一個套件很有趣的是向下滾動會產生動態效果，向上滾就會收回效果。

載入

可直接在官網內下載 Zip 檔，或是用指令下載

1
2
3
yarn add aos
npm install aos --save
bower install aos --save

也可以用 CDN

1
2
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

在 JavaScript 執行初始化

1
AOS.init();

在初始化時，也可以預先作 基本 / 全域 的效果設定

重整畫面

當畫面大小有變改時可作的重整，這會重新計算尺寸、位置、距離

1
AOS.refresh();

自訂 JS 事件

AOS 還提供了當元件滑入滑出時的事件監聽可用，這在要在執行時再加上其他的功能的其他活用

在 JS 加入

1
2
3
4
5
6
7
8
9
document.addEventListener('aos:in', ({ detail }) => {
  console.log('animated in', detail);
  // ...
});

document.addEventListener('aos:out', ({ detail }) => {
  console.log('animated out', detail);
  // ...
});

在要監聽的元件上加 data-aos-id

1
<div data-aos="fade-in" data-aos-id="super-duper"></div>

就可以取得元件執行的內容

自訂 CSS 樣式

基本的動畫效果不適合時，這就需要修改 CSS 的樣式，在 文件 中也有提供方法可以新增、修改，因為目前的效果就很夠使用了，所以就不多作研究，日後若有用到再來補充會使用到的例子。

直接在 HTML 套用效果

要在 HTML 加入要使用的效果，例如 fade-up 向上淡入

1
<div data-aos="fade-up"></div>

進場效果還有 FADE 淡出淡入、FLIP 翻轉、ZOOM 放大縮小，可以 參考文件 看看

  • 還可以作自訂效果

    • data-aos-duration 持續時間，1000 = 1 秒
    • data-aos-easing 動畫速度曲線
    • data-aos-offset 捲軸和元件上的差距，達到時執行效果
    • data-aos-anchor 當碰到錨點元件時執行
    • data-aos-delay 延遲執行時間
    • data-aos-anchor-placement 滾動到元件外框的 top 上、 bottom 下、 center 中央 時執行
      • 值 top-bottom 分別是指 元件的位置 - 畫面的位置 ，當 元件的位置 > 畫面的位置 時就會執行

  • 在 AOS - Github 也有提供範例，如果還是不清楚可以參考看看喔