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
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.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。