數位行銷
網頁技術
特效這兩年崛起非常之迅猛,幾乎是網頁設計領域最強大的設計趨勢之一。
無論是在設計師群還是在用戶當中,它的受歡迎程度都非常之高,大家都對它津津樂道。
從微妙的轉場動效到覆蓋整個頁面的大範圍動效,它幾乎無處不在。特效的運用讓網頁中的元素邏輯變化關係清晰地表述出來,還將影視化的體驗引入進來。
對於設計師而言,特效賦予了設計足夠的可能性。無論是純粹的裝飾,還是簡化介面,闡述邏輯,還是增加使用者體驗,特效都能幫到你。今天,我們要為你提供75個不同的特效設計工具,它們有的是外掛程式,有的是程式庫,合理的運用它們,能幫你搞定各式各樣的特效。
1. ANIMATE.CSS
是一個跨瀏覽器的特效程式庫,是許多基礎特效的解決方案。從經典的彈跳特效到獨特的扭曲特效,一應俱全。
Magic Animations 專注於為網頁帶來獨特的視覺效果。雖然其中涵蓋的類型不夠豐富,但是帶來的體驗足夠優秀。
3. BOUNCE.JS
這是一個用來創造彈跳特效的程式庫,它的特效主要是通過CSS3和一些預設來實現的。你可以通過 npm ,bower 來安裝JS程式庫,簡單的複製生成的CSS3程式碼來應用特效。
4. ANIJS
AnijS 讓你能夠通過 if、on、do、to 等簡單的命令更加直觀地處理特效。有趣的地方在於,它還能用來控制前面 Animate.css 來創造特效。
5. SNABBT.JS
Snabbt.js 在創造特效這件事上,一直是以輕量和極簡而著稱的。它只有5kb 的大小,但是它能搞定平移、旋轉、傾斜、縮放等常見的特效效果,非常高效。
6. KUTE.JS
Kute.js 是一個純粹的特效引擎,擁有出色的性能。它可以相容許多不同的瀏覽器,包括一些相對傳統的瀏覽器。它還具備許多外掛程式,提供有效的運行環境。
7. VELOCITY.JS
Velocity.js 也同樣是一個特效引擎,乍一看可能沒啥太過突出的地方,然而它囊括了絕大多數常見的特效,比如變形、迴圈、滾動等,它足夠快速,且不依賴 jQuery。
你可以使用 Lazy Line Painter 輕鬆創建 SVG 路徑特效。你可以在AI中製作出SVG檔,上傳到轉換器中。後者會幫你將它處理成為特效,生成jQuery 檔。如有必要,你還可以編輯程式碼進行微調。
9. SVG.JS
SVG.js 為你提供一個更加直觀的編輯SVG動效的環境。它足夠小巧,語法也簡單,並且提供統一的API。
10. MOTION UI
Motion UI 和前面的工具都不一樣,它是借助SASS 來創建有趣的CSS特效。其中包含了一整套預定義的特效,可以運用到不同的HTML元件當中去。除了IE9,其他瀏覽器都可用。
11. WAIT! ANIMATE
Wait! Animate讓你可以以更加輕鬆自如的方式來創造延時和等待的特效。通過調整控制台上的參數,你可以創造出更加自然的效果。
12. DYNAMICS.JS
Dynamics.js 是一個JS程式庫,能為你提供9種標準的特效,你可以制定其中的持續時間、頻率、預期尺寸和強度等資料,創造出符合物理效果的特效。
13. CHOREOGRAPHER.JS
擁有了 Choreographer.js 之後你就不用再擔心搞不定複雜的特效了,這個JS程式庫能夠通過自訂參數實現對複雜特效的設計。
14. ANIME.JS
這是一款強大的使用JS開發的動效庫,支援 CSS,DOM,SVG,和JS對象。
15. MO.JS
Mo.js 是一款完整的JS特效庫,目前它擁有一系列的預設參數,確保你能快速的上手使用。值得注意的是,Mo.JS 是模組化的,你可以輕鬆移除不必要的功能,確保容量合理和流暢運行。
16. SEQUENCE.JS
Sequence.js 是一個CSS驅動下的特效框架,用來構建基於步驟的響應式的特效。
17. SHIFTY
Shifty 是一款性能優異,速度夠快且足夠靈活的補間動畫引擎,它是公認的 GreenSock 替代方案。
18. IT’S TUESDAY
Tuesday 是一款獨立的特效庫,可以和其他的程式碼一起搭配使用,其中的特效大多以流暢和優雅著稱,淡入淡出,擴展,收縮效果均是如此。
19. CSS ANIMATE
你可以使用 CSS Animate 作為測試和生成特效程式碼的遊樂場,任何常規特效都可以在這裡幫你測試,設置好名稱、類、特效屬性、框架屬性以及時間軸和標記之後,最終能夠生成你想要的程式碼和特效。
20. VIVUS.JS
VIVUS.JS 能夠給你帶來延時、同步和展現這三種類型的特效。而特效的核心還是借助SVG來實現。
21. BONSAI.JS
Bonsai.js 是一個用來做高級圖形處理的JS程式庫,它有著非常簡單易用的API和SVG渲染器。
22. GSAP BY GREENSOCK
GSAP 是一個強大的特效平臺,用來創造專業的特效。它囊括了許多專業的外掛程式和實用的工具。這些外掛程式都包含在了其中:BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, 等.
23. POPMOTION
Popmotion 是另外一款源自於 Greensock 的羽輕量級的特效引擎。它可以完全控制每一幀的效果,先進的補間技術和色彩混合功能讓它能夠應對複雜的特效設計。
24. TWEEN.JS
TWEEN.JS 是目前最強大的特效補間引擎,其中的參數控制系統足夠完善,讓你擁有絕佳的特效解決方案。
25. HOVER.CSS
Hover.css: 這是一組使用CSS3實現的懸浮特效,它可以應用到按鈕、連結、LOGO、SVG、圖片等元素上。它還提供了CSS、Sass和Less的版本。
26. TRANSIT
Transit 的功能其實並不多,但是它涵蓋了完善的2D轉3D的特效的功能。
27. ROCKET
Rocket 提供的是物體從一個點運動到另外一個點的特效解決方案,包括8個特殊的效果,讓你的特效足夠可愛有趣。
28. ANIMO.JS
Animo.js 是一款輕量級的動效處理工具,它還支持額外的外掛程式來實現倒計時、旋轉等不同樣式的特效,借助額外的支援函式庫,幫你實現預期的特效。
29. SHIFT.CSS
Shift.css 是一個用來構建自我調整元素特效的框架。
30. CSSHAKE
CSShake 中包含了11類不同的可控制特效屬性,包括方向(水準、上下),類型(固定、瘋狂),強度(強、弱)等等,讓你可以全方位控制特效的特徵。
31. SAFFRON
如果你喜歡 mixin 來輕鬆控制特效,那麼Saffron 肯定會讓你愛不釋手。它是使用Sass來編寫,可以更方便地設置參數和變數。
32. CSSYNTH
CSSynth 是一個輕量級的特效編輯器,讓你可以更輕鬆地設置同步或者延遲效果,然後可以下載相應的CSS或者SCSS代碼。
33. CEASER
Ceaser 是一款經過時間考驗的特效工具,能夠生成經典的動畫效果。
34. MORF.JS
MORF.JS 中包含了超過40種預定義的動效,並且你可以根據自己的需要在它們基礎上進行自訂。
35. VOXEL.CSS
Voxel.css 是專門用來3D 渲染的工具,即使你是新手也能夠輕鬆掌握3D CSS樣式。
原文地址:webdesignerdepot
原文作者:Nataly Birch
優設譯文:@陳子木