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 5 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-bg654over 5 years agoReact component for particles backgrounds
particles-bg-vue234over 5 years agoA vue.js particles animation background component. Use it to make your website look cool
sparticles254over 3 years agoVanilla particles which can be used in a background or in a container, very fast and lightweight
jquery.ripples1,067almost 5 years agoAdd a water ripple effect to your background using WebGL
MorphingBackgroundShapes387over 9 years agoA decorative website background effect where SVG shapes morph and transform on scroll
SegmentEffect543over 9 years agoBackground image segment effect as seen on [Filippo Bello's Portfolio]
jquery-bgswitcher194almost 7 years agoSwitch the background-image with using effect
BackgroundScaleHoverEffect118over 6 years agoRecreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths
ImageGridMotionEffect141about 5 years agoA motion hover effect for a background grid of images
jquery.adaptive-backgrounds.js6,528almost 9 years agoA simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element
fixed-background-effect53over 11 years agoA simple template that takes advantage of the background-attachment CSS property to create a fixed background effect
jquery-warpdrive-plugin62over 4 years agoWarp 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-particles115over 5 years agoAboutA mouse particle effect react component
ImageTrailEffects219about 7 years agoA set of effects for mouse-following image trails that show a random series of images
webgl-mouseover-effects360over 3 years agoDemos for the tutorial on how to achieve an interactive mouseover/hover effect
cursor-effectss3,466almost 2 years agoOnly 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-shadow4almost 7 years agoCSS shadow effect & JavaScript mouse move
vuepress-plugin-cursor-effects23over 2 years agoAdd a cute click effect to your mouse in your vuepress!
jquery-animate3d2over 10 years agojQuery plugin that gives elements a 3d mouse over effect
magneticHover40over 3 years agomagneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet
react-tilt430almost 3 years agoParallax tilt hover effect for React JS - tilt.js
hover3d335over 8 years agoSimple jQuery plugin for 3d Hover effect

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Css 3D Effect

quintessential-css-cube67over 5 years agoThe Quintessential Responsive 3D CSS Cube
Tarjetas-3D16about 9 years agoCódigo del Tutorial de Tarjetas 3D usando HTML5 y CSS3
3dtransforms-3D1,012over 6 years agoIntro to CSS 3D transforms
Makisu1,532about 4 years agoAn experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin
cube.less56almost 2 years ago3D (animated) cube using only CSS (Less), originally used by LeanCloud
super-mario14about 10 years agoPure CSS animated 3D Super Mario Icon
CSS3D.js367almost 14 years agoThis experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js
Solar-System420about 5 years agoSolar System data visualisation done in HTML/CSS and a bit of Javascript
css-space-shooter178almost 6 years agoAn old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms
photon1,450over 14 years agoCSS 3D Lighting Engine photon.attasi.com
gl-css3d33over 10 years agoSynchronize CSS 3D transformations to a WebGL scene

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Image Effect

imagehover1,827about 4 years agoPure CSS Image Hover Effect Library
ImageTiltEffect577almost 8 years agoA subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background
Magnifier832about 4 years agoJavascript library enabling magnifying glass effect on an images
gl-react-image-effects222over 10 years agouniversal image app that uses different gl-react components
StickyImageEffect221over 7 years agoA sticky image effect for a slideshow inspired by ultanoir's website
HeatDistortionEffect299over 10 years agoAnimated haze distortion effect for images and text, with WebGL
ImageDraggingEffects78over 6 years agoA set of playful dragging effects for images using various techniques
bgswitcher194almost 7 years agoSwitch the background-image with using effect
FullImageReveal165over 8 years agoA full image reveal effect with fancy thumbnail sliding
diaporama796over 8 years agoDiaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions
FollowCursor11about 7 years agoRotate elements to create a following effect
react-native-kenburns-view58almost 2 years agoKenBurns Image Effect for React Native Applications
vintageJS843almost 3 years agoAdd a retro/vintage effect to images using the HTML5 canvas element
ThumbnailGridExpandingPreview360about 8 years agoA tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images
gridder462about 3 years agoA jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images
MotionTransitionEffect56almost 8 years agoA speedy motion transition effect for an image slideshow
tiltedpage_scroll324over 6 years agoCreate 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-input92over 5 years agoPowerModeInput can make your text input box more compelling
TextInputEffects968over 9 years agoSimple styles and effects for enhancing text input interactions
typewriterjs2,504about 2 years agoA simple yet powerful native javascript plugin for a cool typewriter effect
t.js318over 5 years agoLightweight $.Hypertext.Typewriter
shuffle-text108about 2 years ago"shuffle-text" is JavaScript text effect library such as cool legacy of Flash
react-typewriter86almost 8 years agoA React component for creating typing animations
t-writer.js518almost 5 years agoNative typewriter effect, without compromises or dependencies
malarkey239over 5 years agoSimulate a typewriter effect in vanilla JavaScript
tinytyperA tiny library for creating a typing effect on specified text element
jquery.typer27over 13 years agoThe typewriter effect
Phaser-typewriter38about 9 years agoA phaser helper for the typewriter effect

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Transition Effect

transitions118over 6 years agoTransition effect for Cocos Creator
ModalWindowEffects1,010about 13 years agoA set of experimental modal window appearance effects with CSS transitions and animations
animated-transition-effects81over 10 years agoA library of animated transition effects, powered by CSS Animations
CSS3-hover-transition-effect3over 11 years agoCSS3-hover-transition-effect | Cipher trick
Html_Transition_Effect_Demo4about 12 years agoIt's pretty hover effects on circles with CSS Transitions which is very useful in dashboard
GlitchSlideshow115over 8 years agoA slideshow that uses a CSS glitch effect for slide transitions
image-mask-effect55almost 5 years agoAn immersive transition effect powered by image masks and CSS transforms
PageRevealEffects132over 10 years agoSome ideas for modern multi-layer page transitions using CSS Animations
ngView-animation-effects184over 11 years agoDemonstration of different animation effects with AngularJS ngView directive
WobblySlideshowEffect111almost 12 years agoThe 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

RainEffect1,621about 4 years agoSome experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber
aframe-rain41over 9 years agoaframe-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-rain437about 3 years agoThe famous Matrix rain effect of falling green characters in a terminal
Rainbow3over 13 years agoA text effect jquery plugin (tested with jQuery 1.6.3)
Snowstorm547over 4 years agoEnterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003
snowstorm223over 3 years agoA Snow Effect component for React. Uses Snowstorm under the hood
react-snow-effect4almost 10 years agoreact-snow-effect
snowy5over 11 years agoA HTML5 snow effect with random generated snow flakes
the-matrix-effect150over 6 years agoThe incredible effect of rain of letters in the style of the Matrix trilogy
smoke.js275about 6 years agoSmall but good javascript smoke effect

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Button Effect

MagneticButtons477over 5 years agoA set of buttons with a magnetic interaction and a hover effect
ElasticProgress873almost 11 years agoCreates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot
vue-particle-buttons262almost 2 years agoA bursting particles effects buttons component
nativescript-shine-button7over 7 years agoNativeScript plugin that add shine effect to your button
react-parallax-button12over 8 years agoBring your react buttons to next level with parallax effect
RippleButton2almost 7 years agoA Kony Visualizer reusable component of a button with a Material Theme ripple effect
css-ripple-effect342over 7 years agoPure CSS (no JavaScript) implementation of Android Material design "ripple" animation
ParticleEffectsButtons1,235about 2 years agoA 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

PageLoadingEffects646over 12 years agoModern ways of revealing new content using SVG animations
Asset-Loading-Effects103over 11 years agoLoading effects for assets including some built in animated reveals
fakeLoader723over 7 years agofakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect
LoadEffect2about 10 years agoDistributed Load Testing in Javascript-like Scripting Language
Whirl1,779over 3 years agoCSS loading animations with minimal effort!
three-dots1,328almost 3 years ago🔮 CSS loading animations made by single element
ArtWorx-xLoader20almost 10 years agoPure css cross-browser loading animations
css-page-loader9almost 4 years agoLightweight 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-Effects547about 2 years agoLive Audio Input effects
beez35over 12 years ago100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)
soundbank22over 11 years agoSimple Web Audio API based reverb effect
SoundEffectManager6about 11 years agoA simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API
soma-fm-player140over 3 years agoSomaFM Music Player Web-App

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / WebCam Effect

canvas-video-effects24over 13 years agoLive Image Processing w/ getUserMedia() & Web Workers
chroma-cam8about 13 years agoGreen screen effect in your webcam
webcam-effects2over 7 years agoWebcam Effects in Three.js
JS-Webcam-effects1over 8 years agoWebcam effects
expo-chroma-key-camera33about 5 years agoLive green-screen effect with Expo and THREE.js
chroma-key-camera33about 5 years agoLive green-screen effect with Expo and THREE.js
hypersampler6over 7 years agoHyhypeperersamamplplerer: a Spark AR camera effec
ChuckClose-SparkAR8almost 7 years agoA 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

bounty820over 2 years agoJavascript and SVG odometer effect library with motion blur
DistortedLinkEffects138over 6 years agoSome ideas for decorative link distortion effects using SVG filters
menu-animations173about 8 years agoFour different menu animations for menu button toggle between hamburger, cross and back icon
circle-svg-animation26almost 7 years agoCircle SVG Animation
OrganicShapeAnimations221about 9 years agoSome shape morphing hover effects on images using SVG clipPath
FancyLetterAnimation143almost 10 years agoAn experimental SVG letter animation inspired by the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett's. Powered by Julian Garnier's anime.js
IsometricCityAnimation21over 8 years agoThis is a simple svg isometric city animation with GSAP
lazy-line-painter1,975almost 3 years agoLazy Line Painter - A Modern JS library for SVG path animation
jquery-drawsvg773almost 10 years agoLightweight, simple to use jQuery plugin to animate SVG paths
svg-animation120about 10 years agoThe Illusion of Life: An SVG Animation Case Study

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Fireworks

fireworks151over 13 years agofireworks Particles engine in javascript
silly fireworks73about 15 years agoA silly JavaScript animation experiment, originally written in 2005
fireworks-webgl67almost 5 years agoWebGL + Web Audio API = Sound-driven fireworks!
fireworks-vr45over 6 years agoWebGL Fireworks with ThreeJS In action:
skyrocket12almost 9 years agoDesign and Display fireworks on HTML canvas with Skyrocket.js
cool-fireworks10about 3 years agoa particle fireworks effect

awesome-web-effect / 🚀 A series of exquisite and compact web page cool effects / Other Effect

lottie-sample14over 8 years agoDemo after effect animation on web using Lottie
webEffects1over 12 years agojQuery Parallax is a script that simulates the parallax effect as seen
MobileComponent7over 11 years agodynamic effect component on mobile web
frosted-glass65over 6 years agoAdd a live frosted glass blur effect over any type of web content, including text
pickout89about 9 years agoCool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped
dissolve-generator14about 6 years agoCool 2D dissolve effect generator
redux-reducer-side-effects3about 9 years agoEasy to follow side effect library for redux reducers
starry.night73almost 9 years agoThe Starry Night animation in put.io's hero banner
bad-tv-shader486about 7 years agoSimulates a bad TV via horizontal distortion and vertical roll
map-effects-100199about 10 years agoCool tips to design UI/UX on Leaflet maps
svg-Circus319almost 12 years agoCreate cool animated SVG spinners, loaders and other looped animations in seconds
jsfx578over 9 years agoThis is a JavaScript library for sound effect generation and is supported on most current browsers
aquarelle1,803almost 7 years agoAquarelle is a watercolor effect component
glitch197almost 10 years agoA glitched effect for DOM elements
spread91over 13 years agoSpread is a small experiment leveraging simple CSS3D transforms to create a colored plane
firealgorithm1,332almost 2 years agoA playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experiment with a Pull Request
EyeCandy45about 2 years agoAnimated images that are superficially attractive and entertaining but intellectually undemanding
animatelo489almost 4 years agoAnimatelo 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: