Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
fucking-awesome-web-effect
A series of exquisite and compact web page cool effects. With repository stars⭐ and forks🍴
https://github.com/Correia-jpv/fucking-awesome-web-effect
Last synced: 5 days ago
JSON representation
-
🚀 A series of exquisite and compact web page cool effects
-
Mouse Effect
- 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
- magneticHover - magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet
- webgl-mouseover-effects - Demos for the tutorial on how to achieve an interactive mouseover/hover 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.
- 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.
-
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
- 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
- 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.
-
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
- 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..
- 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.
- 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
- gridder - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images..
- bgswitcher - Switch the background-image with using effect.
- diaporama - Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions.
- gl-react-image-effects - universal image app that uses different gl-react components
- FullImageReveal - A full image reveal effect with fancy thumbnail sliding.
-
Input Effect
- power-mode-input - PowerModeInput can make your text input box more compelling
- 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.
- TextInputEffects - Simple styles and effects for enhancing text input interactions.
- typewriterjs - A simple yet powerful native javascript plugin for a cool typewriter effect.
- 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.
- 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.
- animated-transition-effects - A library of animated transition effects, powered by CSS Animations
-
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.
- 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
- LoadEffect - Distributed Load Testing in Javascript-like Scripting Language.
-
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.
- soma-fm-player - SomaFM Music Player Web-App
- SoundEffectManager - A simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API
-
Other Effect
- 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
- lottie-sample - Demo after effect animation on web using Lottie
- webEffects - jQuery Parallax is a script that simulates the parallax effect as seen
-
Background Decoration
- jquery.ripples - Add a water ripple effect to your background using WebGL.
- 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.
- SegmentEffect - Background image segment effect as seen on [Filippo Bello's Portfolio].
- particles-bg - React component for particles backgrounds
- MorphingBackgroundShapes - A decorative website background effect where SVG shapes morph and transform on scroll..
- 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.
-
WebCam Effect
- chroma-key-camera - Live green-screen effect with Expo and THREE.js
- 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
- 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
- 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.
-
-
Source
-
Other Effect
-
Programming Languages
Sub Categories
Keywords
javascript
18
css
10
animation
9
effects
5
particles
5
threejs
4
html
4
react
4
canvas
4
react-particles
3
typewriter
3
jquery
3
webgl
3
svg
3
slideshow
2
vue
2
demo
2
particle
2
typescript
2
html5
2
loading-animations
2
react-particle
2
jquery-plugin
2
javascript-library
2
less
2
hover
2
ui
2
effect
2
js
2
animations
2
promo
2
fireworks
2
vue-particles
2
html5-game
1
matrix
1
loading
1
button-animation
1
loader
1
hacktoberfest2020
1
css-loading-animations
1
anime
1
buttons
1
visualizer
1
spa
1
somafm
1
audio
1
three-dots
1
single-element-css-spinners
1
sass
1
whirl
1