![17 cool and useful image effects libraries](https://img.php.cn/upload/article/000/000/024/5fd80d7550442829.jpg)
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
![](https://img.php.cn/upload/article/000/000/024/180a5d8080886b9e9b075ddd8790727d-0.gif)
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.
![](https://img.php.cn/upload/article/000/000/024/6c94c5df76a77df250bd6083a42d991b-1.gif)
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.
![](https://img.php.cn/upload/article/000/000/024/73346af50888c6d66937c8cd229af5b3-2.gif)
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
![](https://img.php.cn/upload/article/000/000/024/505d7cbb03a9459d33e5476e079fa260-3.gif)
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
![](https://img.php.cn/upload/article/000/000/024/98f049946d64acff9e2e2d7d8e9a41c2-4.gif)
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
![](https://img.php.cn/upload/article/000/000/024/5018c6e3fb3a6c98444bb41072aa91e4-6.gif)
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
![](https://img.php.cn/upload/article/000/000/024/2dc2184382b48d564b632b02e5a7294c-7.png)
14.ThumbnailGridExpandingPreview
Руководство о том, как создать сетку миниатюр с использованием расширенного предварительного просмотра изображений, аналогично эффекту, наблюдаемому в Google Images.
Адрес: https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/
![](https://img.php.cn/upload/article/000/000/024/40f6fb41880508aef85de191aaa03271-8.png)
##15.gridder
Плагин jQuery, который отображает аббревиатуру. Сетка миниатюр расширяет область предварительного просмотра, аналогично тому, что вы видите в Google Images.
Адрес: https://github.com/oriongunning/gridder
![](https://img.php.cn/upload/article/000/000/024/40f6fb41880508aef85de191aaa03271-9.gif)
16.MotionTransitionEffect
Быстрый переход слайдов изображений Эффект .
Адрес: https://github.com/codrops/MotionTransitionEffect
![](https://img.php.cn/upload/article/000/000/024/cb989e2d137ce6e8f8832277c284cc2f-10.gif)
17.tiltedpage_scroll
tiltedpage_scroll.js — это поддержка A плагин для прокрутки мышью и установки угла изображения. При прокрутке страницы изображение будет иметь наклонный 3D-эффект, что является хорошим выбором для демонстрации продукта.
Адрес: http://peachananr.github.io/tiltedpage_scroll/demo/tiltedpage_scroll_demo.html
![](https://img.php.cn/upload/article/000/000/024/a133a19746277166d2c9d0be3a80f48e-11.gif)
##Исходный адрес: 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!