作者：lindelof
譯者：前端小智
來源:github
雙12 A 里服務器27塊，通用點擊這里購買可以找我返現30，等于27塊就能買到了，只限新用戶，可以用家人的手機號購買！
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 )，
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6q6PdMWo-1607906041866)(/img/bVbKV43)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Rvwi5mHU-1607906041870)(/img/bVbKV49)]
5.StickyImageEffect
受ultanoir網站啟發的幻燈片顯示，具有粘性影像效果，
地址：https://github.com/Anemolo/StickyImageEffect
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eMaWbN9k-1607906041871)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117123.gif)]
6.HeatDistortionEffect
WebGL熱變形效果全屏背景，
地址：https://github.com/lbebber/HeatDistortionEffect
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xC5TrFBm-1607906041871)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117124.gif)]
7.ImageDraggingEffects
使用各種技術為影像設定的一組有趣的拖動效果，
地址:https://github.com/codrops/ImageDraggingEffects
8.jQuery.BgSwitcher
jQuery.BgSwitcher實作背景影像切換效果，
地址:https://github.com/rewish/jquery-bgswitcher
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IGxWVx9I-1607906041874)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117126.gif)]
9.FullImageReveal
一個完整的影像顯示精美的縮略圖滑動效果，
地址:https://github.com/codrops/FullImageReveal
10.diaporama
Diaporama是一種影像/視頻/內容幻燈片引擎，提供高質量的影片效果，包括Kenburns效果和GLSL Transitions，
地址:https://github.com/gre/diaporama
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-KWmJkOnn-1607906041876)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117128.gif)]
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/awesome-web-effect
交流
文章每周持續更新，可以微信搜索 【大遷世界 】 第一時間閱讀，回復 【福利】 有多份前端視頻等著你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star，
CSDN認證博客專家
TypeScript
ECMAScript 6
前端框架
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/235416.html
標籤：AI
上一篇：極客日報第 29 期：網易首支 AI 生成歌曲《醒來》正式發布；Linus Torvalds 宣布 Linux 5.10 發布