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