17 cool and useful image effects libraries

It's like decorating a beautiful Christmas tree in your room. Sometimes, a small web page with a cool effect can make your project shine. This is a really fun series that shares some cool image effects commonly found on pages.

1.imagehover

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

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

2. ImageTiltEffect

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

TiltEffect It 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 It is a practical picture magnifying glass plug-in made by 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 in 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 app and web. The iOS and Android implementations run together a code base (some specific code is designed to create different UI on the platform).

[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-6q6PdMWo-1607906041866)(/img/bVbKV43)]

[ The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-Rvwi5mHU-1607906041870)(/img/bVbKV49)]

5.StickyImageEffect

## Slideshow inspired by #ultanoir website with sticky image effect.

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

[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img -eMaWbN9k-1607906041871)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117123.gif)]

6.HeatDistortionEffect

WebGL thermal deformation effect full screen background.

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

[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img -xC5TrFBm-1607906041871)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117124.gif)]

7.ImageDraggingEffects

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

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

8.jQuery.BgSwitcher

jQuery.BgSwitcher implementation background Image switching effect.

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

[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly. (img-IGxWVx9I-1607906041874)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117126.gif)]

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

[The external link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img -KWmJkOnn-1607906041876)(https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/11111117128.gif)]

11. FollowCursor

The image's rotation changes as the cursor moves.

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

##12.react-native-kenburns-view

KenBurns Image effects for React Native applications

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 included a [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

Руководство о том, как создать сетку миниатюр с использованием расширенного предварительного просмотра изображений, аналогично эффекту, наблюдаемому в Google Images.

Адрес: https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

##15.gridder

Плагин jQuery, который отображает аббревиатуру. Сетка миниатюр расширяет область предварительного просмотра, аналогично тому, что вы видите в Google Images.

Адрес: https://github.com/oriongunning/gridder

16.MotionTransitionEffect

Быстрый переход слайдов изображений Эффект .

Адрес: https://github.com/codrops/MotionTransitionEffect

17.tiltedpage_scroll

tiltedpage_scroll.js — это поддержка A плагин для прокрутки мышью и установки угла изображения. При прокрутке страницы изображение будет иметь наклонный 3D-эффект, что является хорошим выбором для демонстрации продукта.

Адрес: http://peachananr.github.io/tiltedpage_scroll/demo/tiltedpage_scroll_demo.html

##Исходный адрес: https:// github.com/lindelof/awesome-web-effect

Автор: lindelof

Перевод: Front-end Xiaozhi

Для получения дополнительной информации о программировании посетите:

Обучение программированию

! !

The above is the detailed content of 17 cool and useful image effects libraries. For more information, please follow other related articles on the PHP Chinese website!