awesome-web-effect

Web effects

A collection of reusable web page cool effects

A series of exquisite and compact web page cool effects

GitHub
3k stars
54 watching
189 forks
last commit: over 3 years ago
Linked from 3 awesome lists

awesomeweb-effect

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Background Decoration
particles-bg 651 over 3 years ago React component for particles backgrounds
particles-bg-vue 233 over 3 years ago A vue.js particles animation background component. Use it to make your website look cool
sparticles 250 almost 2 years ago Vanilla particles which can be used in a background or in a container, very fast and lightweight
jquery.ripples 1,062 about 3 years ago Add a water ripple effect to your background using WebGL
MorphingBackgroundShapes 386 over 7 years ago A decorative website background effect where SVG shapes morph and transform on scroll
SegmentEffect 542 over 7 years ago Background image segment effect as seen on [Filippo Bello's Portfolio]
jquery-bgswitcher 194 about 5 years ago Switch the background-image with using effect
BackgroundScaleHoverEffect 117 over 4 years ago Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths
ImageGridMotionEffect 141 about 3 years ago A motion hover effect for a background grid of images
jquery.adaptive-backgrounds.js 6,527 almost 7 years ago 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 53 over 9 years ago A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect
jquery-warpdrive-plugin 61 over 2 years ago Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Mouse Effect
mouse-particles 115 over 3 years ago AboutA mouse particle effect react component
ImageTrailEffects 219 over 5 years ago A set of effects for mouse-following image trails that show a random series of images
webgl-mouseover-effects 357 over 1 year ago Demos for the tutorial on how to achieve an interactive mouseover/hover effect
cursor-effectss 3,427 6 days ago 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 4 almost 5 years ago CSS shadow effect & JavaScript mouse move
vuepress-plugin-cursor-effects 23 9 months ago Add a cute click effect to your mouse in your vuepress!
jquery-animate3d 2 over 8 years ago jQuery plugin that gives elements a 3d mouse over effect
magneticHover 39 almost 2 years ago magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet
react-tilt 432 about 1 year ago Parallax tilt hover effect for React JS - tilt.js
hover3d 334 almost 7 years ago Simple jQuery plugin for 3d Hover effect

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Css 3D Effect
quintessential-css-cube 67 over 3 years ago The Quintessential Responsive 3D CSS Cube
Tarjetas-3D 16 over 7 years ago Código del Tutorial de Tarjetas 3D usando HTML5 y CSS3
3dtransforms-3D 1,012 over 4 years ago Intro to CSS 3D transforms
Makisu 1,531 over 2 years ago An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin
cube.less 56 over 1 year ago 3D (animated) cube using only CSS (Less), originally used by LeanCloud
super-mario 14 about 8 years ago Pure CSS animated 3D Super Mario Icon
CSS3D.js 367 almost 12 years ago This experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js
Solar-System 418 over 3 years ago Solar System data visualisation done in HTML/CSS and a bit of Javascript
css-space-shooter 178 about 4 years ago An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms
photon 1,448 over 12 years ago CSS 3D Lighting Engine photon.attasi.com
gl-css3d 33 over 8 years ago Synchronize CSS 3D transformations to a WebGL scene

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Image Effect
imagehover 1,825 over 2 years ago Pure CSS Image Hover Effect Library
ImageTiltEffect 577 about 6 years ago A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background
Magnifier 832 about 2 years ago Javascript library enabling magnifying glass effect on an images
gl-react-image-effects 222 almost 9 years ago universal image app that uses different gl-react components
StickyImageEffect 219 over 5 years ago A sticky image effect for a slideshow inspired by ultanoir's website
HeatDistortionEffect 299 over 8 years ago Animated haze distortion effect for images and text, with WebGL
ImageDraggingEffects 78 almost 5 years ago A set of playful dragging effects for images using various techniques
bgswitcher 194 about 5 years ago Switch the background-image with using effect
FullImageReveal 165 over 6 years ago A full image reveal effect with fancy thumbnail sliding
diaporama 797 almost 7 years ago Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions
FollowCursor 11 over 5 years ago Rotate elements to create a following effect
react-native-kenburns-view 58 13 days ago KenBurns Image Effect for React Native Applications
vintageJS 842 about 1 year ago Add a retro/vintage effect to images using the HTML5 canvas element
ThumbnailGridExpandingPreview 360 over 6 years ago A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images
gridder 462 about 1 year ago A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images
MotionTransitionEffect 57 almost 6 years ago A speedy motion transition effect for an image slideshow
tiltedpage_scroll 324 over 4 years ago Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Input Effect
power-mode-input 92 over 3 years ago PowerModeInput can make your text input box more compelling
TextInputEffects 968 over 7 years ago Simple styles and effects for enhancing text input interactions
typewriterjs 2,487 3 months ago A simple yet powerful native javascript plugin for a cool typewriter effect
t.js 318 over 3 years ago Lightweight $.Hypertext.Typewriter
shuffle-text 107 about 2 months ago "shuffle-text" is JavaScript text effect library such as cool legacy of Flash
react-typewriter 86 about 6 years ago A React component for creating typing animations
t-writer.js 517 almost 3 years ago Native typewriter effect, without compromises or dependencies
malarkey 239 almost 4 years ago Simulate a typewriter effect in vanilla JavaScript
tinytyper A tiny library for creating a typing effect on specified text element
jquery.typer 27 over 11 years ago The typewriter effect
Phaser-typewriter 38 over 7 years ago A phaser helper for the typewriter effect

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Transition Effect
transitions 117 over 4 years ago Transition effect for Cocos Creator
ModalWindowEffects 1,009 over 11 years ago A set of experimental modal window appearance effects with CSS transitions and animations
animated-transition-effects 81 over 8 years ago A library of animated transition effects, powered by CSS Animations
CSS3-hover-transition-effect 3 almost 10 years ago CSS3-hover-transition-effect | Cipher trick
Html_Transition_Effect_Demo 4 over 10 years ago It's pretty hover effects on circles with CSS Transitions which is very useful in dashboard
GlitchSlideshow 114 over 6 years ago A slideshow that uses a CSS glitch effect for slide transitions
image-mask-effect 55 about 3 years ago An immersive transition effect powered by image masks and CSS transforms
PageRevealEffects 132 over 8 years ago Some ideas for modern multi-layer page transitions using CSS Animations
ngView-animation-effects 184 over 9 years ago Demonstration of different animation effects with AngularJS ngView directive
WobblySlideshowEffect 111 about 10 years ago 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

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Rain & Snow
RainEffect 1,616 about 2 years ago Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber
aframe-rain 41 over 7 years ago 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 436 over 1 year ago The famous Matrix rain effect of falling green characters in a terminal
Rainbow 3 over 11 years ago A text effect jquery plugin (tested with jQuery 1.6.3)
Snowstorm 541 almost 3 years ago Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003
snowstorm 224 almost 2 years ago A Snow Effect component for React. Uses Snowstorm under the hood
react-snow-effect 4 almost 8 years ago react-snow-effect
snowy 5 almost 10 years ago A HTML5 snow effect with random generated snow flakes
the-matrix-effect 150 over 4 years ago The incredible effect of rain of letters in the style of the Matrix trilogy
smoke.js 274 over 4 years ago Small but good javascript smoke effect

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Button Effect
MagneticButtons 476 over 3 years ago A set of buttons with a magnetic interaction and a hover effect
ElasticProgress 873 almost 9 years ago Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot
vue-particle-buttons 259 about 1 month ago A bursting particles effects buttons component
nativescript-shine-button 7 almost 6 years ago NativeScript plugin that add shine effect to your button
react-parallax-button 12 over 6 years ago Bring your react buttons to next level with parallax effect
RippleButton 2 about 5 years ago A Kony Visualizer reusable component of a button with a Material Theme ripple effect
css-ripple-effect 342 over 5 years ago Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation
ParticleEffectsButtons 1,234 4 months ago A little library that can be used for bursting particles effects on buttons and other elements

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Loading Effect
PageLoadingEffects 646 over 10 years ago Modern ways of revealing new content using SVG animations
Asset-Loading-Effects 104 over 9 years ago Loading effects for assets including some built in animated reveals
fakeLoader 723 over 5 years ago 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 2 over 8 years ago Distributed Load Testing in Javascript-like Scripting Language
Whirl 1,770 almost 2 years ago CSS loading animations with minimal effort!
three-dots 1,328 about 1 year ago 🔮 CSS loading animations made by single element
ArtWorx-xLoader 20 about 8 years ago Pure css cross-browser loading animations
css-page-loader 9 about 2 years ago Lightweight CSS loading animations to use when page loads

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Audio Effect
Audio-Input-Effects 545 4 months ago Live Audio Input effects
beez 35 over 10 years ago 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)
soundbank 22 almost 10 years ago Simple Web Audio API based reverb effect
SoundEffectManager 6 about 9 years ago A simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API
soma-fm-player 140 over 1 year ago SomaFM Music Player Web-App

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / WebCam Effect
canvas-video-effects 24 almost 12 years ago Live Image Processing w/ getUserMedia() & Web Workers
chroma-cam 8 over 11 years ago Green screen effect in your webcam
webcam-effects 2 almost 6 years ago Webcam Effects in Three.js
JS-Webcam-effects 1 over 6 years ago Webcam effects
expo-chroma-key-camera 32 over 3 years ago Live green-screen effect with Expo and THREE.js
chroma-key-camera 32 over 3 years ago Live green-screen effect with Expo and THREE.js
hypersampler 6 over 5 years ago Hyhypeperersamamplplerer: a Spark AR camera effec
ChuckClose-SparkAR 8 about 5 years ago A simple example how to use Visual Shaders with JS in Spark AR

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / SVG Animations
bounty 820 9 months ago Javascript and SVG odometer effect library with motion blur
DistortedLinkEffects 138 over 4 years ago Some ideas for decorative link distortion effects using SVG filters
menu-animations 173 over 6 years ago Four different menu animations for menu button toggle between hamburger, cross and back icon
circle-svg-animation 26 about 5 years ago Circle SVG Animation
OrganicShapeAnimations 220 over 7 years ago Some shape morphing hover effects on images using SVG clipPath
FancyLetterAnimation 143 almost 8 years ago 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 20 almost 7 years ago This is a simple svg isometric city animation with GSAP
lazy-line-painter 1,971 12 months ago Lazy Line Painter - A Modern JS library for SVG path animation
jquery-drawsvg 771 about 8 years ago Lightweight, simple to use jQuery plugin to animate SVG paths
svg-animation 119 over 8 years ago The Illusion of Life: An SVG Animation Case Study

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Fireworks
fireworks 151 almost 12 years ago fireworks Particles engine in javascript
silly fireworks 73 over 13 years ago A silly JavaScript animation experiment, originally written in 2005
fireworks-webgl 66 almost 3 years ago WebGL + Web Audio API = Sound-driven fireworks!
fireworks-vr 45 almost 5 years ago WebGL Fireworks with ThreeJS In action:
skyrocket 12 about 7 years ago Design and Display fireworks on HTML canvas with Skyrocket.js
cool-fireworks 10 over 1 year ago a particle fireworks effect

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Other Effect
lottie-sample 14 over 6 years ago Demo after effect animation on web using Lottie
webEffects 1 over 10 years ago jQuery Parallax is a script that simulates the parallax effect as seen
MobileComponent 6 over 9 years ago dynamic effect component on mobile web
frosted-glass 65 over 4 years ago Add a live frosted glass blur effect over any type of web content, including text
pickout 88 over 7 years ago Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped
dissolve-generator 14 over 4 years ago Cool 2D dissolve effect generator
redux-reducer-side-effects 3 over 7 years ago Easy to follow side effect library for redux reducers
starry.night 71 almost 7 years ago The Starry Night animation in put.io's hero banner
bad-tv-shader 485 about 5 years ago Simulates a bad TV via horizontal distortion and vertical roll
map-effects-100 198 over 8 years ago Cool tips to design UI/UX on Leaflet maps
svg-Circus 318 about 10 years ago Create cool animated SVG spinners, loaders and other looped animations in seconds
jsfx 575 over 7 years ago This is a JavaScript library for sound effect generation and is supported on most current browsers
aquarelle 1,805 about 5 years ago Aquarelle is a watercolor effect component
glitch 197 about 8 years ago A glitched effect for DOM elements
spread 91 over 11 years ago Spread is a small experiment leveraging simple CSS3D transforms to create a colored plane
firealgorithm 1,328 10 days ago A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experiment with a Pull Request
EyeCandy 45 4 months ago Animated images that are superficially attractive and entertaining but intellectually undemanding
animatelo 489 about 2 years ago Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects

Backlinks from these awesome lists:

More related projects: