數位行銷

75款網頁設計特效工具讓你無所不能(上)

特效這兩年崛起非常之迅猛,幾乎是網頁設計領域最強大的設計趨勢之一。

無論是在設計師群還是在用戶當中,它的受歡迎程度都非常之高,大家都對它津津樂道。
從微妙的轉場動效到覆蓋整個頁面的大範圍動效,它幾乎無處不在。特效的運用讓網頁中的元素邏輯變化關係清晰地表述出來,還將影視化的體驗引入進來。
對於設計師而言,特效賦予了設計足夠的可能性。無論是純粹的裝飾,還是簡化介面,闡述邏輯,還是增加使用者體驗,特效都能幫到你。今天,我們要為你提供75個不同的特效設計工具,它們有的是外掛程式,有的是程式庫,合理的運用它們,能幫你搞定各式各樣的特效。

1. ANIMATE.CSS

是一個跨瀏覽器的特效程式庫,是許多基礎特效的解決方案。從經典的彈跳特效到獨特的扭曲特效,一應俱全。

1 animate css

 

2. MAGIC ANIMATIONS

Magic Animations 專注於為網頁帶來獨特的視覺效果。雖然其中涵蓋的類型不夠豐富,但是帶來的體驗足夠優秀。

2 magic animations

3. BOUNCE.JS

這是一個用來創造彈跳特效的程式庫,它的特效主要是通過CSS3和一些預設來實現的。你可以通過 npm ,bower 來安裝JS程式庫,簡單的複製生成的CSS3程式碼來應用特效。

3 bounce js

4. ANIJS

AnijS 讓你能夠通過 if、on、do、to 等簡單的命令更加直觀地處理特效。有趣的地方在於,它還能用來控制前面 Animate.css 來創造特效。

4 anij js

5. SNABBT.JS

Snabbt.js 在創造特效這件事上,一直是以輕量和極簡而著稱的。它只有5kb 的大小,但是它能搞定平移、旋轉、傾斜、縮放等常見的特效效果,非常高效。

5 snabbt js

6. KUTE.JS

Kute.js 是一個純粹的特效引擎,擁有出色的性能。它可以相容許多不同的瀏覽器,包括一些相對傳統的瀏覽器。它還具備許多外掛程式,提供有效的運行環境。

6 kute js

7. VELOCITY.JS

Velocity.js 也同樣是一個特效引擎,乍一看可能沒啥太過突出的地方,然而它囊括了絕大多數常見的特效,比如變形、迴圈、滾動等,它足夠快速,且不依賴 jQuery。

7-velocity-js

8. LAZY LINE PAINTER

你可以使用 Lazy Line Painter 輕鬆創建 SVG 路徑特效。你可以在AI中製作出SVG檔,上傳到轉換器中。後者會幫你將它處理成為特效,生成jQuery 檔。如有必要,你還可以編輯程式碼進行微調。

7-velocity-js

9. SVG.JS

SVG.js 為你提供一個更加直觀的編輯SVG動效的環境。它足夠小巧,語法也簡單,並且提供統一的API。

7-velocity-js

10. MOTION UI

Motion UI 和前面的工具都不一樣,它是借助SASS 來創建有趣的CSS特效。其中包含了一整套預定義的特效,可以運用到不同的HTML元件當中去。除了IE9,其他瀏覽器都可用。

10 motion ui
11. WAIT! ANIMATE

Wait! Animate讓你可以以更加輕鬆自如的方式來創造延時和等待的特效。通過調整控制台上的參數,你可以創造出更加自然的效果。

11 wait animate

12. DYNAMICS.JS

Dynamics.js 是一個JS程式庫,能為你提供9種標準的特效,你可以制定其中的持續時間、頻率、預期尺寸和強度等資料,創造出符合物理效果的特效。

12 dynamics js

13. CHOREOGRAPHER.JS

擁有了 Choreographer.js 之後你就不用再擔心搞不定複雜的特效了,這個JS程式庫能夠通過自訂參數實現對複雜特效的設計。

13 choreographer js

14. ANIME.JS

這是一款強大的使用JS開發的動效庫,支援 CSS,DOM,SVG,和JS對象。

14 anime
15. MO.JS

Mo.js 是一款完整的JS特效庫,目前它擁有一系列的預設參數,確保你能快速的上手使用。值得注意的是,Mo.JS 是模組化的,你可以輕鬆移除不必要的功能,確保容量合理和流暢運行。
15 motion

16. SEQUENCE.JS

Sequence.js 是一個CSS驅動下的特效框架,用來構建基於步驟的響應式的特效。

16 sequence js

17. SHIFTY

Shifty 是一款性能優異,速度夠快且足夠靈活的補間動畫引擎,它是公認的 GreenSock 替代方案。

17 shifty
18. IT’S TUESDAY

Tuesday 是一款獨立的特效庫,可以和其他的程式碼一起搭配使用,其中的特效大多以流暢和優雅著稱,淡入淡出,擴展,收縮效果均是如此。

18 it is tuesday
19. CSS ANIMATE

你可以使用 CSS Animate 作為測試和生成特效程式碼的遊樂場,任何常規特效都可以在這裡幫你測試,設置好名稱、類、特效屬性、框架屬性以及時間軸和標記之後,最終能夠生成你想要的程式碼和特效。

19 cssanimate
20. VIVUS.JS

VIVUS.JS 能夠給你帶來延時、同步和展現這三種類型的特效。而特效的核心還是借助SVG來實現。

20 vivus
21. BONSAI.JS

Bonsai.js 是一個用來做高級圖形處理的JS程式庫,它有著非常簡單易用的API和SVG渲染器。

21 bonsai js

22. GSAP BY GREENSOCK

GSAP 是一個強大的特效平臺,用來創造專業的特效。它囊括了許多專業的外掛程式和實用的工具。這些外掛程式都包含在了其中:BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, 等.

22 gsap

23. POPMOTION

Popmotion 是另外一款源自於 Greensock 的羽輕量級的特效引擎。它可以完全控制每一幀的效果,先進的補間技術和色彩混合功能讓它能夠應對複雜的特效設計。

23 popmtion

24. TWEEN.JS

TWEEN.JS 是目前最強大的特效補間引擎,其中的參數控制系統足夠完善,讓你擁有絕佳的特效解決方案。

24 tween js

25. HOVER.CSS

Hover.css: 這是一組使用CSS3實現的懸浮特效,它可以應用到按鈕、連結、LOGO、SVG、圖片等元素上。它還提供了CSS、Sass和Less的版本。

25 hover css

26. TRANSIT

Transit 的功能其實並不多,但是它涵蓋了完善的2D轉3D的特效的功能。

26 transit

27. ROCKET

Rocket 提供的是物體從一個點運動到另外一個點的特效解決方案,包括8個特殊的效果,讓你的特效足夠可愛有趣。

27 rocket

28. ANIMO.JS

Animo.js 是一款輕量級的動效處理工具,它還支持額外的外掛程式來實現倒計時、旋轉等不同樣式的特效,借助額外的支援函式庫,幫你實現預期的特效。

28 animo js

29. SHIFT.CSS

Shift.css 是一個用來構建自我調整元素特效的框架。

29 shift css

30. CSSHAKE

CSShake 中包含了11類不同的可控制特效屬性,包括方向(水準、上下),類型(固定、瘋狂),強度(強、弱)等等,讓你可以全方位控制特效的特徵。

30 shake

31. SAFFRON

如果你喜歡 mixin 來輕鬆控制特效,那麼Saffron 肯定會讓你愛不釋手。它是使用Sass來編寫,可以更方便地設置參數和變數。

31 saffron

32. CSSYNTH

CSSynth 是一個輕量級的特效編輯器,讓你可以更輕鬆地設置同步或者延遲效果,然後可以下載相應的CSS或者SCSS代碼。

32 cssynth

33. CEASER

Ceaser 是一款經過時間考驗的特效工具,能夠生成經典的動畫效果。

33 ceaser
34. MORF.JS

MORF.JS 中包含了超過40種預定義的動效,並且你可以根據自己的需要在它們基礎上進行自訂。

34 morf js

35. VOXEL.CSS

Voxel.css 是專門用來3D 渲染的工具,即使你是新手也能夠輕鬆掌握3D CSS樣式。

35 voxel css


原文地址:webdesignerdepot
原文作者:Nataly Birch
優設譯文:@陳子木

最新文章

原創、翻譯及轉貼的資訊都在這裡。

網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加Line好友
益盛科技

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

 

聯絡資訊

ring@des13.com

點此加我們LINE  @igodos 加line好友

406台中市北屯區文心路四段955號11號樓之1(需預約諮詢)

04-37072202 /  0919-413187 

thedes13 

 
點此加我們LINE
DMC Firewall is developed by Dean Marshall Consultancy Ltd