Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 6 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
      • 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
      • 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

    • 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

    • 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