521 lines
24 KiB
HTML
521 lines
24 KiB
HTML
<h1 id="awesome-web-effect">awesome-web-effect</h1>
|
||
<p><a href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></p>
|
||
<h2 id="a-series-of-exquisite-and-compact-web-page-cool-effects">🚀 A
|
||
series of exquisite and compact web page cool effects</h2>
|
||
<p>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.</p>
|
||
<p>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.</p>
|
||
<figure>
|
||
<img
|
||
src="https://github.com/lindelof/awesome-web-effect/blob/master/banner.jpg?raw=true"
|
||
alt="img" />
|
||
<figcaption aria-hidden="true">img</figcaption>
|
||
</figure>
|
||
<h3 id="background-decoration">Background Decoration</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/lindelof/particles-bg">particles-bg</a>
|
||
- React component for particles backgrounds</li>
|
||
<li><a
|
||
href="https://github.com/lindelof/particles-bg-vue">particles-bg-vue</a>
|
||
- A vue.js particles animation background component. Use it to make your
|
||
website look cool.</li>
|
||
<li><a href="https://github.com/simeydotme/sparticles">sparticles</a> -
|
||
Vanilla particles which can be used in a background or in a container,
|
||
very fast and lightweight.</li>
|
||
<li><a
|
||
href="https://github.com/sirxemic/jquery.ripples">jquery.ripples</a> -
|
||
Add a water ripple effect to your background using WebGL.</li>
|
||
<li><a
|
||
href="https://github.com/codrops/MorphingBackgroundShapes">MorphingBackgroundShapes</a>
|
||
- A decorative website background effect where SVG shapes morph and
|
||
transform on scroll..</li>
|
||
<li><a href="https://github.com/codrops/SegmentEffect">SegmentEffect</a>
|
||
- Background image segment effect as seen on [Filippo Bello’s
|
||
Portfolio].</li>
|
||
<li><a
|
||
href="https://github.com/rewish/jquery-bgswitcher">jquery-bgswitcher</a>
|
||
- Switch the background-image with using effect.</li>
|
||
<li><a
|
||
href="https://github.com/codrops/BackgroundScaleHoverEffect">BackgroundScaleHoverEffect</a>
|
||
- Recreation of the background scale hover effect seen on the DDD Hotel
|
||
website using CSS clip paths.</li>
|
||
<li><a
|
||
href="https://github.com/codrops/ImageGridMotionEffect">ImageGridMotionEffect</a>
|
||
- A motion hover effect for a background grid of images..</li>
|
||
<li><a
|
||
href="https://github.com/briangonzalez/jquery.adaptive-backgrounds.js">jquery.adaptive-backgrounds.js</a>
|
||
- A simple jQuery plugin to extract the dominant color of an image and
|
||
apply it to the background of its parent element.</li>
|
||
<li><a
|
||
href="https://github.com/CodyHouse/fixed-background-effect">fixed-background-effect</a>
|
||
- A simple template that takes advantage of the background-attachment
|
||
CSS property to create a fixed background effect.</li>
|
||
<li><a
|
||
href="https://github.com/NiklasKnaack/jquery-warpdrive-plugin">jquery-warpdrive-plugin</a>
|
||
- Warp drive is a lightweight jQuery plugin that helps you create a
|
||
cool, interactive, configurable, HTML5 canvas based warp drive/starfield
|
||
effect.</li>
|
||
</ul>
|
||
<h3 id="mouse-effect">Mouse Effect</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/lindelof/react-mouse-particles">mouse-particles</a>
|
||
- AboutA mouse particle effect react component</li>
|
||
<li><a
|
||
href="https://github.com/codrops/ImageTrailEffects">ImageTrailEffects</a>
|
||
- A set of effects for mouse-following image trails that show a random
|
||
series of images.</li>
|
||
<li><a
|
||
href="https://github.com/akella/webgl-mouseover-effects">webgl-mouseover-effects</a>
|
||
- Demos for the tutorial on how to achieve an interactive
|
||
mouseover/hover effect</li>
|
||
<li><a
|
||
href="https://github.com/tholman/cursor-effects">cursor-effectss</a> -
|
||
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.</li>
|
||
<li><a
|
||
href="https://github.com/Isa2008/mouse-text-shadow">mouse-text-shadow</a>
|
||
- CSS shadow effect & JavaScript mouse move</li>
|
||
<li><a
|
||
href="https://github.com/moefyit/vuepress-plugin-cursor-effects">vuepress-plugin-cursor-effects</a>
|
||
- Add a cute click effect to your mouse in your vuepress!</li>
|
||
<li><a
|
||
href="https://github.com/putnamn21/jquery-animate3d">jquery-animate3d</a>
|
||
- jQuery plugin that gives elements a 3d mouse over effect</li>
|
||
<li><a
|
||
href="https://github.com/Halo-Lab/magneticHover">magneticHover</a> -
|
||
magneticHover lets you trigger hover effect on the element when the
|
||
cursor is near it, but not over it yet</li>
|
||
<li><a href="https://github.com/jonathandion/react-tilt">react-tilt</a>
|
||
- Parallax tilt hover effect for React JS - tilt.js</li>
|
||
<li><a href="https://github.com/ariona/hover3d">hover3d</a> - Simple
|
||
jQuery plugin for 3d Hover effect</li>
|
||
</ul>
|
||
<h3 id="css-3d-effect">Css 3D Effect</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/zachstronaut/quintessential-css-cube">quintessential-css-cube</a>
|
||
- The Quintessential Responsive 3D CSS Cube</li>
|
||
<li><a
|
||
href="https://github.com/falconmasters/Tarjetas-3D-con-HTML5-y-CSS3">Tarjetas-3D</a>
|
||
- Código del Tutorial de Tarjetas 3D usando HTML5 y CSS3</li>
|
||
<li><a
|
||
href="https://github.com/desandro/3dtransforms">3dtransforms-3D</a> -
|
||
Intro to CSS 3D transforms</li>
|
||
<li><a href="https://github.com/soulwire/Makisu">Makisu</a> - An
|
||
experimental CSS 3D dropdown concept, wrapped up in a jQuery
|
||
plugin.</li>
|
||
<li><a href="https://github.com/sparanoid/cube.less">cube.less</a> - 3D
|
||
(animated) cube using only CSS (Less), originally used by LeanCloud</li>
|
||
<li><a
|
||
href="https://github.com/Cordobo/pure-css-super-mario">super-mario</a> -
|
||
Pure CSS animated 3D Super Mario Icon</li>
|
||
<li><a href="https://github.com/unconed/CSS3D.js">CSS3D.js</a> - This
|
||
experimental renderer was built for the design of Acko.net. It lets you
|
||
manage simple CSS 3D objects using Three.js.</li>
|
||
<li><a
|
||
href="https://github.com/juliangarnier/3D-CSS-Solar-System">Solar-System</a>
|
||
- Solar System data visualisation done in HTML/CSS and a bit of
|
||
Javascript.</li>
|
||
<li><a
|
||
href="https://github.com/michaelbromley/css-space-shooter">css-space-shooter</a>
|
||
- An old-school arcade-style 3D shoot-em-up rendered entirely with CSS
|
||
3D transforms</li>
|
||
<li><a href="https://github.com/thomasxiii/photon">photon</a> - CSS 3D
|
||
Lighting Engine photon.attasi.com</li>
|
||
<li><a href="https://github.com/deathcap/gl-css3d">gl-css3d</a> -
|
||
Synchronize CSS 3D transformations to a WebGL scene</li>
|
||
</ul>
|
||
<h3 id="image-effect">Image Effect</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/ciar4n/imagehover.css">imagehover</a> -
|
||
Pure CSS Image Hover Effect Library</li>
|
||
<li><a
|
||
href="https://github.com/codrops/ImageTiltEffect">ImageTiltEffect</a> -
|
||
A subtle tilt effect for images. The idea is to move and rotate
|
||
semi-transparent copies with the same background</li>
|
||
<li><a href="https://github.com/mark-rolich/Magnifier.js">Magnifier</a>
|
||
- Javascript library enabling magnifying glass effect on an images</li>
|
||
<li><a
|
||
href="https://github.com/gre/gl-react-image-effects">gl-react-image-effects</a>
|
||
- universal image app that uses different gl-react components</li>
|
||
<li><a
|
||
href="https://github.com/Anemolo/StickyImageEffect">StickyImageEffect</a>
|
||
- A sticky image effect for a slideshow inspired by ultanoir’s
|
||
website.</li>
|
||
<li><a
|
||
href="https://github.com/lbebber/HeatDistortionEffect">HeatDistortionEffect</a>
|
||
- Animated haze distortion effect for images and text, with WebGL</li>
|
||
<li><a
|
||
href="https://github.com/codrops/ImageDraggingEffects">ImageDraggingEffects</a>
|
||
- A set of playful dragging effects for images using various
|
||
techniques..</li>
|
||
<li><a href="https://github.com/rewish/jquery-bgswitcher">bgswitcher</a>
|
||
- Switch the background-image with using effect.</li>
|
||
<li><a
|
||
href="https://github.com/codrops/FullImageReveal">FullImageReveal</a> -
|
||
A full image reveal effect with fancy thumbnail sliding.</li>
|
||
<li><a href="https://github.com/gre/diaporama">diaporama</a> - Diaporama
|
||
is an image/video/content slideshow engine providing high quality
|
||
animation effects including Kenburns effect and GLSL Transitions.</li>
|
||
<li><a href="https://github.com/bersLucas/FollowCursor">FollowCursor</a>
|
||
- Rotate elements to create a following effect</li>
|
||
<li><a
|
||
href="https://github.com/nHiRanZ/react-native-kenburns-view">react-native-kenburns-view</a>
|
||
- KenBurns Image Effect for React Native Applications</li>
|
||
<li><a href="https://github.com/rendro/vintageJS">vintageJS</a> - Add a
|
||
retro/vintage effect to images using the HTML5 canvas element</li>
|
||
<li><a
|
||
href="https://github.com/codrops/ThumbnailGridExpandingPreview">ThumbnailGridExpandingPreview</a>
|
||
- A tutorial on how to create a thumbnail grid with an expanding image
|
||
preview similar to the effect seen on Google Images.</li>
|
||
<li><a href="https://github.com/oriongunning/gridder">gridder</a> - A
|
||
jQuery plugin that displays a thumbnail grid expanding preview similar
|
||
to the effect seen on Google Images..</li>
|
||
<li><a
|
||
href="https://github.com/codrops/MotionTransitionEffect">MotionTransitionEffect</a>
|
||
- A speedy motion transition effect for an image slideshow.</li>
|
||
<li><a
|
||
href="https://github.com/peachananr/tiltedpage_scroll">tiltedpage_scroll</a>
|
||
- Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page
|
||
Scroll plugin</li>
|
||
</ul>
|
||
<h3 id="input-effect">Input Effect</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/lindelof/power-mode-input">power-mode-input</a>
|
||
- PowerModeInput can make your text input box more compelling</li>
|
||
<li><a
|
||
href="https://github.com/codrops/TextInputEffects">TextInputEffects</a>
|
||
- Simple styles and effects for enhancing text input interactions.</li>
|
||
<li><a
|
||
href="https://github.com/tameemsafi/typewriterjs">typewriterjs</a> - A
|
||
simple yet powerful native javascript plugin for a cool typewriter
|
||
effect.</li>
|
||
<li><a href="https://github.com/mntn-dev/t.js">t.js</a> - Lightweight
|
||
$.Hypertext.Typewriter</li>
|
||
<li><a href="https://github.com/ics-ikeda/shuffle-text">shuffle-text</a>
|
||
- “shuffle-text” is JavaScript text effect library such as cool legacy
|
||
of Flash.</li>
|
||
<li><a
|
||
href="https://github.com/ianbjorndilling/react-typewriter">react-typewriter</a>
|
||
- A React component for creating typing animations.</li>
|
||
<li><a href="https://github.com/ChrisCavs/t-writer.js">t-writer.js</a> -
|
||
Native typewriter effect, without compromises or dependencies.</li>
|
||
<li><a href="https://github.com/yuanqing/malarkey">malarkey</a> -
|
||
Simulate a typewriter effect in vanilla JavaScript.</li>
|
||
<li><a href="https://github.com/lourenc/tinytyper">tinytyper</a> - A
|
||
tiny library for creating a typing effect on specified text
|
||
element.</li>
|
||
<li><a href="https://github.com/yckart/jquery.typer.js">jquery.typer</a>
|
||
- The typewriter effect</li>
|
||
<li><a
|
||
href="https://github.com/netgfx/Phaser-typewriter">Phaser-typewriter</a>
|
||
- A phaser helper for the typewriter effect</li>
|
||
</ul>
|
||
<h3 id="transition-effect">Transition Effect</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/2youyou2/transitions">transitions</a> -
|
||
Transition effect for Cocos Creator</li>
|
||
<li><a
|
||
href="https://github.com/codrops/ModalWindowEffects">ModalWindowEffects</a>
|
||
- A set of experimental modal window appearance effects with CSS
|
||
transitions and animations.</li>
|
||
<li><a
|
||
href="https://github.com/CodyHouse/animated-transition-effects">animated-transition-effects</a>
|
||
- A library of animated transition effects, powered by CSS
|
||
Animations</li>
|
||
<li><a
|
||
href="https://github.com/Inaamhusain/CSS3-hover-transition-effect">CSS3-hover-transition-effect</a>
|
||
- CSS3-hover-transition-effect | Cipher trick</li>
|
||
<li><a
|
||
href="https://github.com/chauhanvipul87/Html_Transition_Effect_Demo">Html_Transition_Effect_Demo</a>
|
||
- It’s pretty hover effects on circles with CSS Transitions which is
|
||
very useful in dashboard.</li>
|
||
<li><a
|
||
href="https://github.com/codrops/GlitchSlideshow">GlitchSlideshow</a> -
|
||
A slideshow that uses a CSS glitch effect for slide transitions.</li>
|
||
<li><a
|
||
href="https://github.com/CodyHouse/image-mask-effect">image-mask-effect</a>
|
||
- An immersive transition effect powered by image masks and CSS
|
||
transforms.</li>
|
||
<li><a
|
||
href="https://github.com/codrops/PageRevealEffects">PageRevealEffects</a>
|
||
- Some ideas for modern multi-layer page transitions using CSS
|
||
Animations.</li>
|
||
<li><a
|
||
href="https://github.com/dfsq/ngView-animation-effects">ngView-animation-effects</a>
|
||
- Demonstration of different animation effects with AngularJS ngView
|
||
directive.</li>
|
||
<li><a
|
||
href="https://github.com/codrops/WobblySlideshowEffect">WobblySlideshowEffect</a>
|
||
- 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.</li>
|
||
</ul>
|
||
<h3 id="rain-snow">Rain & Snow</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/codrops/RainEffect">RainEffect</a> -
|
||
Some experimental rain and water drop effects in different scenarios
|
||
using WebGL, by Lucas Bebber.</li>
|
||
<li><a href="https://github.com/takahirox/aframe-rain">aframe-rain</a> -
|
||
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.</li>
|
||
<li><a href="https://github.com/nojvek/matrix-rain">matrix-rain</a> -
|
||
The famous Matrix rain effect of falling green characters in a
|
||
terminal</li>
|
||
<li><a href="https://github.com/DavianWolf/Rainbow.js">Rainbow</a> - A
|
||
text effect jquery plugin (tested with jQuery 1.6.3)</li>
|
||
<li><a href="https://github.com/scottschiller/Snowstorm">Snowstorm</a> -
|
||
Enterprise-grade JavaScript snow effect for the internets, setting CPUs
|
||
on fire worldwide every winter since 2003.</li>
|
||
<li><a href="https://github.com/burakcan/react-snowstorm">snowstorm</a>
|
||
- A Snow Effect component for React. Uses Snowstorm under the hood.</li>
|
||
<li><a
|
||
href="https://github.com/jungledre/react-snow-effect">react-snow-effect</a>
|
||
- react-snow-effect.</li>
|
||
<li><a href="https://github.com/fforw/snowy">snowy</a> - A HTML5 snow
|
||
effect with random generated snow flakes.</li>
|
||
<li><a
|
||
href="https://github.com/JefersonLucas/the-matrix-effect">the-matrix-effect</a>
|
||
- The incredible effect of rain of letters in the style of the Matrix
|
||
trilogy.</li>
|
||
<li><a href="https://github.com/bijection/smoke.js">smoke.js</a> - Small
|
||
but good javascript smoke effect</li>
|
||
</ul>
|
||
<h3 id="button-effect">Button Effect</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/codrops/MagneticButtons">MagneticButtons</a> -
|
||
A set of buttons with a magnetic interaction and a hover effect.</li>
|
||
<li><a
|
||
href="https://github.com/codrops/ElasticProgress">ElasticProgress</a> -
|
||
Creates a button that turns into a progress bar with a elastic effect.
|
||
Based on the Dribbble shot</li>
|
||
<li><a
|
||
href="https://github.com/dreambo8563/vue-particle-effect-buttons">vue-particle-buttons</a>
|
||
- A bursting particles effects buttons component</li>
|
||
<li><a
|
||
href="https://github.com/hamdiwanis/nativescript-shine-button">nativescript-shine-button</a>
|
||
- NativeScript plugin that add shine effect to your button.</li>
|
||
<li><a
|
||
href="https://github.com/venits/react-parallax-button">react-parallax-button</a>
|
||
- Bring your react buttons to next level with parallax effect.</li>
|
||
<li><a href="https://github.com/mig82/RippleButton">RippleButton</a> - A
|
||
Kony Visualizer reusable component of a button with a Material Theme
|
||
ripple effect.</li>
|
||
<li><a
|
||
href="https://github.com/mladenplavsic/css-ripple-effect">css-ripple-effect</a>
|
||
- Pure CSS (no JavaScript) implementation of Android Material design
|
||
“ripple” animation.</li>
|
||
<li><a
|
||
href="https://github.com/codrops/ParticleEffectsButtons">ParticleEffectsButtons</a>
|
||
- A little library that can be used for bursting particles effects on
|
||
buttons and other elements</li>
|
||
</ul>
|
||
<h3 id="loading-effect">Loading Effect</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/codrops/PageLoadingEffects">PageLoadingEffects</a>
|
||
- Modern ways of revealing new content using SVG animations.</li>
|
||
<li><a
|
||
href="https://github.com/ZachSaucier/Asset-Loading-Effects">Asset-Loading-Effects</a>
|
||
- Loading effects for assets including some built in animated
|
||
reveals</li>
|
||
<li><a
|
||
href="https://github.com/joaopereirawd/fakeLoader.js">fakeLoader</a> -
|
||
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.</li>
|
||
<li><a href="https://github.com/Auklets/LoadEffect">LoadEffect</a> -
|
||
Distributed Load Testing in Javascript-like Scripting Language.</li>
|
||
<li><a href="https://github.com/jh3y/whirl">Whirl</a> - CSS loading
|
||
animations with minimal effort!</li>
|
||
<li><a href="https://github.com/nzbin/three-dots">three-dots</a> - 🔮
|
||
CSS loading animations made by single element.</li>
|
||
<li><a
|
||
href="https://github.com/AnasTawfeek/ArtWorx-xLoader">ArtWorx-xLoader</a>
|
||
- Pure css cross-browser loading animations.</li>
|
||
<li><a
|
||
href="https://github.com/Viglino/css-page-loader">css-page-loader</a> -
|
||
Lightweight CSS loading animations to use when page loads</li>
|
||
</ul>
|
||
<h3 id="audio-effect">Audio Effect</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/cwilso/Audio-Input-Effects">Audio-Input-Effects</a>
|
||
- Live Audio Input effects</li>
|
||
<li><a href="https://github.com/gre/beez">beez</a> - 100% web real-time
|
||
audio experiment using smartphones as effect controller. (tech: Android
|
||
Chrome + WebRTC + Web Audio API)</li>
|
||
<li><a href="https://github.com/mmckegg/soundbank-reverb">soundbank</a>
|
||
- Simple Web Audio API based reverb effect.</li>
|
||
<li><a
|
||
href="https://github.com/HenrikJoreteg/SoundEffectManager">SoundEffectManager</a>
|
||
- A simple sound effect manager for playing sounds using the awesome
|
||
HTML 5 Web Audio API</li>
|
||
<li><a
|
||
href="https://github.com/rainner/soma-fm-player">soma-fm-player</a> -
|
||
SomaFM Music Player Web-App</li>
|
||
</ul>
|
||
<h3 id="webcam-effect">WebCam Effect</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/conorbuck/canvas-video-effects">canvas-video-effects</a>
|
||
- Live Image Processing w/ getUserMedia() & Web Workers</li>
|
||
<li><a href="https://github.com/rprieto/chroma-cam">chroma-cam</a> -
|
||
Green screen effect in your webcam</li>
|
||
<li><a
|
||
href="https://github.com/adamlamoglia/webcam-effects">webcam-effects</a>
|
||
- Webcam Effects in Three.js</li>
|
||
<li><a
|
||
href="https://github.com/Gixxern/JS---Webcam-effects">JS-Webcam-effects</a>
|
||
- Webcam effects</li>
|
||
<li><a
|
||
href="https://github.com/EvanBacon/expo-chroma-key-camera">expo-chroma-key-camera</a>
|
||
- Live green-screen effect with Expo and THREE.js</li>
|
||
<li><a
|
||
href="https://github.com/EvanBacon/expo-chroma-key-camera">chroma-key-camera</a>
|
||
- Live green-screen effect with Expo and THREE.js</li>
|
||
<li><a
|
||
href="https://github.com/positlabs/spark-hypersampler">hypersampler</a>
|
||
- Hyhypeperersamamplplerer: a Spark AR camera effec</li>
|
||
<li><a
|
||
href="https://github.com/kamend/ChuckClose-SparkAR">ChuckClose-SparkAR</a>
|
||
- A simple example how to use Visual Shaders with JS in Spark AR.</li>
|
||
</ul>
|
||
<h3 id="svg-animations">SVG Animations</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/coderitual/bounty">bounty</a> -
|
||
Javascript and SVG odometer effect library with motion blur</li>
|
||
<li><a
|
||
href="https://github.com/codrops/DistortedLinkEffects">DistortedLinkEffects</a>
|
||
- Some ideas for decorative link distortion effects using SVG
|
||
filters</li>
|
||
<li><a
|
||
href="https://github.com/tamino-martinius/ui-snippets-menu-animations">menu-animations</a>
|
||
- Four different menu animations for menu button toggle between
|
||
hamburger, cross and back icon.</li>
|
||
<li><a
|
||
href="https://github.com/crealime/circle-svg-animation">circle-svg-animation</a>
|
||
- Circle SVG Animation</li>
|
||
<li><a
|
||
href="https://github.com/codrops/OrganicShapeAnimations">OrganicShapeAnimations</a>
|
||
- Some shape morphing hover effects on images using SVG clipPath.</li>
|
||
<li><a
|
||
href="https://github.com/codrops/FancyLetterAnimation">FancyLetterAnimation</a>
|
||
- 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.</li>
|
||
<li><a
|
||
href="https://github.com/projapati66/Svg-IsometricCityAnimation">IsometricCityAnimation</a>
|
||
- This is a simple svg isometric city animation with GSAP</li>
|
||
<li><a
|
||
href="https://github.com/camoconnell/lazy-line-painter">lazy-line-painter</a>
|
||
- Lazy Line Painter - A Modern JS library for SVG path animation</li>
|
||
<li><a
|
||
href="https://github.com/lcdsantos/jquery-drawsvg">jquery-drawsvg</a> -
|
||
Lightweight, simple to use jQuery plugin to animate SVG paths</li>
|
||
<li><a
|
||
href="https://github.com/hellomichael/svg-animation">svg-animation</a> -
|
||
The Illusion of Life: An SVG Animation Case Study</li>
|
||
</ul>
|
||
<h3 id="fireworks">Fireworks</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/jeromeetienne/fireworks.js">fireworks</a> -
|
||
fireworks Particles engine in javascript</li>
|
||
<li><a href="https://github.com/scottschiller/fireworks.js">silly
|
||
fireworks</a> - A silly JavaScript animation experiment, originally
|
||
written in 2005.</li>
|
||
<li><a
|
||
href="https://github.com/ondras/fireworks-webgl">fireworks-webgl</a> -
|
||
WebGL + Web Audio API = Sound-driven fireworks!</li>
|
||
<li><a href="https://github.com/Lallassu/fireworks">fireworks-vr</a> -
|
||
WebGL Fireworks with ThreeJS In action:
|
||
https://qake.se/fw/index.html</li>
|
||
<li><a
|
||
href="https://github.com/zarocknz/javascript-skyrocket">skyrocket</a> -
|
||
Design and Display fireworks on HTML canvas with Skyrocket.js</li>
|
||
<li><a href="https://github.com/PixxxeL/js-fireworks">cool-fireworks</a>
|
||
- a particle fireworks effect.</li>
|
||
</ul>
|
||
<h3 id="other-effect">Other Effect</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/codeaholicguy/lottie-sample">lottie-sample</a>
|
||
- Demo after effect animation on web using Lottie</li>
|
||
<li><a href="https://github.com/AsmaBOUSSALEM/webEffects">webEffects</a>
|
||
- jQuery Parallax is a script that simulates the parallax effect as
|
||
seen</li>
|
||
<li><a
|
||
href="https://github.com/zhangmengxue/MobileComponent">MobileComponent</a>
|
||
- dynamic effect component on mobile web</li>
|
||
<li><a
|
||
href="https://github.com/adriancarriger/frosted-glass">frosted-glass</a>
|
||
- Add a live frosted glass blur effect over any type of web content,
|
||
including text.</li>
|
||
<li><a href="https://github.com/ktquez/pickout">pickout</a> - Cool and
|
||
powerful effect to select fields. Javascript vanilla and ~2kb
|
||
gzipped</li>
|
||
<li><a
|
||
href="https://github.com/transitive-bullshit/dissolve-generator">dissolve-generator</a>
|
||
- Cool 2D dissolve effect generator</li>
|
||
<li><a
|
||
href="https://github.com/danrigsby/redux-reducer-side-effects">redux-reducer-side-effects</a>
|
||
- Easy to follow side effect library for redux reducers</li>
|
||
<li><a
|
||
href="https://github.com/atesgoral/put.io.starry.night">starry.night</a>
|
||
- The Starry Night animation in put.io’s hero banner</li>
|
||
<li><a
|
||
href="https://github.com/felixturner/bad-tv-shader">bad-tv-shader</a> -
|
||
Simulates a bad TV via horizontal distortion and vertical roll.</li>
|
||
<li><a
|
||
href="https://github.com/muxlab/map-effects-100">map-effects-100</a> -
|
||
Cool tips to design UI/UX on Leaflet maps.</li>
|
||
<li><a href="https://github.com/alexk111/SVG-Circus">svg-Circus</a> -
|
||
Create cool animated SVG spinners, loaders and other looped animations
|
||
in seconds.</li>
|
||
<li><a href="https://github.com/loov/jsfx">jsfx</a> - This is a
|
||
JavaScript library for sound effect generation and is supported on most
|
||
current browsers.</li>
|
||
<li><a href="https://github.com/Ramotion/aquarelle">aquarelle</a> -
|
||
Aquarelle is a watercolor effect component.</li>
|
||
<li><a href="https://github.com/sjhewitt/glitch.js">glitch</a> - A
|
||
glitched effect for DOM elements.</li>
|
||
<li><a href="https://github.com/roboshoes/spread">spread</a> - Spread is
|
||
a small experiment leveraging simple CSS3D transforms to create a
|
||
colored plane.</li>
|
||
<li><a
|
||
href="https://github.com/filipedeschamps/doom-fire-algorithm">firealgorithm</a>
|
||
- A playground of experiments related to the Doom fire effect
|
||
implemented in JavaScript. Feel free to submit your experiment with a
|
||
Pull Request.</li>
|
||
<li><a href="https://github.com/mykle1/MMM-EyeCandy">EyeCandy</a> -
|
||
Animated images that are superficially attractive and entertaining but
|
||
intellectually undemanding.</li>
|
||
<li><a href="https://github.com/gibbok/animatelo">animatelo</a> -
|
||
Animatelo is a bunch of cool, fun, and cross-browser animations for you
|
||
to use in your projects</li>
|
||
</ul>
|
||
<h2 id="contribute">Contribute</h2>
|
||
<p>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.</p>
|
||
<h2 id="license">License</h2>
|
||
<p><a href="https://creativecommons.org/licenses/by/4.0/"><img
|
||
src="https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by.svg"
|
||
alt="CC-BY" /></a></p>
|
||
<p>This work is licensed under a <a
|
||
href="https://creativecommons.org/licenses/by/4.0/">Creative Commons
|
||
Attribution 4.0 International License</a>.</p>
|