活動網頁實用套件

發表於 | 分類於 | |

活動網頁和一般網頁差在哪裡呢?
答案是 登登登登登
許多炫炮動畫

為了製作炫砲的動畫
開發者需要什麼製作工具呢
底下就列出幾種常見的套件給大家做為參考：

  • animate.css
  • aos.js
  • swiper.js
  • remodal.js
  • parallax.js

animate.css

這是家喻戶曉的 CSS 動畫庫
也是我最喜歡的動畫庫之一
裡面提供了很多基本的動畫效果
像是 fadeIn, fadeOut 等等
使用方法也非常簡單
只要引入套件後
在想要使用的元素上加上對應的 class 就可以了

1
<h1 class="animate__animated animate__bounce">An animated element</h1>

除此之外還可以指定動畫播放得快慢與重複次數

Class nameDefault speed time
animate__slow2s
animate__slower3s
animate__fast800ms
animate__faster500ms
Class NameDefault iteration count
animate__repeat-11
animate__repeat-22
animate__repeat-33
animate__infiniteinfinite

aos.js

aos.js也是用來呈現css動畫效果
不過更讚的是他能夠搭配畫面滾動來呈現效果
使用方法也很簡單
也是先引入庫
在想要使用其效果的元素上加上data-aos屬性即可

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

swiper.js

一款專注於幻燈片效果的套件
提供了多種很棒的滑塊效果
另外也可以用此套件作出全屏滾動的效果
如果有特別需求是可以用來替代FullPage

註：FullPage is an Open Source application licensed under a GPLv3 license

底下是官網提供的代碼範例：

1
2
3
4
5
6
<swiper-container>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide ...</swiper-slide>
</swiper-container>

remodal.js

模態框幾乎在每個網站都會出現
主要是用來提供基本的互動效果與單獨的資訊內容

底下是官網提供的基礎代碼：

1
2
3
4
5
6
7
8
9
10
<div class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" class="remodal-close"></button>
  <h1>Remodal</h1>
  <p>
    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

如要呼叫出這個modal有兩種方式如下：

1
<a href="#modal">Call the modal with data-remodal-id="modal"</a>
1
<a data-remodal-target="modal">Call the modal with data-remodal-id="modal"</a>

第一種方式我特別喜歡也特別實用
只需要在網址列上使用hash的方式就可以直接呼叫出modal了

parallax.js

一種視差引擎

維基百科：指在不同位置觀察遠近兩物體時，它們間發生相對位置變化的現象

它可以用來製作佈景效果
讓網站的Banner提供有趣的互動
會因會鼠標在畫面上移動
讓佈景跟著一起移動

底下為官網提供的代碼範例：

1
2
3
4
<div id="scene">
  <div data-depth="0.2">My first Layer!</div>
  <div data-depth="0.6">My second Layer!</div>
</div>
1
2
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

註：data-depth屬性可以用來調控視差的幅度

本文作者： David Huang
本文地址： https://davidblog.github.io/2023/07/24/活動網頁實用套件/

0%