update lists
This commit is contained in:
@@ -1,520 +0,0 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user