【web效果】令人敬畏的web效果

一系列精致小巧的网页炫酷效果

这就像在房间里装饰一棵美丽的圣诞树。 有时一个带有炫酷效果的小网页会让你的项目大放异彩。 这是一个非常有趣的系列，我想收集页面上常见的那些很酷的效果。

不限任何框架（react、vue、angular等），只要能简单插入页面的效果，都可以发给我，我喜欢，希望你也喜欢。

Background Decoration

• particles-bg - React component for particles backgrounds
• particles-bg-vue - A vue.js particles animation background component. Use it to make your website look cool.
• sparticles - Vanilla particles which can be used in a background or in a container, very fast and lightweight.
• jquery.ripples - Add a water ripple effect to your background using WebGL.
• MorphingBackgroundShapes - A decorative website background effect where SVG shapes morph and transform on scroll..
• SegmentEffect - Background image segment effect as seen on [Filippo Bello's Portfolio].
• jquery-bgswitcher - Switch the background-image with using effect.
• BackgroundScaleHoverEffect - Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
• ImageGridMotionEffect - A motion hover effect for a background grid of images..
• 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 - A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.
• 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 - AboutA mouse particle effect react component
• ImageTrailEffects - A set of effects for mouse-following image trails that show a random series of images.
• webgl-mouseover-effects - Demos for the tutorial on how to achieve an interactive mouseover/hover effect
• cursor-effectss - 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 - CSS shadow effect & JavaScript mouse move
• vuepress-plugin-cursor-effects - Add a cute click effect to your mouse in your vuepress!
• jquery-animate3d - jQuery plugin that gives elements a 3d mouse over effect
• magneticHover - magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet
• react-tilt - Parallax tilt hover effect for React JS - tilt.js
• hover3d - Simple jQuery plugin for 3d Hover effect

Css 3D Effect

• quintessential-css-cube - The Quintessential Responsive 3D CSS Cube
• Tarjetas-3D - Código del Tutorial de Tarjetas 3D usando HTML5 y CSS3
• 3dtransforms-3D - Intro to CSS 3D transforms
• Makisu - An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.
• cube.less - 3D (animated) cube using only CSS (Less), originally used by LeanCloud
• super-mario - Pure CSS animated 3D Super Mario Icon
• 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 - Solar System data visualisation done in HTML/CSS and a bit of Javascript.
• css-space-shooter - An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms
• photon - CSS 3D Lighting Engine photon.attasi.com
• gl-css3d - Synchronize CSS 3D transformations to a WebGL scene

Image Effect

• imagehover - Pure CSS Image Hover Effect Library
• ImageTiltEffect - A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background
• Magnifier - Javascript library enabling magnifying glass effect on an images
• gl-react-image-effects - universal image app that uses different gl-react components
• StickyImageEffect - A sticky image effect for a slideshow inspired by ultanoir's website.
• HeatDistortionEffect - Animated haze distortion effect for images and text, with WebGL
• ImageDraggingEffects - A set of playful dragging effects for images using various techniques..
• bgswitcher - Switch the background-image with using effect.
• FullImageReveal - A full image reveal effect with fancy thumbnail sliding.
• diaporama - Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions.
• FollowCursor - Rotate elements to create a following effect
• react-native-kenburns-view - KenBurns Image Effect for React Native Applications
• vintageJS - Add a retro/vintage effect to images using the HTML5 canvas element
• ThumbnailGridExpandingPreview - A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
• gridder - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images..
• MotionTransitionEffect - A speedy motion transition effect for an image slideshow.
• tiltedpage_scroll - Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin

Input Effect

• power-mode-input - PowerModeInput can make your text input box more compelling
• TextInputEffects - Simple styles and effects for enhancing text input interactions.
• typewriterjs - A simple yet powerful native javascript plugin for a cool typewriter effect.
• t.js - Lightweight $.Hypertext.Typewriter
• shuffle-text - "shuffle-text" is JavaScript text effect library such as cool legacy of Flash.
• react-typewriter - A React component for creating typing animations.
• t-writer.js - Native typewriter effect, without compromises or dependencies.
• malarkey - Simulate a typewriter effect in vanilla JavaScript.
• tinytyper - A tiny library for creating a typing effect on specified text element.
• jquery.typer - The typewriter effect
• Phaser-typewriter - A phaser helper for the typewriter effect

Transition Effect

• transitions - Transition effect for Cocos Creator
• ModalWindowEffects - A set of experimental modal window appearance effects with CSS transitions and animations.
• animated-transition-effects - A library of animated transition effects, powered by CSS Animations
• CSS3-hover-transition-effect - CSS3-hover-transition-effect | Cipher trick
• Html_Transition_Effect_Demo - It's pretty hover effects on circles with CSS Transitions which is very useful in dashboard.
• GlitchSlideshow - A slideshow that uses a CSS glitch effect for slide transitions.
• image-mask-effect - An immersive transition effect powered by image masks and CSS transforms.
• PageRevealEffects - Some ideas for modern multi-layer page transitions using CSS Animations.
• ngView-animation-effects - Demonstration of different animation effects with AngularJS ngView directive.
• 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 - Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
• 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 - The famous Matrix rain effect of falling green characters in a terminal
• Rainbow - A text effect jquery plugin (tested with jQuery 1.6.3)
• Snowstorm - Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.
• snowstorm - A Snow Effect component for React. Uses Snowstorm under the hood.
• react-snow-effect - react-snow-effect.
• snowy - A HTML5 snow effect with random generated snow flakes.
• the-matrix-effect - The incredible effect of rain of letters in the style of the Matrix trilogy.
• smoke.js - Small but good javascript smoke effect

Button Effect

• MagneticButtons - A set of buttons with a magnetic interaction and a hover effect.
• ElasticProgress - Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot
• vue-particle-buttons - A bursting particles effects buttons component
• nativescript-shine-button - NativeScript plugin that add shine effect to your button.
• react-parallax-button - Bring your react buttons to next level with parallax effect.
• RippleButton - A Kony Visualizer reusable component of a button with a Material Theme ripple effect.
• css-ripple-effect - Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation.
• ParticleEffectsButtons - A little library that can be used for bursting particles effects on buttons and other elements

Loading Effect

• PageLoadingEffects - Modern ways of revealing new content using SVG animations.
• Asset-Loading-Effects - Loading effects for assets including some built in animated reveals
• fakeLoader - 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 - Distributed Load Testing in Javascript-like Scripting Language.
• Whirl - CSS loading animations with minimal effort!
• three-dots - 🔮 CSS loading animations made by single element.
• ArtWorx-xLoader - Pure css cross-browser loading animations.
• css-page-loader - Lightweight CSS loading animations to use when page loads

Audio Effect

• Audio-Input-Effects - Live Audio Input effects
• beez - 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)
• soundbank - Simple Web Audio API based reverb effect.
• SoundEffectManager - A simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API
• soma-fm-player - SomaFM Music Player Web-App

WebCam Effect

• canvas-video-effects - Live Image Processing w/ getUserMedia() & Web Workers
• chroma-cam - Green screen effect in your webcam
• webcam-effects - Webcam Effects in Three.js
• JS-Webcam-effects - Webcam effects
• expo-chroma-key-camera - Live green-screen effect with Expo and THREE.js
• chroma-key-camera - Live green-screen effect with Expo and THREE.js
• hypersampler - Hyhypeperersamamplplerer: a Spark AR camera effec
• ChuckClose-SparkAR - A simple example how to use Visual Shaders with JS in Spark AR.

SVG Animations

• bounty - Javascript and SVG odometer effect library with motion blur
• DistortedLinkEffects - Some ideas for decorative link distortion effects using SVG filters
• menu-animations - Four different menu animations for menu button toggle between hamburger, cross and back icon.
• circle-svg-animation - Circle SVG Animation
• OrganicShapeAnimations - Some shape morphing hover effects on images using SVG clipPath.
• 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 - This is a simple svg isometric city animation with GSAP
• lazy-line-painter - Lazy Line Painter - A Modern JS library for SVG path animation
• jquery-drawsvg - Lightweight, simple to use jQuery plugin to animate SVG paths
• svg-animation - The Illusion of Life: An SVG Animation Case Study

Fireworks

• fireworks - fireworks Particles engine in javascript
• silly fireworks - A silly JavaScript animation experiment, originally written in 2005.
• fireworks-webgl - WebGL + Web Audio API = Sound-driven fireworks!
• fireworks-vr - WebGL Fireworks with ThreeJS In action: https://qake.se/fw/index.html
• skyrocket - Design and Display fireworks on HTML canvas with Skyrocket.js
• cool-fireworks - a particle fireworks effect.

Other Effect

• lottie-sample - Demo after effect animation on web using Lottie
• webEffects - jQuery Parallax is a script that simulates the parallax effect as seen
• MobileComponent - dynamic effect component on mobile web
• frosted-glass - Add a live frosted glass blur effect over any type of web content, including text.
• pickout - Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped
• dissolve-generator - Cool 2D dissolve effect generator
• redux-reducer-side-effects - Easy to follow side effect library for redux reducers
• starry.night - The Starry Night animation in put.io's hero banner
• bad-tv-shader - Simulates a bad TV via horizontal distortion and vertical roll.
• map-effects-100 - Cool tips to design UI/UX on Leaflet maps.
• svg-Circus - Create cool animated SVG spinners, loaders and other looped animations in seconds.
• jsfx - This is a JavaScript library for sound effect generation and is supported on most current browsers.
• aquarelle - Aquarelle is a watercolor effect component.
• glitch - A glitched effect for DOM elements.
• spread - Spread is a small experiment leveraging simple CSS3D transforms to create a colored plane.
• firealgorithm - A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experiment with a Pull Request.
• EyeCandy - Animated images that are superficially attractive and entertaining but intellectually undemanding.
• animatelo - Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects

原文：https://github.com/lindelof/awesome-web-effect