17个提升用户体验图像特效库

偏执的太偏执、 2022-12-28 01:53 157阅读 0赞

> 作者：lindelof  
> 译者：前端小智  
> 来源:github

**双12 A 里服务器`27`块，通用[点击这里][Link 1]购买可以找我返现30，等于`27`块就能买到了，只限新用户，可以用家人的手机号购买！**

## 1.imagehover ##

地址：[https://github.com/ciar4n/imagehover.css][https_github.com_ciar4n_imagehover.css]

[imagehover.css-][https_github.com_ciar4n_imagehover.css] 纯CSS3鼠标滑过图片效果动画库，44种鼠标滑过效果

![1fef11e933d7ecdaa5c77d8bf80f152b.gif][]

## 2. ImageTiltEffect ##

地址：[https://github.com/codrops/ImageTiltEffect][https_github.com_codrops_ImageTiltEffect]

[TiltEffect][https_github.com_codrops_ImageTiltEffect]是一款让图像跟随鼠标产生微妙立体倾斜效果的插件，使其有层次感和深度感。

![def2c33145e0b45e452e9afed1231abb.gif][]

## 3.Magnifier.js ##

地址：[https://github.com/mark-rolich/Magnifier.js][https_github.com_mark-rolich_Magnifier.js]

[Magnifier][https_github.com_mark-rolich_Magnifier.js] 是一款实用纯js制作的图片放大镜插件。它有以下一些特定：

*  可以使用鼠标滚轮放大缩小图片。
 *  可以通过js或data属性来设置选项。
 *  一次调用可以附加多张图片。
 *  用户可以自定义鼠标进入、离开、移动事件。
 *  加载大图片时可以显现等待文本。

![71b8ee4e0f2f70451d0a6c022ace5026.gif][]

## 4.gl-react-image-effects ##

地址：[https://github.com/gre/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][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][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][https_github.com_codrops_ImageDraggingEffects]

![61e9c55510c918356e24082286710514.gif][]

## 8.jQuery.BgSwitcher ##

jQuery.BgSwitcher实现背景图像切换效果。

地址:[https://github.com/rewish/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][https_github.com_codrops_FullImageReveal]

![b18476f56d058d1d8675e489a6bfc3f3.gif][]

## 10.diaporama ##

Diaporama是一种图像/视频/内容幻灯片引擎，提供高质量的动画效果，包括Kenburns效果和GLSL Transitions。

地址:[https://github.com/gre/diaporama][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][https_github.com_bersLucas_FollowCursor]

![0cc028a4e7800dc4758703077ce20654.gif][]

## 12.react-native-kenburns-view ##

KenBurns 用于React Native应用程序的图像效果

地址: [https://github.com/nHiRanZ/react-native-kenburns-view][https_github.com_nHiRanZ_react-native-kenburns-view]

![b1eef0bf7347299d7e7e82acd569f2e5.gif][]

**大家都说简历没项目写，我就帮大家找了一个项目，还附赠[【搭建教程】][Link 2]。**

## 13.vintageJS ##

VINTAGEJS 是一个jQuery插件，它使用HTML5 canvas为你的图像/照片添加惊叹的复古效果。它预置了三种效果，并且可以很容易定制。

地址:[https://github.com/lindelof/awesome-web-effect][https_github.com_lindelof_awesome-web-effect]

![2c435585c6466d5027c9f1c794ca9266.png][]

## 14.ThumbnailGridExpandingPreview ##

有关如何使用扩展的图像预览创建缩略图网格的教程，类似于在Google图片上看到的效果。

地址：[https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/][https_tympanus.net_Tutorials_ThumbnailGridExpandingPreview]

![6602fdcefdd05b4fd957cc3172baa374.png][]

## 15.gridder ##

一个jQuery插件，显示缩略图网格扩展预览，类似于在Google图片上看到的效果。

地址:[https://github.com/oriongunning/gridder][https_github.com_oriongunning_gridder]

![09fc5ef6521db0ba445891ff49cce148.gif][]

## 16.MotionTransitionEffect ##

图像幻灯片的快速运动过渡效果。

地址:[https://github.com/codrops/MotionTransitionEffect][https_github.com_codrops_MotionTransitionEffect]

![d4aa0e45ed4d9da899a17d0ba2043d47.gif][]

## 17.tiltedpage\_scroll ##

tiltedpage\_scroll.js是一款支持鼠标滚动、设置图片角度的一款插件。当页面滚动的时候，图片会有倾斜3D的效果，作为产品展示是个不错的选择。

地址:[http://peachananr.github.io/tiltedpage\_scroll/demo/tiltedpage\_scroll\_demo.html][http_peachananr.github.io_tiltedpage_scroll_demo_tiltedpage_scroll_demo.html]

![a8f6450b019566a66ffc4b5723d83e9a.gif][]

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

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

## 交流 ##

文章每周持续更新，可以微信搜索 **【大迁世界 】** 第一时间阅读，回复 **【福利】** 有多份前端视频等着你，本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，欢迎Star。

[Link 1]: https://www.aliyun.com/minisite/goods?taskCode=pintuan20201212&recordId=297031&userCode=pxuujn3r
[https_github.com_ciar4n_imagehover.css]: https://github.com/ciar4n/imagehover.css
[1fef11e933d7ecdaa5c77d8bf80f152b.gif]: /images/20221120/413e1b225b9b43c59a156eebb36bf339.png
[https_github.com_codrops_ImageTiltEffect]: https://github.com/codrops/ImageTiltEffect
[def2c33145e0b45e452e9afed1231abb.gif]: /images/20221120/9e8b93284f554f1a952e1b79ae20e436.png
[https_github.com_mark-rolich_Magnifier.js]: https://github.com/mark-rolich/Magnifier.js
[71b8ee4e0f2f70451d0a6c022ace5026.gif]: /images/20221120/d45b0f1bdfc04b9198519d6d243021f2.png
[https_github.com_gre_gl-react-image-effects]: https://github.com/gre/gl-react-image-effects
[https_github.com_Anemolo_StickyImageEffect]: https://github.com/Anemolo/StickyImageEffect
[https_github.com_lbebber_HeatDistortionEffect]: https://github.com/lbebber/HeatDistortionEffect
[https_github.com_codrops_ImageDraggingEffects]: https://github.com/codrops/ImageDraggingEffects
[61e9c55510c918356e24082286710514.gif]: https://img-blog.csdnimg.cn/img_convert/61e9c55510c918356e24082286710514.gif
[https_github.com_rewish_jquery-bgswitcher]: https://github.com/rewish/jquery-bgswitcher
[https_github.com_codrops_FullImageReveal]: https://github.com/codrops/FullImageReveal
[b18476f56d058d1d8675e489a6bfc3f3.gif]: https://img-blog.csdnimg.cn/img_convert/b18476f56d058d1d8675e489a6bfc3f3.gif
[https_github.com_gre_diaporama]: https://github.com/gre/diaporama
[https_github.com_bersLucas_FollowCursor]: https://github.com/bersLucas/FollowCursor
[0cc028a4e7800dc4758703077ce20654.gif]: https://img-blog.csdnimg.cn/img_convert/0cc028a4e7800dc4758703077ce20654.gif
[https_github.com_nHiRanZ_react-native-kenburns-view]: https://github.com/nHiRanZ/react-native-kenburns-view
[b1eef0bf7347299d7e7e82acd569f2e5.gif]: https://img-blog.csdnimg.cn/img_convert/b1eef0bf7347299d7e7e82acd569f2e5.gif
[Link 2]: https://github.com/qq449245884/xiaozhi/issues/210
[https_github.com_lindelof_awesome-web-effect]: https://github.com/lindelof/awesome-web-effect
[2c435585c6466d5027c9f1c794ca9266.png]: https://img-blog.csdnimg.cn/img_convert/2c435585c6466d5027c9f1c794ca9266.png
[https_tympanus.net_Tutorials_ThumbnailGridExpandingPreview]: https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/
[6602fdcefdd05b4fd957cc3172baa374.png]: https://img-blog.csdnimg.cn/img_convert/6602fdcefdd05b4fd957cc3172baa374.png
[https_github.com_oriongunning_gridder]: https://github.com/oriongunning/gridder
[09fc5ef6521db0ba445891ff49cce148.gif]: https://img-blog.csdnimg.cn/img_convert/09fc5ef6521db0ba445891ff49cce148.gif
[https_github.com_codrops_MotionTransitionEffect]: https://github.com/codrops/MotionTransitionEffect
[d4aa0e45ed4d9da899a17d0ba2043d47.gif]: https://img-blog.csdnimg.cn/img_convert/d4aa0e45ed4d9da899a17d0ba2043d47.gif
[http_peachananr.github.io_tiltedpage_scroll_demo_tiltedpage_scroll_demo.html]: http://peachananr.github.io/tiltedpage_scroll/demo/tiltedpage_scroll_demo.html
[a8f6450b019566a66ffc4b5723d83e9a.gif]: https://img-blog.csdnimg.cn/img_convert/a8f6450b019566a66ffc4b5723d83e9a.gif
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi