17 個實用的影像特效庫

前端小智發表於2022-03-25
特效
作者：lindelof
譯者：前端小智
來源:github

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

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 )。

clipboard.png

clipboard.png

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 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章