17 Useful Image Effects Libraries

Author: lindelof
Translator: Front-end Xiaozhi
Source: github

If you have dreams and dry goods, search [Moving the World] attention to this Shawanzhi who is still washing dishes in the early morning.
This article has been included in GitHub https://github.com/qq449245884/xiaozhi . There are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

1.imagehover

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

imagehover.css- Pure CSS3 mouseover image effect animation library, 44 mouseover effects

2. ImageTiltEffect

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

TiltEffect is a plugin that makes the image follow the mouse to produce a subtle stereo tilt effect, giving it a sense of depth and depth.

3.Magnifier.js

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

Magnifier is a picture magnifier plugin made with practical pure js. It has the following specifics:

You can use the mouse wheel to zoom in and out of the picture.
Options can be set via js or data attributes.
Multiple images can be attached in one call.
Users can customize mouse enter, leave, and move events.
Waiting text can be displayed when loading large images.

4.gl-react-image-effects

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

Generic withReact sample app with web. The iOS and Android implementations run together a codebase (some specific code is designed to create different UIs on the platform).

5.StickyImageEffect

A slideshow inspired by the ultanoir website with sticky image effects.

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

6.HeatDistortionEffect

Fullscreen background with WebGL thermal warping effect.

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

7.ImageDraggingEffects

A set of interesting drag effects for images using various techniques.

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

8.jQuery.BgSwitcher

jQuery.BgSwitcher implements the background image switching effect.

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

9.FullImageReveal

A full image shows a 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

The rotation of the image changes as the cursor moves.

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

12.react-native-kenburns-view

Image Effects for React Native Apps by KenBurns

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

Everyone said that there is no project to write on the resume, so I helped you find a project, and also attached [Building Tutorial] .

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

A tutorial on how to create a grid of thumbnails with expanded image previews, similar to the effect seen on Google Images.

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

15.gridder

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

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

16.MotionTransitionEffect

Fast motion transition effect for image slideshow.

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

17.tiltedpage_scroll

tiltedpage_scroll.js is a plugin that supports mouse scrolling and setting the angle of images. When the page is scrolled, the picture will have a tilted 3D effect, which is a good choice as a product display.

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

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool Fundebug .

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

communicate with