├── .github
└── FUNDING.yml
├── README.md
└── banner.jpg
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: Correia-jpv
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # awesome-web-effect
2 |
3 | [](https://github.com/sindresorhus/awesome)
4 |
5 | ## 🚀 A series of exquisite and compact web page cool effects
6 |
7 | 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.
8 |
9 | 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.
10 |
11 | 
12 |
13 |
14 | ### Background Decoration
15 |
16 | - 666⭐ 97🍴 [particles-bg](https://github.com/lindelof/particles-bg)) - React component for particles backgrounds
17 | - 233⭐ 17🍴 [particles-bg-vue](https://github.com/lindelof/particles-bg-vue)) - A vue.js particles animation background component. Use it to make your website look cool.
18 | - 262⭐ 21🍴 [sparticles](https://github.com/simeydotme/sparticles)) - Vanilla particles which can be used in a background or in a container, very fast and lightweight.
19 | - 1085⭐ 425🍴 [jquery.ripples](https://github.com/sirxemic/jquery.ripples)) - Add a water ripple effect to your background using WebGL.
20 | - 393⭐ 68🍴 [MorphingBackgroundShapes](https://github.com/codrops/MorphingBackgroundShapes)) - A decorative website background effect where SVG shapes morph and transform on scroll..
21 | - 540⭐ 120🍴 [SegmentEffect](https://github.com/codrops/SegmentEffect)) - Background image segment effect as seen on [Filippo Bello's Portfolio].
22 | - 194⭐ 74🍴 [jquery-bgswitcher](https://github.com/rewish/jquery-bgswitcher)) - Switch the background-image with using effect.
23 | - 119⭐ 31🍴 [BackgroundScaleHoverEffect](https://github.com/codrops/BackgroundScaleHoverEffect)) - Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
24 | - 145⭐ 21🍴 [ImageGridMotionEffect](https://github.com/codrops/ImageGridMotionEffect)) - A motion hover effect for a background grid of images..
25 | - 6518⭐ 452🍴 [jquery.adaptive-backgrounds.js](https://github.com/briangonzalez/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.
26 | - 53⭐ 9🍴 [fixed-background-effect](https://github.com/CodyHouse/fixed-background-effect)) - A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.
27 | - 65⭐ 23🍴 [jquery-warpdrive-plugin](https://github.com/NiklasKnaack/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.
28 |
29 |
30 | ### Mouse Effect
31 | - 113⭐ 5🍴 [mouse-particles](https://github.com/lindelof/react-mouse-particles)) - AboutA mouse particle effect react component
32 | - 222⭐ 55🍴 [ImageTrailEffects](https://github.com/codrops/ImageTrailEffects)) - A set of effects for mouse-following image trails that show a random series of images.
33 | - 373⭐ 65🍴 [webgl-mouseover-effects](https://github.com/akella/webgl-mouseover-effects)) - Demos for the tutorial on how to achieve an interactive mouseover/hover effect
34 | - 3619⭐ 264🍴 [cursor-effectss](https://github.com/tholman/cursor-effects)) - 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.
35 | - 4⭐ 0🍴 [mouse-text-shadow](https://github.com/Isa2008/mouse-text-shadow)) - CSS shadow effect & JavaScript mouse move
36 | - 23⭐ 1🍴 [vuepress-plugin-cursor-effects](https://github.com/moefyit/vuepress-plugin-cursor-effects)) - Add a cute click effect to your mouse in your vuepress!
37 | - 2⭐ 1🍴 [jquery-animate3d](https://github.com/putnamn21/jquery-animate3d)) - jQuery plugin that gives elements a 3d mouse over effect
38 | - 41⭐ 4🍴 [magneticHover](https://github.com/Halo-Lab/magneticHover)) - magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet
39 | - 433⭐ 29🍴 [react-tilt](https://github.com/jonathandion/react-tilt)) - Parallax tilt hover effect for React JS - tilt.js
40 | - 334⭐ 107🍴 [hover3d](https://github.com/ariona/hover3d)) - Simple jQuery plugin for 3d Hover effect
41 |
42 | ### Css 3D Effect
43 | - 67⭐ 8🍴 [quintessential-css-cube](https://github.com/zachstronaut/quintessential-css-cube)) - The Quintessential Responsive 3D CSS Cube
44 | - 16⭐ 12🍴 [Tarjetas-3D](https://github.com/falconmasters/Tarjetas-3D-con-HTML5-y-CSS3)) - Código del Tutorial de Tarjetas 3D usando HTML5 y CSS3
45 | - 1014⭐ 162🍴 [3dtransforms-3D](https://github.com/desandro/3dtransforms)) - Intro to CSS 3D transforms
46 | - 1526⭐ 351🍴 [Makisu](https://github.com/soulwire/Makisu)) - An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.
47 | - 56⭐ 9🍴 [cube.less](https://github.com/sparanoid/cube.less)) - 3D (animated) cube using only CSS (Less), originally used by LeanCloud
48 | - 14⭐ 2🍴 [super-mario](https://github.com/Cordobo/pure-css-super-mario)) - Pure CSS animated 3D Super Mario Icon
49 | - 367⭐ 57🍴 [CSS3D.js](https://github.com/unconed/CSS3D.js)) - This experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js.
50 | - 443⭐ 138🍴 [Solar-System](https://github.com/juliangarnier/3D-CSS-Solar-System)) - Solar System data visualisation done in HTML/CSS and a bit of Javascript.
51 | - 179⭐ 37🍴 [css-space-shooter](https://github.com/michaelbromley/css-space-shooter)) - An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms
52 | - 1449⭐ 114🍴 [photon](https://github.com/thomasxiii/photon)) - CSS 3D Lighting Engine photon.attasi.com
53 | - 33⭐ 6🍴 [gl-css3d](https://github.com/deathcap/gl-css3d)) - Synchronize CSS 3D transformations to a WebGL scene
54 |
55 | ### Image Effect
56 | - 1836⭐ 232🍴 [imagehover](https://github.com/ciar4n/imagehover.css)) - Pure CSS Image Hover Effect Library
57 | - 572⭐ 95🍴 [ImageTiltEffect](https://github.com/codrops/ImageTiltEffect)) - A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background
58 | - 835⭐ 192🍴 [Magnifier](https://github.com/mark-rolich/Magnifier.js)) - Javascript library enabling magnifying glass effect on an images
59 | - 221⭐ 26🍴 [gl-react-image-effects](https://github.com/gre/gl-react-image-effects)) - universal image app that uses different gl-react components
60 | - 229⭐ 52🍴 [StickyImageEffect](https://github.com/Anemolo/StickyImageEffect)) - A sticky image effect for a slideshow inspired by ultanoir's website.
61 | - 301⭐ 67🍴 [HeatDistortionEffect](https://github.com/lbebber/HeatDistortionEffect)) - Animated haze distortion effect for images and text, with WebGL
62 | - 79⭐ 19🍴 [ImageDraggingEffects](https://github.com/codrops/ImageDraggingEffects)) - A set of playful dragging effects for images using various techniques..
63 | - 194⭐ 74🍴 [bgswitcher](https://github.com/rewish/jquery-bgswitcher)) - Switch the background-image with using effect.
64 | - 165⭐ 36🍴 [FullImageReveal](https://github.com/codrops/FullImageReveal)) - A full image reveal effect with fancy thumbnail sliding.
65 | - 794⭐ 102🍴 [diaporama](https://github.com/gre/diaporama)) - Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions.
66 | - 11⭐ 2🍴 [FollowCursor](https://github.com/bersLucas/FollowCursor)) - Rotate elements to create a following effect
67 | - 58⭐ 17🍴 [react-native-kenburns-view](https://github.com/nHiRanZ/react-native-kenburns-view)) - KenBurns Image Effect for React Native Applications
68 | - 843⭐ 116🍴 [vintageJS](https://github.com/rendro/vintageJS)) - Add a retro/vintage effect to images using the HTML5 canvas element
69 | - 359⭐ 142🍴 [ThumbnailGridExpandingPreview](https://github.com/codrops/ThumbnailGridExpandingPreview)) - A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
70 | - 460⭐ 127🍴 [gridder](https://github.com/oriongunning/gridder)) - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images..
71 | - 57⭐ 15🍴 [MotionTransitionEffect](https://github.com/codrops/MotionTransitionEffect)) - A speedy motion transition effect for an image slideshow.
72 | - 323⭐ 135🍴 [tiltedpage_scroll](https://github.com/peachananr/tiltedpage_scroll)) - Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin
73 |
74 | ### Input Effect
75 | - 92⭐ 7🍴 [power-mode-input](https://github.com/lindelof/power-mode-input)) - PowerModeInput can make your text input box more compelling
76 | - 966⭐ 172🍴 [TextInputEffects](https://github.com/codrops/TextInputEffects)) - Simple styles and effects for enhancing text input interactions.
77 | - 2599⭐ 232🍴 [typewriterjs](https://github.com/tameemsafi/typewriterjs)) - A simple yet powerful native javascript plugin for a cool typewriter effect.
78 | - 317⭐ 56🍴 [t.js](https://github.com/mntn-dev/t.js)) - Lightweight $.Hypertext.Typewriter
79 | - 114⭐ 16🍴 [shuffle-text](https://github.com/ics-ikeda/shuffle-text)) - "shuffle-text" is JavaScript text effect library such as cool legacy of Flash.
80 | - 87⭐ 37🍴 [react-typewriter](https://github.com/ianbjorndilling/react-typewriter)) - A React component for creating typing animations.
81 | - 516⭐ 27🍴 [t-writer.js](https://github.com/ChrisCavs/t-writer.js)) - Native typewriter effect, without compromises or dependencies.
82 | - 238⭐ 17🍴 [malarkey](https://github.com/yuanqing/malarkey)) - Simulate a typewriter effect in vanilla JavaScript.
83 | - ?⭐ ?🍴 [tinytyper](https://github.com/lourenc/tinytyper)) - A tiny library for creating a typing effect on specified text element.
84 | - 27⭐ 7🍴 [jquery.typer](https://github.com/yckart/jquery.typer.js)) - The typewriter effect
85 | - 39⭐ 8🍴 [Phaser-typewriter](https://github.com/netgfx/Phaser-typewriter)) - A phaser helper for the typewriter effect
86 |
87 | ### Transition Effect
88 | - 119⭐ 71🍴 [transitions](https://github.com/2youyou2/transitions)) - Transition effect for Cocos Creator
89 | - 1013⭐ 236🍴 [ModalWindowEffects](https://github.com/codrops/ModalWindowEffects)) - A set of experimental modal window appearance effects with CSS transitions and animations.
90 | - 82⭐ 25🍴 [animated-transition-effects](https://github.com/CodyHouse/animated-transition-effects)) - A library of animated transition effects, powered by CSS Animations
91 | - 3⭐ 0🍴 [CSS3-hover-transition-effect](https://github.com/Inaamhusain/CSS3-hover-transition-effect)) - CSS3-hover-transition-effect | Cipher trick
92 | - 4⭐ 0🍴 [Html_Transition_Effect_Demo](https://github.com/chauhanvipul87/Html_Transition_Effect_Demo)) - It's pretty hover effects on circles with CSS Transitions which is very useful in dashboard.
93 | - 116⭐ 31🍴 [GlitchSlideshow](https://github.com/codrops/GlitchSlideshow)) - A slideshow that uses a CSS glitch effect for slide transitions.
94 | - 55⭐ 12🍴 [image-mask-effect](https://github.com/CodyHouse/image-mask-effect)) - An immersive transition effect powered by image masks and CSS transforms.
95 | - 134⭐ 45🍴 [PageRevealEffects](https://github.com/codrops/PageRevealEffects)) - Some ideas for modern multi-layer page transitions using CSS Animations.
96 | - 184⭐ 54🍴 [ngView-animation-effects](https://github.com/dfsq/ngView-animation-effects)) - Demonstration of different animation effects with AngularJS ngView directive.
97 | - 111⭐ 30🍴 [WobblySlideshowEffect](https://github.com/codrops/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.
98 |
99 | ### Rain & Snow
100 | - 1651⭐ 289🍴 [RainEffect](https://github.com/codrops/RainEffect)) - Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
101 | - 41⭐ 6🍴 [aframe-rain](https://github.com/takahirox/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.
102 | - 444⭐ 39🍴 [matrix-rain](https://github.com/nojvek/matrix-rain)) - The famous Matrix rain effect of falling green characters in a terminal
103 | - 3⭐ 2🍴 [Rainbow](https://github.com/DavianWolf/Rainbow.js)) - A text effect jquery plugin (tested with jQuery 1.6.3)
104 | - 550⭐ 144🍴 [Snowstorm](https://github.com/scottschiller/Snowstorm)) - Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.
105 | - 223⭐ 24🍴 [snowstorm](https://github.com/burakcan/react-snowstorm)) - A Snow Effect component for React. Uses Snowstorm under the hood.
106 | - 4⭐ 6🍴 [react-snow-effect](https://github.com/jungledre/react-snow-effect)) - react-snow-effect.
107 | - 5⭐ 0🍴 [snowy](https://github.com/fforw/snowy)) - A HTML5 snow effect with random generated snow flakes.
108 | - 152⭐ 41🍴 [the-matrix-effect](https://github.com/JefersonLucas/the-matrix-effect)) - The incredible effect of rain of letters in the style of the Matrix trilogy.
109 | - 279⭐ 80🍴 [smoke.js](https://github.com/bijection/smoke.js)) - Small but good javascript smoke effect
110 |
111 | ### Button Effect
112 | - 480⭐ 92🍴 [MagneticButtons](https://github.com/codrops/MagneticButtons)) - A set of buttons with a magnetic interaction and a hover effect.
113 | - 876⭐ 90🍴 [ElasticProgress](https://github.com/codrops/ElasticProgress)) - Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot
114 | - 264⭐ 23🍴 [vue-particle-buttons](https://github.com/dreambo8563/vue-particle-effect-buttons)) - A bursting particles effects buttons component
115 | - 7⭐ 1🍴 [nativescript-shine-button](https://github.com/hamdiwanis/nativescript-shine-button)) - NativeScript plugin that add shine effect to your button.
116 | - 13⭐ 2🍴 [react-parallax-button](https://github.com/venits/react-parallax-button)) - Bring your react buttons to next level with parallax effect.
117 | - 2⭐ 1🍴 [RippleButton](https://github.com/mig82/RippleButton)) - A Kony Visualizer reusable component of a button with a Material Theme ripple effect.
118 | - 345⭐ 110🍴 [css-ripple-effect](https://github.com/mladenplavsic/css-ripple-effect)) - Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation.
119 | - 1251⭐ 151🍴 [ParticleEffectsButtons](https://github.com/codrops/ParticleEffectsButtons)) - A little library that can be used for bursting particles effects on buttons and other elements
120 |
121 | ### Loading Effect
122 | - 647⭐ 110🍴 [PageLoadingEffects](https://github.com/codrops/PageLoadingEffects)) - Modern ways of revealing new content using SVG animations.
123 | - 105⭐ 8🍴 [Asset-Loading-Effects](https://github.com/ZachSaucier/Asset-Loading-Effects)) - Loading effects for assets including some built in animated reveals
124 | - 723⭐ 269🍴 [fakeLoader](https://github.com/joaopereirawd/fakeLoader.js)) - 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.
125 | - 2⭐ 6🍴 [LoadEffect](https://github.com/Auklets/LoadEffect)) - Distributed Load Testing in Javascript-like Scripting Language.
126 | - 1820⭐ 257🍴 [Whirl](https://github.com/jh3y/whirl)) - CSS loading animations with minimal effort!
127 | - 1341⭐ 131🍴 [three-dots](https://github.com/nzbin/three-dots)) - 🔮 CSS loading animations made by single element.
128 | - 21⭐ 7🍴 [ArtWorx-xLoader](https://github.com/AnasTawfeek/ArtWorx-xLoader)) - Pure css cross-browser loading animations.
129 | - 9⭐ 6🍴 [css-page-loader](https://github.com/Viglino/css-page-loader)) - Lightweight CSS loading animations to use when page loads
130 |
131 | ### Audio Effect
132 | - 553⭐ 190🍴 [Audio-Input-Effects](https://github.com/cwilso/Audio-Input-Effects)) - Live Audio Input effects
133 | - 35⭐ 8🍴 [beez](https://github.com/gre/beez)) - 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)
134 | - 22⭐ 4🍴 [soundbank](https://github.com/mmckegg/soundbank-reverb)) - Simple Web Audio API based reverb effect.
135 | - 6⭐ 4🍴 [SoundEffectManager](https://github.com/HenrikJoreteg/SoundEffectManager)) - A simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API
136 | - 142⭐ 34🍴 [soma-fm-player](https://github.com/rainner/soma-fm-player)) - SomaFM Music Player Web-App
137 |
138 | ### WebCam Effect
139 | - 24⭐ 6🍴 [canvas-video-effects](https://github.com/conorbuck/canvas-video-effects)) - Live Image Processing w/ getUserMedia() & Web Workers
140 | - 8⭐ 3🍴 [chroma-cam](https://github.com/rprieto/chroma-cam)) - Green screen effect in your webcam
141 | - 2⭐ 1🍴 [webcam-effects](https://github.com/adamlamoglia/webcam-effects)) - Webcam Effects in Three.js
142 | - 1⭐ 0🍴 [JS-Webcam-effects](https://github.com/Gixxern/JS---Webcam-effects)) - Webcam effects
143 | - 33⭐ 5🍴 [expo-chroma-key-camera](https://github.com/EvanBacon/expo-chroma-key-camera)) - Live green-screen effect with Expo and THREE.js
144 | - 33⭐ 5🍴 [chroma-key-camera](https://github.com/EvanBacon/expo-chroma-key-camera)) - Live green-screen effect with Expo and THREE.js
145 | - 6⭐ 0🍴 [hypersampler](https://github.com/positlabs/spark-hypersampler)) - Hyhypeperersamamplplerer: a Spark AR camera effec
146 | - 8⭐ 5🍴 [ChuckClose-SparkAR](https://github.com/kamend/ChuckClose-SparkAR)) - A simple example how to use Visual Shaders with JS in Spark AR.
147 |
148 | ### SVG Animations
149 | - 820⭐ 51🍴 [bounty](https://github.com/coderitual/bounty)) - Javascript and SVG odometer effect library with motion blur
150 | - 140⭐ 21🍴 [DistortedLinkEffects](https://github.com/codrops/DistortedLinkEffects)) - Some ideas for decorative link distortion effects using SVG filters
151 | - 174⭐ 9🍴 [menu-animations](https://github.com/tamino-martinius/ui-snippets-menu-animations)) - Four different menu animations for menu button toggle between hamburger, cross and back icon.
152 | - 26⭐ 2🍴 [circle-svg-animation](https://github.com/crealime/circle-svg-animation)) - Circle SVG Animation
153 | - 221⭐ 52🍴 [OrganicShapeAnimations](https://github.com/codrops/OrganicShapeAnimations)) - Some shape morphing hover effects on images using SVG clipPath.
154 | - 143⭐ 38🍴 [FancyLetterAnimation](https://github.com/codrops/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.
155 | - 21⭐ 6🍴 [IsometricCityAnimation](https://github.com/projapati66/Svg-IsometricCityAnimation)) - This is a simple svg isometric city animation with GSAP
156 | - 1976⭐ 322🍴 [lazy-line-painter](https://github.com/camoconnell/lazy-line-painter)) - Lazy Line Painter - A Modern JS library for SVG path animation
157 | - 772⭐ 138🍴 [jquery-drawsvg](https://github.com/lcdsantos/jquery-drawsvg)) - Lightweight, simple to use jQuery plugin to animate SVG paths
158 | - 119⭐ 12🍴 [svg-animation](https://github.com/hellomichael/svg-animation)) - The Illusion of Life: An SVG Animation Case Study
159 |
160 | ### Fireworks
161 | - 151⭐ 36🍴 [fireworks](https://github.com/jeromeetienne/fireworks.js)) - fireworks Particles engine in javascript
162 | - 74⭐ 30🍴 [silly fireworks](https://github.com/scottschiller/fireworks.js)) - A silly JavaScript animation experiment, originally written in 2005.
163 | - 68⭐ 20🍴 [fireworks-webgl](https://github.com/ondras/fireworks-webgl)) - WebGL + Web Audio API = Sound-driven fireworks!
164 | - 46⭐ 16🍴 [fireworks-vr](https://github.com/Lallassu/fireworks)) - WebGL Fireworks with ThreeJS In action: https://qake.se/fw/index.html
165 | - 12⭐ 2🍴 [skyrocket](https://github.com/zarocknz/javascript-skyrocket)) - Design and Display fireworks on HTML canvas with Skyrocket.js
166 | - 10⭐ 6🍴 [cool-fireworks](https://github.com/PixxxeL/js-fireworks)) - a particle fireworks effect.
167 |
168 | ### Other Effect
169 | - 14⭐ 3🍴 [lottie-sample](https://github.com/codeaholicguy/lottie-sample)) - Demo after effect animation on web using Lottie
170 | - 1⭐ 0🍴 [webEffects](https://github.com/AsmaBOUSSALEM/webEffects)) - jQuery Parallax is a script that simulates the parallax effect as seen
171 | - 7⭐ 3🍴 [MobileComponent](https://github.com/zhangmengxue/MobileComponent)) - dynamic effect component on mobile web
172 | - 65⭐ 6🍴 [frosted-glass](https://github.com/adriancarriger/frosted-glass)) - Add a live frosted glass blur effect over any type of web content, including text.
173 | - 90⭐ 16🍴 [pickout](https://github.com/ktquez/pickout)) - Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped
174 | - 15⭐ 1🍴 [dissolve-generator](https://github.com/transitive-bullshit/dissolve-generator)) - Cool 2D dissolve effect generator
175 | - 3⭐ 0🍴 [redux-reducer-side-effects](https://github.com/danrigsby/redux-reducer-side-effects)) - Easy to follow side effect library for redux reducers
176 | - 76⭐ 9🍴 [starry.night](https://github.com/atesgoral/put.io.starry.night)) - The Starry Night animation in put.io's hero banner
177 | - 494⭐ 46🍴 [bad-tv-shader](https://github.com/felixturner/bad-tv-shader)) - Simulates a bad TV via horizontal distortion and vertical roll.
178 | - 199⭐ 46🍴 [map-effects-100](https://github.com/muxlab/map-effects-100)) - Cool tips to design UI/UX on Leaflet maps.
179 | - 325⭐ 35🍴 [svg-Circus](https://github.com/alexk111/SVG-Circus)) - Create cool animated SVG spinners, loaders and other looped animations in seconds.
180 | - 579⭐ 49🍴 [jsfx](https://github.com/loov/jsfx)) - This is a JavaScript library for sound effect generation and is supported on most current browsers.
181 | - 1810⭐ 106🍴 [aquarelle](https://github.com/Ramotion/aquarelle)) - Aquarelle is a watercolor effect component.
182 | - 196⭐ 26🍴 [glitch](https://github.com/sjhewitt/glitch.js)) - A glitched effect for DOM elements.
183 | - 91⭐ 16🍴 [spread](https://github.com/roboshoes/spread)) - Spread is a small experiment leveraging simple CSS3D transforms to create a colored plane.
184 | - 1364⭐ 288🍴 [firealgorithm](https://github.com/filipedeschamps/doom-fire-algorithm)) - A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experiment with a Pull Request.
185 | - 48⭐ 14🍴 [EyeCandy](https://github.com/mykle1/MMM-EyeCandy)) - Animated images that are superficially attractive and entertaining but intellectually undemanding.
186 | - 492⭐ 39🍴 [animatelo](https://github.com/gibbok/animatelo)) - Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects
187 |
188 |
189 | ## Contribute
190 | 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.
191 |
192 | ## License
193 |
194 | [](https://creativecommons.org/licenses/by/4.0/)
195 |
196 | This work is licensed under a 🌎 [Creative Commons Attribution 4.0 International License](creativecommons.org/licenses/by/4.0/).
197 |
198 | ## Source
199 | 2933⭐ 187🍴 [lindelof/awesome-web-effect](https://github.com/lindelof/awesome-web-effect))
--------------------------------------------------------------------------------
/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Correia-jpv/fucking-awesome-web-effect/34e127c11c2d59feba59efb2512b28c5f34087c5/banner.jpg
--------------------------------------------------------------------------------