Skip to content
49

awesome-web-effect

A series of exquisite and compact web page cool effects

3.2k stars201 forks142 entriesLast push Apr 12, 2021 (5 years ago)License none

This page lists names, links and short descriptions. The original list on GitHub is the source and belongs to its authors.

A series of exquisite and compact web page cool effects >Background Decoration

particles-bg

React component for particles backgrounds

In 3 lists

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.

In 2 lists

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.

A series of exquisite and compact web page cool effects >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.

In 2 lists

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

A series of exquisite and compact web page cool effects >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

In 2 lists

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

A series of exquisite and compact web page cool effects >Image Effect

imagehover

Pure CSS Image Hover Effect Library

In 2 lists

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

jquery-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

In 2 lists

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

In 2 lists

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

A series of exquisite and compact web page cool effects >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.

In 2 lists

t.js

Lightweight $.Hypertext.Typewriter

shuffle-text

"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

In 2 lists

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.

In 2 lists

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

A series of exquisite and compact web page cool effects >Transition Effect

transitions

Transition effect for Cocos Creator

ModalWindowEffects

A set of experimental modal window appearance effects with CSS transitions and animations.

animated-transition-effects

A library of animated transition effects, powered by CSS 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.

A series of exquisite and compact web page cool effects >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

A series of exquisite and compact web page cool effects >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

A series of exquisite and compact web page cool effects >Loading Effect

PageLoadingEffects

Modern ways of revealing new content using SVG animations.

In 2 lists

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.

In 3 lists

LoadEffect

Distributed Load Testing in Javascript-like Scripting Language.

Whirl

CSS loading animations with minimal effort!

In 2 lists

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

A series of exquisite and compact web page cool effects >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

A series of exquisite and compact web page cool effects >WebCam Effect

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

expo-chroma-key-camera

Live green-screen effect with Expo and THREE.js

hypersampler

Hyhypeperersamamplplerer: a Spark AR camera effec

ChuckClose-SparkAR

A simple example how to use Visual Shaders with JS in Spark AR.

A series of exquisite and compact web page cool effects >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

In 2 lists

svg-animation

The Illusion of Life: An SVG Animation Case Study

A series of exquisite and compact web page cool effects >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.

A series of exquisite and compact web page cool effects >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

See category
94

Awesome OpenClaw Skills

VoltAgent/awesome-openclaw-skills

The awesome collection of OpenClaw skills. 5,400+ skills filtered and categorized from the official OpenClaw Skills Registry.🦞

Fresh★ 53k830 entriesPushed today
92

Awesome DeepSeek Harness (DSH) Plugin

awesome-dsh-plugin/awesome-dsh-plugin

A curated list of plugins for DeepSeek Harness (dsh) · DeepSeek Harness 插件精选列表

Fresh★ 17k1654 entriesPushed today
91

Awesome Guidelines

Kristories/awesome-guidelines

Programming style, best practices, and coding conventions.

Fresh★ 11k166 entriesPushed 2 days ago
90

Awesome

sindresorhus/awesome

😎 Awesome lists about all kinds of interesting topics [NOTE: Pull requests are temporarily disabled until I have a chance to catch up with the existing ones]

Fresh★ 513k51 entriesPushed 28 days ago
90

Awesome Prompts

ai-boost/awesome-prompts

Curated list of chatgpt prompts from the top-rated GPTs in the GPTs Store. Prompt Engineering, prompt attack & prompt protect. Advanced Prompt Engineering papers.

Fresh★ 9k288 entriesPushed today
90

Awesome README

matiassingers/awesome-readme

A curated list of awesome READMEs

Fresh★ 22k143 entriesPushed yesterday