17 個實用的圖像特效庫

做者：lindelof
譯者：前端小智
來源:github

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

1.imagehover

地址：https://github.com/ciar4n/imagehover.css

imagehover.css- 純CSS3鼠標滑過圖片效果動畫庫，44種鼠標滑過效果

2. ImageTiltEffect

地址：https://github.com/codrops/ImageTiltEffect

TiltEffect是一款讓圖像跟隨鼠標產生微妙立體傾斜效果的插件，使其有層次感和深度感。

3.Magnifier.js

地址：https://github.com/mark-rolich/Magnifier.js

Magnifier 是一款實用純js製做的圖片放大鏡插件。它有如下一些特定：

• 可使用鼠標滾輪放大縮小圖片。
• 能夠經過js或data屬性來設置選項。
• 一次調用能夠附加多張圖片。
• 用戶能夠自定義鼠標進入、離開、移動事件。
• 加載大圖片時能夠顯現等待文本。

4.gl-react-image-effects

地址：https://github.com/gre/gl-react-image-effects

通用的withReact示例應用程序與 Web。iOS和Android實現一塊兒運行一個代碼庫( 一些特定的代碼被設計成在平臺上建立不一樣的UI )。

5.StickyImageEffect

受ultanoir網站啓發的幻燈片顯示，具備粘性圖像效果。

地址：https://github.com/Anemolo/StickyImageEffect

6.HeatDistortionEffect

WebGL熱變形效果全屏背景。

地址：https://github.com/lbebber/HeatDistortionEffect

7.ImageDraggingEffects

使用各類技術爲圖像設置的一組有趣的拖動效果。

地址:https://github.com/codrops/ImageDraggingEffects

8.jQuery.BgSwitcher

jQuery.BgSwitcher實現背景圖像切換效果。

地址:https://github.com/rewish/jquery-bgswitcher

9.FullImageReveal

一個完整的圖像顯示精美的縮略圖滑動效果。

地址:https://github.com/codrops/FullImageReveal

10.diaporama

Diaporama是一種圖像/視頻/內容幻燈片引擎，提供高質量的動畫效果，包括Kenburns效果和GLSL Transitions。

地址:https://github.com/gre/diaporama

11. FollowCursor

圖像的旋轉跟隨光標移動而變化。

地址:https://github.com/bersLucas/FollowCursor

12.react-native-kenburns-view

KenBurns 用於React Native應用程序的圖像效果

地址: https://github.com/nHiRanZ/react-native-kenburns-view

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

13.vintageJS

VINTAGEJS 是一個jQuery插件，它使用HTML5 canvas爲你的圖像/照片添加驚歎的復古效果。它預置了三種效果，而且能夠很容易定製。

地址:https://github.com/lindelof/awesome-web-effect

14.ThumbnailGridExpandingPreview

有關如何使用擴展的圖像預覽建立縮略圖網格的教程，相似於在Google圖片上看到的效果。

地址：https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

15.gridder

一個jQuery插件，顯示縮略圖網格擴展預覽，相似於在Google圖片上看到的效果。

地址:https://github.com/oriongunning/gridder

16.MotionTransitionEffect

圖像幻燈片的快速運動過渡效果。

地址:https://github.com/codrops/MotionTransitionEffect

17.tiltedpage_scroll

tiltedpage_scroll.js是一款支持鼠標滾動、設置圖片角度的一款插件。當頁面滾動的時候，圖片會有傾斜3D的效果，做爲產品展現是個不錯的選擇。

地址:http://peachananr.github.io/tiltedpage_scroll/demo/tiltedpage_scroll_demo.html

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://github.com/lindelof/a...

交流

文章每週持續更新，能夠微信搜索 【大遷世界 】 第一時間閱讀，回覆 【福利】 有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。