首頁 >頭條 >【推薦】17個提升使用者體驗圖像特效庫

【推薦】17個提升使用者體驗圖像特效庫

藏色散人
藏色散人轉載
2020-12-14 17:33:254414瀏覽

【推薦】17個提升使用者體驗圖像特效庫

1.imagehover

1.imagehover

【推薦】17個提升使用者體驗圖像特效庫

「網址:https://github.com/ciar4n/imagehover.css

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

2. ImageTiltEffect

【推薦】17個提升使用者體驗圖像特效庫

#位址: https://github.com/codrops/ImageTiltEffect

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

3.Magnifier.js
  • #網址:https://github.com/mark-rolich/Magnifier.js

  • Magnifier 是一款實用純js製作的圖片放大鏡外掛。它有以下一些特定:
  • 可以使用滑鼠滾輪放大縮小圖片。
  • 可以透過js或data屬性來設定選項。
  • 一次呼叫可以附加多張圖片。
  • 使用者可以自訂滑鼠進入、離開、移動事件。

【推薦】17個提升使用者體驗圖像特效庫

載入大圖片時可以顯現等待文字。

4.gl-react-image-effects

【推薦】17個提升使用者體驗圖像特效庫

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

【推薦】17個提升使用者體驗圖像特效庫通用的withReact範例應用程式與Web。 iOS和Android實作一起運行一個程式碼庫( 一些特定的程式碼被設計成在平台上創建不同的UI )。

5.StickyImageEffect

【推薦】17個提升使用者體驗圖像特效庫

受ultanoir網站啟發的幻燈片顯示,具有黏性圖像效果。

網址:https://github.com/Anemolo/StickyImageEffect

6.HeatDistortionEffect

【推薦】17個提升使用者體驗圖像特效庫

WebGL熱變形效果全螢幕背景。

網址:https://github.com/lbebber/HeatDistortionEffect

7.ImageDraggingEffects

【推薦】17個提升使用者體驗圖像特效庫

#使用各種技術為影像設定的一組有趣的拖曳效果。

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

8.jQuery.BgSwitcher

【推薦】17個提升使用者體驗圖像特效庫

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

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

9.FullImageReveal

【推薦】17個提升使用者體驗圖像特效庫

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

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

10.diaporama

【推薦】17個提升使用者體驗圖像特效庫

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

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

#11. FollowCursor

【推薦】17個提升使用者體驗圖像特效庫

圖片的旋轉跟隨遊標移動而變化。

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

12.react-native-kenburns-view

【推薦】17個提升使用者體驗圖像特效庫

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

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

############################### ########13.vintageJS#########VINTAGEJS 是一個jQuery插件,它使用HTML5 canvas為你的圖像/照片添加驚嘆的復古效果。它預置了三種效果,並且可以輕鬆自訂。 ######網址:https://github.com/lindelof/awesome-web-effect####

【推薦】17個提升使用者體驗圖像特效庫

14.ThumbnailGridExpandingPreview

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

網址:https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

【推薦】17個提升使用者體驗圖像特效庫

15.gridder

#一個jQuery插件,顯示縮圖網格擴充預覽,類似於在Google圖片上看到的效果。

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

【推薦】17個提升使用者體驗圖像特效庫

#16.MotionTransitionEffect

#圖片投影片的快速運動過渡效果。

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

【推薦】17個提升使用者體驗圖像特效庫

17.tiltedpage_scroll

#tiltedpage_scroll .js是一款支援滑鼠滾動、設定圖片角度的插件。當頁面滾動的時候,圖片會有傾斜3D的效果,作為產品展示是個不錯的選擇。

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

【推薦】17個提升使用者體驗圖像特效庫

程式碼部署後可能存在的BUG沒辦法即時知道,事後為了解決這些BUG,花了大量的時間進行log 調試,這邊順便推薦一個好用的BUG監控工具Fundebug(地址:https://www.fundebug.com/?utm_source=xiaozhi)。

原文:https://github.com/lindelof/awesome-web-effect

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除