Incredible New Web Animation

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.

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

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
Simon is a technologist with 19 years' experience in product, publishing, prop-tech, hi-ed, health-techs and large enterprise and digital executive strategy and scale teams.