x

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

apaas.dev
31 May 2022
SEO Title
awesome-web-effect

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


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

不限任何框架（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

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

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

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

标签

↑