10種免費網頁動畫效果懶人包

動效設計是2018年的熱門趨勢之一。

當然,創造動效並沒有必要從0開始,有大把的設計項目可以供你快速上手,納入到設計項目當中去。

如果你仔細找找的話,會發現許多有趣的用來構建UI動效的工具,而這些素材和工具正在成為越來越多設計項目中不可或缺的催化劑。

必須承認,這些代碼生成器和動畫工具能設計師和前端事半功倍。

今天的文章,我們將會推薦10個免費網頁動效庫,幫你設計加速。

1. GSAP

GSAP 可能目前最炫酷的免費動畫庫之一了。它運行於純粹的 JavaScript 之上,是目前最強健的動畫資源庫之一。

它符合 HTML5 的規範,並且和幾乎所有的現代瀏覽器都能良好的協同,可以SVG、畫布元素甚至 jQuery 對象良好地協同,諸如 EaselJS 這樣的庫也可以和 GSAP 聯動。

如果你需要一個強大的網頁動畫庫的話,GSAP絕對值得一看。

2. Anime.js

當我第一次看到Anime.js 這個庫的時候,徹底被它迷住了。這玩意非常強大,功能並不僅限於UI/UX動畫的製作。

你可以借助 Anime.js 將動畫加持在LOGO、按鈕、圖像等各種各樣的元素上。它支持各種常見的觸發機制,比如點擊、懸停、滑動,你可以借助它定義一系列的動畫。

3. Wicked CSS

Wicked CSS 是一個相對更新一些的動效庫,它主要是基於CSS代碼的。Wicked CSS 借助 CSS3的特性,提供了一些堪稱不可思議的特效。

在它的首頁上,你會看到許多實時演示,你可以通過這些範例學會如何讓對象進行旋轉、翻轉、划入等不同類型的動畫效果。

有些動畫效果很簡單,但是它同樣可以實現許多複雜而有趣的動畫,這也是Wicked CSS 有意思的地方。

4. Animate CSS

也許 Animate.CSS 才是你想要的最終的網頁動效解決方案。這個開源代碼庫是幾年前發布的,但是時至今日它依然是最有用的動效代碼庫。

開發者 Daniel Eden 是這個項目的發起者,他以最簡化的方式在網頁上發布自定義的 CSS3動畫,通過半年多時間的積累,構建出了一個完整的動畫庫,並且幾乎可以應對絕大多數的項目。

項目主頁上有大量的演示,GitHub上還有許多很棒的文檔供你參考。

5. Tuesday

Tuesday 所提供的動畫最令人著迷的地方,是其中動畫都非常的簡單、有用。借助這個庫,你可以有效的控制頁面中元素的出現和消失的方式。

這些動畫並不是那種炫酷屌炸天的,相反它們是非常微妙的,真正從美學和用戶體驗的層面提升整個頁面的設計。

Tuesday 是純粹的CSS代碼,幾乎可以和任何網站無縫地銜接起來。

6. CSShake

坦率的講,我從來沒有見過比 CSShake 更加奇怪或者有趣的 CSS庫了。它所帶來的動畫效果非常的瘋狂、獨特,它並不一定適合每個網站。

換句話來說,就是 CSShake 所提供的動效其實是獨一無二的,這也是為什麼它會存在於這個列表當中。

7. Mo.js

通過細節仔細對比了諸多的 JavaScript 庫之後,不得不說 Mo.js 是最好的動效庫之一。Mo.JS 非常的龐大,而且它是完全為UI/UX設計而生的動效庫。

關於 Mo.js 有大量的文檔和教程,它的代碼操作並不複雜,了解之後就可以輕鬆掌握。

它有著許多令人驚嘆的功能,無論是導航欄,還是LOGO或者其他複雜的元素,它都能夠將他們合理的動畫化。

8. Animate Plus

Animate Plus 是一個輕量級的動效庫,它只有2KB,但是它有著自定義 JavaScript 動畫所需的全部基本功能。

使用npm你可以輕鬆地將 Animate Plus 安裝好,你只需要按照Github 上的代碼進行設置即可。其中所包含的絕大多數都是基本的Demo,所以你不會碰到複雜的問題,不過通過Github,你會找到所有你需要的選項和方法。

9. Bounce.js

只需要點擊幾下,你就可以借助Bounce.js創造出強大的CSS3 和 JS動畫了。

在主頁上,你會找到一個模塊化的自定義動畫生成器,通過這種方式,Bounce.js 會幫你將特定的功能添加到你的頁面上,無需添加額外的代碼。

和其他的同類工具不同的地方在於,它不僅僅是一個庫,而是有這用戶可以直接操作的實際功能,它帶有一個完整的網頁構建器。Bounce.js 是為數不多的可以直接在瀏覽器中進行設計和設置的動畫庫之一。

10. Magic

Magic 可能是最有趣的動效庫之一。它集合了許多基於CSS3的動畫效果,並且帶有許多在別的地方根本找不到的自定義樣式。這是一個非常大的CSS3代碼庫合集,你也會在這裡學會許多巧妙的動畫設計技巧。


 

【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛


 

給你最好的網頁設計Gogoshark


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化