Fullscreen HTML5 Background Video 是一個好用的 javascript 網頁背景影片幻燈片播放套件,本篇將說明使用方法。
Vegas Background SlideShow 是一個好用的全螢幕背景幻燈片播放套件,而且可以自訂的部分很多,更可以設定影片當作播放的項目。
youtube-background.js 是一個可以把 Youtube 影片設定成網頁上的背景播放影片的 jQuery 套件,簡單設定後就可以將指定的 YouTube 影片在頁面上的背景播放了。
YTPlayer 是一個好用的把 YouTube 當背景影片的 jQuery 套件,更可以設定影片的濾鏡效果。
Pageable 是一個好用的一頁式捲動(one page scroll) javascript library,說明一下使用方法。
Spline 是一個給網頁用的 3D 場景及互動元件設計工具,可以透過其提供的介面簡單的產出網頁的 3D 元素,之後透過匯出就可以把內容放在自己的網站了。
SortableJS 是一個簡單好用的網頁元素拖曳(drag and drop)及排序(sort)套件,可以參考本文安裝及設定套件內容。
Web Animation Course 是一個有著說明網頁動畫的原理,以及提供一些範例的網站,對動畫有興趣的朋友推薦去瀏覽一下了解原理,或者是吸收靈感。
onepageNav.js 就是可以用來簡單製作捲動與選單互動效果的套件,這隻是 jQuery 的,所以要先讀入 jQuery 後再讀取這隻 plugin。
Easing Functions Cheat Sheet 是一個收錄了許多 CSS 動畫效果的網站,可以預覽後,選擇喜歡的效果並複製 CSS 的語法即可。
CSS3 Animation Cheat Sheet 是一個收錄許多 CSS 動畫效果的網站,只要讀入其設計的 CSS 後,就可以依據給予的 class name 設定動畫效果。
之前跟大家介紹過 bodymovin 這個可以把 After Effect 的動畫轉出來給網頁用的外掛,而他們官方也有提供使用者分享各自製作的動畫的網站,可以到上面找找有沒有喜歡的動畫效果。
Jitter.video 是一個可以線上製作動態效果的網站,可直接匯入 Figma 檔案後再設計動畫效果,完成後可以直接匯出影片,方便與開發者溝通。