[Recommended] 17 image special effects libraries to improve user experience

1.imagehover

Address: https://github.com/ciar4n/imagehover.css

imagehover. css- Pure CSS3 mouse-over image effect animation library, 44 kinds of mouse-over effects

2. ImageTiltEffect

Address: https://github.com/codrops/ImageTiltEffect

TiltEffect is a plug-in that allows the image to follow the mouse to produce a subtle three-dimensional tilt effect, giving it a sense of layering and depth.

3.Magnifier.js

Address: https://github.com/mark-rolich/Magnifier.js

Magnifier is a practical picture magnifying glass plug-in made in pure js. It has the following specific features:

• You can use the mouse wheel to zoom in and out of the picture.

• Options can be set through js or data attributes.

• Multiple pictures can be attached with one call.

• Users can customize mouse entry, departure, and movement events.

• Waiting text can be displayed when loading large images.

4.gl-react-image-effects

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

Universal withReact sample application and the web. The iOS and Android implementations run together a code base (some specific code is designed to create different UI on the platform).

##5.StickyImageEffect

Slideshow inspired by ultanoir website, with stickiness Image effects.

Address: https://github.com/Anemolo/StickyImageEffect

6.HeatDistortionEffect

WebGL Heat distortion effect full screen background.

Address: https://github.com/lbebber/HeatDistortionEffect

7.ImageDraggingEffects

Use An interesting set of dragging effects set for images using various techniques.

Address: https://github.com/codrops/ImageDraggingEffects

##8.jQuery.BgSwitcher

jQuery.BgSwitcher implements background image switching effect.

Address: https://github.com/rewish/jquery-bgswitcher

9.FullImageReveal

A complete image display with beautiful thumbnail sliding effect.

Address: https://github.com/codrops/FullImageReveal

10.diaporama

Diaporama is an image/video/content slideshow engine that provides high-quality animation effects, including Kenburns effects and GLSL Transitions.

Address: https://github.com/gre/diaporama

##11. FollowCursor

image The rotation changes as the cursor moves.

Address: https://github.com/bersLucas/FollowCursor

##12.react-native-kenburns-view

KenBurns Image effects for React Native applicationsAddress: https://github.com/nHiRanZ/react-native-kenburns-view

13.vintageJS

VINTAGEJS is a jQuery plugin that uses HTML5 canvas to add stunning vintage effects to your images/photos. It comes with three preset effects and can be easily customized. Address: https://github.com/lindelof/awesome-web-effect

14.ThumbnailGridExpandingPreview

Tutorial on how to create a thumbnail grid with expanded image preview, similar to what you see on Google Images Effect.

Address: https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

##15.gridder

A jQuery plugin that displays a thumbnail grid expanded preview, similar to the effect seen on Google Images.

Address: https://github.com/oriongunning/gridder

##16.MotionTransitionEffect

Image Fast motion transition effects for slides.

Address: https://github.com/codrops/MotionTransitionEffect

##17.tiltedpage_scroll

tiltedpage_scroll .js is a plug-in that supports mouse scrolling and setting image angles. When the page is scrolled, the picture will have a tilted 3D effect, which is a good choice for product display.

Address: http://peachananr.github.io/tiltedpage_scroll/demo/tiltedpage_scroll_demo.html

Bugs that may exist after the code is deployed cannot be real-time As you know, in order to solve these bugs afterwards, I spent a lot of time on log debugging. By the way, I would like to recommend Fundebug, a useful BUG monitoring tool (Address: https://www.fundebug.com/?utm_source=xiaozhi).

Original text: https://github.com/lindelof/awesome-web-effect