Filter By
129 Repositories
JavaScript Effect
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.
90's Cursor Effects "Knowing the codes" used to be all the rage, I want to bring a few back. A repo of the old effects that inspired creativity and th
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
Thumbnail Grid with Expanding Preview A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Googl
Simple styles and effects for enhancing text input interactions.
Text Input Effects Simple styles and effects for enhancing text input interactions. Article on Codrops Demo Integrate or build upon it for free in you
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops
A simple yet powerful native javascript plugin for a cool typewriter effect.
TypewriterJS v2 NPM Repository JSFiddle Example Emoji Example CDN You can use the CDN version of this plugin for fast and easy setup. script src="htt
CSS loading animations with minimal effort!
Whirl CSS loading animations with minimal effort! whirl is a curation of CSS loading animations(whirls! 😅 ). It started as a drop in CSS file to get
Simple jQuery plugin for 3d Hover effect
jQuery Hover3d jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015
Lazy Line Painter - A Modern JS library for SVG path animation
Lazy Line Painter lazylinepainter.info A Modern JS library for SVG path animation Getting Started | Documentation | Examples | Lazy Line Composer Gett
Very simple threejs boilerplate in VanillaJS to start your projects. There is only a basic scene, a load model method and a simple webpack.
Ektogamat ThreeJS Boilerplate by Anderson Mancini Introduction This is a three.js starter project with only 120 lines. But why create another threejs
:package: Introduction to CSS 3D transforms
Intro to CSS 3D transforms By David DeSandro 3dtransforms.desandro.com Tutorial, examples, and discussion all about CSS 3D transforms. Originally writ
Playground for the fire effect from DOOM. Really simple algorithm and all experiments are welcome!
Doom Fire Algorithm Playground A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experim
A little library that can be used for bursting particles effects on buttons and other elements
Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle
A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects
gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti
Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw
Elastic Progress Creates a button that turns into a progress bar with a elastic effect. Based on a Dribbble shot by xjw. By Lucas Bebber. Article on C
A motion hover effect for a background grid of images.
Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install
A JavaScript Typing Animation Library
Live Demo | View All Demos | View Full Docs | mattboldt.com Typed.js is a library that types. Enter in any string, and watch it type at the speed you'
Demonstration of different animation effects with AngularJS ngView directive.
ngView-animation-effects This is a simple demonstration of how easy you can make your ngView directive transition pages with nice animations. All you
Switch the background-image with using effect.
jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage div class="box" pLorem ip
Modern ways of revealing new content using SVG animations.
Page Loading Effects Modern ways of revealing new content using SVG animations. Article on Codrops Demo Integrate or build upon it for free in your pe
Add a water ripple effect to your background using WebGL.
jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug
🧞♂️ Your magic WebGL carpet
⚠️ ⚠️ BETA! ⚠️ ⚠️ (Most likely I won't maintain this...) 🧞♂️ Aladino – your magic WebGL carpet Aladino is a tiny (around ~5kb gzipped) and dependenc
A beautiful 3D Earth 🌏
Language: English | 中文简体 3D Earth is a beautiful component of earth flying line based on threejs look： Install npm install 3d-earth or yarn add 3d
🔮 CSS loading animations made by single element.
Three Dots The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only
Lightweight, High Performance Particles in Canvas
Sparticles https://sparticlesjs.dev Lightweight, High Performance Particles in Canvas. For those occasions when you 👏 just 👏 gotta 👏 have 👏 sparkl
imagesLoaded - JavaScript is all like "You images done yet or what?"
imagesLoaded JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded.
Animated images that are superficially attractive and entertaining but intellectually undemanding. Cool as all hell though!
MMM-EyeCandy Animated images that are superficially attractive and entertaining but intellectually undemanding. Add some EyeCandy to your mirror. Some
Small but good javascript smoke effect 🌬💨
Demo You can play with a live demo here → Installation Basic Copy the smoke.js file into your project and use it with a script tag: script src="smoke
A set of effects for mouse-following image trails that show a random series of images.
Image Trail Effects A set of effects for mouse-following image trails that show a random series of images. Inspired by the effect seen on VLNC Studio.
A collection of demo variations, ideas, concepts & experiments.
Codrops Sketches A collection of demo variations, ideas, raw concepts & experiments. Demos 2022 Sketch 001: Repetition Hover Effect (Round) Sketch 002
Demos for the tutorial on how to achieve an interactive mouseover/hover effect
Interactive Hover Effects with Three.js A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps. Articl
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.
JParticles · 中文 | English 官网：jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles（JavaScript Particles 的缩写）是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr
This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channels API endpoint to pull in a list of stations and makes it easy to switch between stations. This app also uses Three.js and the HTML5 Web Audio Context API to sample audio data and create a visualizer effect for the selected station.
SomaFM Music Player Web-App This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channe
Javascript and SVG odometer effect library with motion blur
SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti
A tiny javascript library for obfuscating and revealing text in DOM elements
baffle.js A tiny javascript library for obfuscating and revealing text in DOM elements. camwiegert.github.io/baffle ~1.8kb gzipped ⚡ Dependency-free ?
A decorative website background effect where SVG shapes morph and transform on scroll.
Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is
Add a retro/vintage effect to images using the HTML5 canvas element
vintageJS Add a retro/vintage effect to images using the HTML5 canvas element. Installation $ npm install vintagejs How to use vintagejs is a functio
A vue.js particles animation background component
particles-bg-vue A vue.js particles animation background component. Use it to make your website look cool. Check it out if you want to use it in React
React particles animation background component
particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com
Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.
/** * DHTML Snowstorm! JavaScript-based Snow for web pages * -------------------------------------------------------- * Version 1.44.20131208 (Prev
"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.
ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install script src="shuffle-text.js"/script NPM In
A set of buttons with a magnetic interaction and a hover effect.
Magnetic Buttons A small set of magnetic buttons with some fun hover animations. Inspired by the button animation seen on Cuberto. Article on Codrops
Create cool animated SVG spinners, loaders and other looped animations in seconds
SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG
👓 Parallax tilt hover effect for React JS - tilt.js
React.js - Tilt.js React version of tilt.js Demo https://vx-demo.now.sh/gallery Install yarn: yarn add react-tilt npm: npm install --save react-tilt U
Javascript library to draw and animate images on hover
Hover effect Javascript library to draw and animate images on hover. If this project help you, you like this library or you just want to thank me, you
A vanishing effect for particles and magic lovers using Threejs, GSAP and custom shaders.
Three.js Experiment - Vanishing Suzanne Demo version Get started First, you need nodejs on your computer to build the assets. Install dependencies: np
A library for pretty shadows.
shine.js A library for pretty shadows. See the working demo at http://bigspaceship.github.io/shine.js/. Get Started Install using bower: bower install
Live input Web Audio effects
Live Audio Input effects I whipped this app up to test live audio input, letting the user select a few common tunable effects and see (and hear) the e
⌨️ Lightweight $.Hypertext.Typewriter
⚠️ iOS 13.3 note (April 2020) beep[:true] freezes the typewriter, read more: issue #11 Nice features 👌 full HTML support beep-beep Hypertypin' Markup
🦎 A jQuery plugin for extracting the dominant color from images and applying the color to their parent.
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.
Pure CSS Image Hover Effect Library
imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable
BadTV Effect for Three.js
Bad TV Shader for Three.js Simulates a bad TV via horizontal distortion and vertical roll. Screenshot Demo View Demo Uniforms time steadily increasing
Lightweight, simple to use jQuery plugin to animate SVG paths
jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using
A full image reveal effect with fancy thumbnail sliding.
Full Image Reveal Effect A full image reveal effect with fancy thumbnail sliding. Article on Codrops Demo Credits Images from Unsplash.com TweenMax by