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.
651⭐96🍴particles-bg) - React component for particles backgrounds233⭐17🍴particles-bg-vue) - A vue.js particles animation background component. Use it to make your website look cool.250⭐20🍴sparticles) - Vanilla particles which can be used in a background or in a container, very fast and lightweight.1062⭐417🍴jquery.ripples) - Add a water ripple effect to your background using WebGL.386⭐68🍴MorphingBackgroundShapes) - A decorative website background effect where SVG shapes morph and transform on scroll..542⭐120🍴SegmentEffect) - Background image segment effect as seen on [Filippo Bello's Portfolio].194⭐75🍴jquery-bgswitcher) - Switch the background-image with using effect.117⭐31🍴BackgroundScaleHoverEffect) - Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.141⭐20🍴ImageGridMotionEffect) - A motion hover effect for a background grid of images..6527⭐454🍴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.53⭐9🍴fixed-background-effect) - A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.61⭐24🍴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.
115⭐5🍴mouse-particles) - AboutA mouse particle effect react component219⭐53🍴ImageTrailEffects) - A set of effects for mouse-following image trails that show a random series of images.357⭐62🍴webgl-mouseover-effects) - Demos for the tutorial on how to achieve an interactive mouseover/hover effect3427⭐253🍴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.4⭐0🍴mouse-text-shadow) - CSS shadow effect & JavaScript mouse move23⭐1🍴vuepress-plugin-cursor-effects) - Add a cute click effect to your mouse in your vuepress!2⭐1🍴jquery-animate3d) - jQuery plugin that gives elements a 3d mouse over effect39⭐4🍴magneticHover) - magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet432⭐29🍴react-tilt) - Parallax tilt hover effect for React JS - tilt.js334⭐107🍴hover3d) - Simple jQuery plugin for 3d Hover effect
67⭐8🍴quintessential-css-cube) - The Quintessential Responsive 3D CSS Cube16⭐12🍴Tarjetas-3D) - Código del Tutorial de Tarjetas 3D usando HTML5 y CSS31012⭐162🍴3dtransforms-3D) - Intro to CSS 3D transforms1531⭐354🍴Makisu) - An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.56⭐10🍴cube.less) - 3D (animated) cube using only CSS (Less), originally used by LeanCloud14⭐2🍴super-mario) - Pure CSS animated 3D Super Mario Icon367⭐56🍴CSS3D.js) - This experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js.418⭐138🍴Solar-System) - Solar System data visualisation done in HTML/CSS and a bit of Javascript.178⭐37🍴css-space-shooter) - An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms1448⭐114🍴photon) - CSS 3D Lighting Engine photon.attasi.com33⭐6🍴gl-css3d) - Synchronize CSS 3D transformations to a WebGL scene
1825⭐235🍴imagehover) - Pure CSS Image Hover Effect Library577⭐96🍴ImageTiltEffect) - A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background832⭐193🍴Magnifier) - Javascript library enabling magnifying glass effect on an images222⭐32🍴gl-react-image-effects) - universal image app that uses different gl-react components220⭐51🍴StickyImageEffect) - A sticky image effect for a slideshow inspired by ultanoir's website.299⭐66🍴HeatDistortionEffect) - Animated haze distortion effect for images and text, with WebGL78⭐19🍴ImageDraggingEffects) - A set of playful dragging effects for images using various techniques..194⭐75🍴bgswitcher) - Switch the background-image with using effect.165⭐36🍴FullImageReveal) - A full image reveal effect with fancy thumbnail sliding.797⭐103🍴diaporama) - Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions.11⭐2🍴FollowCursor) - Rotate elements to create a following effect58⭐18🍴react-native-kenburns-view) - KenBurns Image Effect for React Native Applications842⭐116🍴vintageJS) - Add a retro/vintage effect to images using the HTML5 canvas element360⭐142🍴ThumbnailGridExpandingPreview) - A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.462⭐129🍴gridder) - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images..57⭐15🍴MotionTransitionEffect) - A speedy motion transition effect for an image slideshow.324⭐135🍴tiltedpage_scroll) - Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin
92⭐7🍴power-mode-input) - PowerModeInput can make your text input box more compelling968⭐172🍴TextInputEffects) - Simple styles and effects for enhancing text input interactions.2487⭐221🍴typewriterjs) - A simple yet powerful native javascript plugin for a cool typewriter effect.318⭐58🍴t.js) - Lightweight $.Hypertext.Typewriter107⭐16🍴shuffle-text) - "shuffle-text" is JavaScript text effect library such as cool legacy of Flash.86⭐37🍴react-typewriter) - A React component for creating typing animations.517⭐27🍴t-writer.js) - Native typewriter effect, without compromises or dependencies.239⭐18🍴malarkey) - Simulate a typewriter effect in vanilla JavaScript.?⭐?🍴tinytyper) - A tiny library for creating a typing effect on specified text element.27⭐7🍴jquery.typer) - The typewriter effect38⭐8🍴Phaser-typewriter) - A phaser helper for the typewriter effect
117⭐71🍴transitions) - Transition effect for Cocos Creator1009⭐239🍴ModalWindowEffects) - A set of experimental modal window appearance effects with CSS transitions and animations.81⭐25🍴animated-transition-effects) - A library of animated transition effects, powered by CSS Animations3⭐0🍴CSS3-hover-transition-effect) - CSS3-hover-transition-effect | Cipher trick4⭐0🍴Html_Transition_Effect_Demo) - It's pretty hover effects on circles with CSS Transitions which is very useful in dashboard.114⭐31🍴GlitchSlideshow) - A slideshow that uses a CSS glitch effect for slide transitions.55⭐12🍴image-mask-effect) - An immersive transition effect powered by image masks and CSS transforms.132⭐45🍴PageRevealEffects) - Some ideas for modern multi-layer page transitions using CSS Animations.184⭐54🍴ngView-animation-effects) - Demonstration of different animation effects with AngularJS ngView directive.111⭐30🍴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.
1617⭐280🍴RainEffect) - Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.41⭐6🍴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.436⭐38🍴matrix-rain) - The famous Matrix rain effect of falling green characters in a terminal3⭐2🍴Rainbow) - A text effect jquery plugin (tested with jQuery 1.6.3)540⭐144🍴Snowstorm) - Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.224⭐25🍴snowstorm) - A Snow Effect component for React. Uses Snowstorm under the hood.4⭐6🍴react-snow-effect) - react-snow-effect.5⭐0🍴snowy) - A HTML5 snow effect with random generated snow flakes.150⭐41🍴the-matrix-effect) - The incredible effect of rain of letters in the style of the Matrix trilogy.274⭐81🍴smoke.js) - Small but good javascript smoke effect
476⭐92🍴MagneticButtons) - A set of buttons with a magnetic interaction and a hover effect.873⭐90🍴ElasticProgress) - Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot260⭐23🍴vue-particle-buttons) - A bursting particles effects buttons component7⭐1🍴nativescript-shine-button) - NativeScript plugin that add shine effect to your button.12⭐2🍴react-parallax-button) - Bring your react buttons to next level with parallax effect.2⭐1🍴RippleButton) - A Kony Visualizer reusable component of a button with a Material Theme ripple effect.342⭐110🍴css-ripple-effect) - Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation.1234⭐150🍴ParticleEffectsButtons) - A little library that can be used for bursting particles effects on buttons and other elements
646⭐109🍴PageLoadingEffects) - Modern ways of revealing new content using SVG animations.104⭐8🍴Asset-Loading-Effects) - Loading effects for assets including some built in animated reveals723⭐269🍴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.2⭐6🍴LoadEffect) - Distributed Load Testing in Javascript-like Scripting Language.1770⭐253🍴Whirl) - CSS loading animations with minimal effort!1328⭐131🍴three-dots) - 🔮 CSS loading animations made by single element.20⭐7🍴ArtWorx-xLoader) - Pure css cross-browser loading animations.9⭐6🍴css-page-loader) - Lightweight CSS loading animations to use when page loads
545⭐187🍴Audio-Input-Effects) - Live Audio Input effects35⭐8🍴beez) - 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)22⭐4🍴soundbank) - Simple Web Audio API based reverb effect.6⭐5🍴SoundEffectManager) - A simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API140⭐32🍴soma-fm-player) - SomaFM Music Player Web-App
24⭐6🍴canvas-video-effects) - Live Image Processing w/ getUserMedia() & Web Workers8⭐3🍴chroma-cam) - Green screen effect in your webcam2⭐1🍴webcam-effects) - Webcam Effects in Three.js1⭐0🍴JS-Webcam-effects) - Webcam effects32⭐5🍴expo-chroma-key-camera) - Live green-screen effect with Expo and THREE.js32⭐5🍴chroma-key-camera) - Live green-screen effect with Expo and THREE.js6⭐0🍴hypersampler) - Hyhypeperersamamplplerer: a Spark AR camera effec8⭐5🍴ChuckClose-SparkAR) - A simple example how to use Visual Shaders with JS in Spark AR.
820⭐51🍴bounty) - Javascript and SVG odometer effect library with motion blur138⭐21🍴DistortedLinkEffects) - Some ideas for decorative link distortion effects using SVG filters173⭐9🍴menu-animations) - Four different menu animations for menu button toggle between hamburger, cross and back icon.26⭐2🍴circle-svg-animation) - Circle SVG Animation220⭐55🍴OrganicShapeAnimations) - Some shape morphing hover effects on images using SVG clipPath.143⭐38🍴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.20⭐5🍴IsometricCityAnimation) - This is a simple svg isometric city animation with GSAP1971⭐325🍴lazy-line-painter) - Lazy Line Painter - A Modern JS library for SVG path animation771⭐139🍴jquery-drawsvg) - Lightweight, simple to use jQuery plugin to animate SVG paths119⭐12🍴svg-animation) - The Illusion of Life: An SVG Animation Case Study
151⭐37🍴fireworks) - fireworks Particles engine in javascript73⭐30🍴silly fireworks) - A silly JavaScript animation experiment, originally written in 2005.66⭐21🍴fireworks-webgl) - WebGL + Web Audio API = Sound-driven fireworks!45⭐15🍴fireworks-vr) - WebGL Fireworks with ThreeJS In action: https://qake.se/fw/index.html12⭐2🍴skyrocket) - Design and Display fireworks on HTML canvas with Skyrocket.js10⭐6🍴cool-fireworks) - a particle fireworks effect.
14⭐3🍴lottie-sample) - Demo after effect animation on web using Lottie1⭐0🍴webEffects) - jQuery Parallax is a script that simulates the parallax effect as seen6⭐3🍴MobileComponent) - dynamic effect component on mobile web65⭐6🍴frosted-glass) - Add a live frosted glass blur effect over any type of web content, including text.88⭐16🍴pickout) - Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped14⭐1🍴dissolve-generator) - Cool 2D dissolve effect generator3⭐0🍴redux-reducer-side-effects) - Easy to follow side effect library for redux reducers71⭐8🍴starry.night) - The Starry Night animation in put.io's hero banner485⭐45🍴bad-tv-shader) - Simulates a bad TV via horizontal distortion and vertical roll.198⭐46🍴map-effects-100) - Cool tips to design UI/UX on Leaflet maps.318⭐36🍴svg-Circus) - Create cool animated SVG spinners, loaders and other looped animations in seconds.575⭐49🍴jsfx) - This is a JavaScript library for sound effect generation and is supported on most current browsers.1805⭐108🍴aquarelle) - Aquarelle is a watercolor effect component.197⭐27🍴glitch) - A glitched effect for DOM elements.91⭐16🍴spread) - Spread is a small experiment leveraging simple CSS3D transforms to create a colored plane.1328⭐284🍴firealgorithm) - A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experiment with a Pull Request.45⭐13🍴EyeCandy) - Animated images that are superficially attractive and entertaining but intellectually undemanding.489⭐39🍴animatelo) - Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects
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.
This work is licensed under a 🌎 Creative Commons Attribution 4.0 International License.
2894⭐ 189🍴 lindelof/awesome-web-effect)