Giters

OlkaB / awesome-web-effect

A series of awesome little special effects

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

awesome-web-effect

🚀 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.

img

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.
  • 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.
  • RainEffect - Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

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

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

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

Transition Effect

Rain & Snow

  • 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.

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

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

CC-BY

This work is licensed under a Creative Commons Attribution 4.0 International License.

About

A series of awesome little special effects