A series of exquisite and compact web page cool effects
awesome-web-effect
🚀 A series of exquisite and compact web page cool effects
It's like decorating a beautiful Christmas tree in a room. Sometimes a small web page with cool effects will make your project shine. This is a very fun series, I want to collect those cool effects that are common on the page.
Not limited to any framework (react, vue, angular, etc.), as long as the effect can be simply inserted into the page, you can send it to me, I like them and hope you like them too.
Background Decoration
particles-bg - React component for particles backgrounds
particles-bg-vue - A vue.js particles animation background component. Use it to make your website look cool.
sparticles - Vanilla particles which can be used in a background or in a container, very fast and lightweight.
jquery.ripples - Add a water ripple effect to your background using WebGL.
MorphingBackgroundShapes - A decorative website background effect where SVG shapes morph and transform on scroll..
SegmentEffect - Background image segment effect as seen on [Filippo Bello's Portfolio].
jquery.adaptive-backgrounds.js - A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.
fixed-background-effect - A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.
jquery-warpdrive-plugin - Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.
ImageTrailEffects - A set of effects for mouse-following image trails that show a random series of images.
webgl-mouseover-effects - Demos for the tutorial on how to achieve an interactive mouseover/hover effect
cursor-effectss - Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.
StickyImageEffect - A sticky image effect for a slideshow inspired by ultanoir's website.
HeatDistortionEffect - Animated haze distortion effect for images and text, with WebGL
ImageDraggingEffects - A set of playful dragging effects for images using various techniques..
bgswitcher - Switch the background-image with using effect.
FullImageReveal - A full image reveal effect with fancy thumbnail sliding.
diaporama - Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions.
FollowCursor - Rotate elements to create a following effect
vintageJS - Add a retro/vintage effect to images using the HTML5 canvas element
ThumbnailGridExpandingPreview - A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
gridder - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images..
Html_Transition_Effect_Demo - It's pretty hover effects on circles with CSS Transitions which is very useful in dashboard.
GlitchSlideshow - A slideshow that uses a CSS glitch effect for slide transitions.
image-mask-effect - An immersive transition effect powered by image masks and CSS transforms.
PageRevealEffects - Some ideas for modern multi-layer page transitions using CSS Animations.
ngView-animation-effects - Demonstration of different animation effects with AngularJS ngView directive.
WobblySlideshowEffect - The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.
Rain & Snow
RainEffect - Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
aframe-rain - aframe-rain is Rainfall effect component for A-Frame which displays a lot of rain drop/splash objects by using instancing technique with good performance.
matrix-rain - The famous Matrix rain effect of falling green characters in a terminal
Rainbow - A text effect jquery plugin (tested with jQuery 1.6.3)
Snowstorm - Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.
snowstorm - A Snow Effect component for React. Uses Snowstorm under the hood.
react-parallax-button - Bring your react buttons to next level with parallax effect.
RippleButton - A Kony Visualizer reusable component of a button with a Material Theme ripple effect.
css-ripple-effect - Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation.
ParticleEffectsButtons - A little library that can be used for bursting particles effects on buttons and other elements
Loading Effect
PageLoadingEffects - Modern ways of revealing new content using SVG animations.
Asset-Loading-Effects - Loading effects for assets including some built in animated reveals
fakeLoader - fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.
LoadEffect - Distributed Load Testing in Javascript-like Scripting Language.
Whirl - CSS loading animations with minimal effort!
three-dots - 🔮 CSS loading animations made by single element.
ArtWorx-xLoader - Pure css cross-browser loading animations.
css-page-loader - Lightweight CSS loading animations to use when page loads
OrganicShapeAnimations - Some shape morphing hover effects on images using SVG clipPath.
FancyLetterAnimation - An experimental SVG letter animation inspired by the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett's. Powered by Julian Garnier's anime.js.
spread - Spread is a small experiment leveraging simple CSS3D transforms to create a colored plane.
firealgorithm - A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experiment with a Pull Request.
EyeCandy - Animated images that are superficially attractive and entertaining but intellectually undemanding.
animatelo - Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects
Contribute
Contributions welcome! We welcome all contributions, especially by those who worked through the list and noticed some missing / unclear information! Please use the pull requests to discuss about the usefulness of a change.