🚀 A series of exquisite and compact web page cool effects

• Image Effect

  • gridder - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images..
  • imagehover - Pure CSS Image Hover Effect Library
  • ImageTiltEffect - A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background
  • Magnifier - Javascript library enabling magnifying glass effect on an images
  • ThumbnailGridExpandingPreview - A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
  • MotionTransitionEffect - A speedy motion transition effect for an image slideshow.
  • tiltedpage_scroll - Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin
  • bgswitcher - Switch the background-image with using effect.
  • gridder - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images..
  • gl-react-image-effects - universal image app that uses different gl-react components
  • 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..
  • 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
  • react-native-kenburns-view - KenBurns Image Effect for React Native Applications
  • vintageJS - Add a retro/vintage effect to images using the HTML5 canvas element

• Background Decoration

  • 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.
  • 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].
  • BackgroundScaleHoverEffect - Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
  • particles-bg - React component for particles backgrounds
  • ImageGridMotionEffect - A motion hover effect for a background grid of images..
  • 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.
  • jquery.ripples - Add a water ripple effect to your background using WebGL.

• Css 3D Effect

  • 3dtransforms-3D - Intro to CSS 3D transforms
  • Makisu - An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.
  • cube.less - 3D (animated) cube using only CSS (Less), originally used by LeanCloud
  • super-mario - Pure CSS animated 3D Super Mario Icon
  • CSS3D.js - This experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js.
  • Solar-System - Solar System data visualisation done in HTML/CSS and a bit of Javascript.
  • css-space-shooter - An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms
  • photon - CSS 3D Lighting Engine photon.attasi.com
  • gl-css3d - Synchronize CSS 3D transformations to a WebGL scene
  • quintessential-css-cube - The Quintessential Responsive 3D CSS Cube
  • Tarjetas-3D - Código del Tutorial de Tarjetas 3D usando HTML5 y CSS3

• Input Effect

  • power-mode-input - PowerModeInput can make your text input box more compelling
  • TextInputEffects - Simple styles and effects for enhancing text input interactions.
  • typewriterjs - A simple yet powerful native javascript plugin for a cool typewriter effect.
  • t.js - Lightweight $.Hypertext.Typewriter
  • shuffle-text - "shuffle-text" is JavaScript text effect library such as cool legacy of Flash.
  • react-typewriter - A React component for creating typing animations.
  • t-writer.js - Native typewriter effect, without compromises or dependencies.
  • malarkey - Simulate a typewriter effect in vanilla JavaScript.
  • jquery.typer - The typewriter effect
  • Phaser-typewriter - A phaser helper for the typewriter effect
  • tinytyper - A tiny library for creating a typing effect on specified text element.

• Transition Effect

  • transitions - Transition effect for Cocos Creator
  • ModalWindowEffects - A set of experimental modal window appearance effects with CSS transitions and animations.
  • animated-transition-effects - A library of animated transition effects, powered by CSS Animations
  • CSS3-hover-transition-effect - CSS3-hover-transition-effect | Cipher trick
  • 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.
  • 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.
  • image-mask-effect - An immersive transition effect powered by image masks and CSS transforms.

• 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 - A Snow Effect component for React. Uses Snowstorm under the hood.
  • react-snow-effect - react-snow-effect.
  • snowy - A HTML5 snow effect with random generated snow flakes.
  • the-matrix-effect - The incredible effect of rain of letters in the style of the Matrix trilogy.
  • smoke.js - Small but good javascript smoke effect
  • Snowstorm - Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.

• Button Effect

  • MagneticButtons - A set of buttons with a magnetic interaction and a hover effect.
  • ElasticProgress - Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot
  • vue-particle-buttons - A bursting particles effects buttons component
  • nativescript-shine-button - NativeScript plugin that add shine effect to your button.
  • 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

  • Whirl - CSS loading animations with minimal effort!
  • css-page-loader - Lightweight CSS loading animations to use when page loads
  • 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.
  • three-dots - 🔮 CSS loading animations made by single element.
  • ArtWorx-xLoader - Pure css cross-browser loading animations.

• SVG Animations

  • 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.
  • IsometricCityAnimation - This is a simple svg isometric city animation with GSAP
  • jquery-drawsvg - Lightweight, simple to use jQuery plugin to animate SVG paths
  • svg-animation - The Illusion of Life: An SVG Animation Case Study
  • bounty - Javascript and SVG odometer effect library with motion blur
  • circle-svg-animation - Circle SVG Animation
  • OrganicShapeAnimations - Some shape morphing hover effects on images using SVG clipPath.
  • DistortedLinkEffects - Some ideas for decorative link distortion effects using SVG filters
  • menu-animations - Four different menu animations for menu button toggle between hamburger, cross and back icon.

• Fireworks

  • fireworks - fireworks Particles engine in javascript
  • silly fireworks - A silly JavaScript animation experiment, originally written in 2005.
  • fireworks-webgl - WebGL + Web Audio API = Sound-driven fireworks!
  • fireworks-vr - WebGL Fireworks with ThreeJS In action: https://qake.se/fw/index.html
  • skyrocket - Design and Display fireworks on HTML canvas with Skyrocket.js
  • cool-fireworks - a particle fireworks effect.

• Other Effect

  • lottie-sample - Demo after effect animation on web using Lottie
  • webEffects - jQuery Parallax is a script that simulates the parallax effect as seen
  • MobileComponent - dynamic effect component on mobile web
  • frosted-glass - Add a live frosted glass blur effect over any type of web content, including text.
  • pickout - Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped
  • dissolve-generator - Cool 2D dissolve effect generator
  • redux-reducer-side-effects - Easy to follow side effect library for redux reducers
  • bad-tv-shader - Simulates a bad TV via horizontal distortion and vertical roll.
  • map-effects-100 - Cool tips to design UI/UX on Leaflet maps.
  • svg-Circus - Create cool animated SVG spinners, loaders and other looped animations in seconds.
  • jsfx - This is a JavaScript library for sound effect generation and is supported on most current browsers.
  • aquarelle - Aquarelle is a watercolor effect component.
  • glitch - A glitched effect for DOM elements.
  • 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.
  • starry.night - The Starry Night animation in put.io's hero banner
  • animatelo - Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects

• Mouse Effect

  • magneticHover - magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet
  • mouse-particles - AboutA mouse particle effect react component
  • 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.
  • mouse-text-shadow - CSS shadow effect & JavaScript mouse move
  • jquery-animate3d - jQuery plugin that gives elements a 3d mouse over effect
  • react-tilt - Parallax tilt hover effect for React JS - tilt.js
  • hover3d - Simple jQuery plugin for 3d Hover effect
  • vuepress-plugin-cursor-effects - Add a cute click effect to your mouse in your vuepress!

• WebCam Effect

  • chroma-key-camera - Live green-screen effect with Expo and THREE.js
  • canvas-video-effects - Live Image Processing w/ getUserMedia() & Web Workers
  • chroma-cam - Green screen effect in your webcam
  • webcam-effects - Webcam Effects in Three.js
  • JS-Webcam-effects - Webcam effects
  • ChuckClose-SparkAR - A simple example how to use Visual Shaders with JS in Spark AR.
  • hypersampler - Hyhypeperersamamplplerer: a Spark AR camera effec

• Audio Effect

  • Audio-Input-Effects - Live Audio Input effects
  • beez - 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)
  • soundbank - Simple Web Audio API based reverb effect.
  • SoundEffectManager - A simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API
  • soma-fm-player - SomaFM Music Player Web-App