129 Repositories
Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous
react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as
.qube Quintessential Responsive 3D CSS Cube Created by @zacharyjohnson — zachstronaut.com Hello web friend! The styles defined in "src/qube.css" provi
Easy Effect 🖖 Introduction Easy Effect is a WYSIWYG animation editor based on Lottie. ✨ Feature 🌈 ease to use Anyone who want to create an animation
jskidpix ✨ https://kidpix.app/ JS Kid Pix / Kid Pix 1.0 was released in to the public domain and this is an HTML/JS reimplementation. Guide Just like
beez 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API) The concept An Hive i
Glitch Slideshow A slideshow that uses the CSS Glitch Effect to transition between slides. Article on Codrops Demo Credits Images by Unsplash.com imag
Matrix Rain The famous Matrix rain effect of falling green characters in a terminal with node. Installation npm install -g matrix-rain Usage usage: m
O Efeito Matrix O incrível efeito da chuva de letras no estilo da trilogia Matrix. "Cedo ou tarde, você vai aprender, assim como eu aprendi, que exist
Fancy SVG Letter Animation An experimental SVG letter animation inspired by the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett's. Pow
Pure CSS ripple effect (no JavaScript) CSS-only implementation of Android Material design "ripple" animation on click event Main advantage of this sol
Aquarelle About This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites. Look
Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r
Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo
Remotion video A basic Typewriter template. video.mp4 Commands Install Dependencies npm i Start Preview npm start Render video npm run build Upgrade R
What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat
Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De
Image Dragging Effects A set of playful effects for dragging images. Article on Codrops Demo Installation Install dependencies: npm install Compile t
PowerModeInput PowerModeInput can make your text input box more compelling This project can make your input box lively. One day I saw a vscode plugin
T-Writer.js Native typewriter effect, without compromises or dependencies. See a demo for ideas/examples. Why Creating a custom typewriter effect can
react-typewriter A react component for animated typing text. Installation npm install --save react-typewriter Usage Pass in children to the TypeWrite
magneticHover magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet. Examples https://codesandbox
Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr
gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti
Makisu An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin. Check out the demo (you'll need a CSS 3D capable browser, such as Chrom
Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions
Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c
How to Create a Sticky Image Effect with Three.js A sticky image effect for a slideshow inspired by ultanoir's project showcase slideshow. Article on
malarkey Simulate a typewriter effect in vanilla JavaScript. Flexible API allowing granular control Option to repeat the sequence indefinitely Allows
🐥 小鸭子叫你喝水啦~~~ 在我们日常工作中,经常会因为长时间伏案工作而忘记了喝水或起来走动走动,扭扭腰。于是乎,我开发了一款提醒各位码友定时喝水的chrome插件,我亲切的称呼其为水货 😲 身体是革命的本钱,小鸭子为了让大家喝水也是操碎了心,请大家爱惜身体,悉心照顾好小鸭子~~~ 主要功能 小
Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac
Transitions This project is based on Cocos Creator 2.3.0. Online Demo : http://2youyou2.com/transitions Usage Add transitions node to the scene, the t
cube.less 3D (animated) cube using only CSS (LESS). Demo See this demo page. There's also a live production site (WIP) using these cubes. Install $ bo
Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp
vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel
Frosted Glass ❄️ Add a live frosted glass blur effect over any type of web content, including text. ️️ Demos Install npm install frosted-glass --save
svgAnimation.js is a Snap.svg plugin used to create complex animations from simple SVGs svgAnimation takes the complexity out of creating Snap.svg ani
jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all
Multi-Layer Page Reveal Effects Some ideas for modern multi-layer page transitions using CSS Animations. Article on Codrops Demo Sponsor Demo sponsore
Animated Heat Distortion Effects with WebGL A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on im
This is a JavaScript library for sound effect generation and is supported on most current browsers. Generation speed is approximately 1s audio = 10ms
3d-particle-mofing ● DEMO Usage Clone repository Install Node.js Create an .env file and copy the contents of .env-sample. Run following commands np
hydra as "sky" and "floor" of escher's another world 2 three.js and escher three.js model of escher's another world 2 TODO add code(mirror) editors fo
Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article
gl-css3d Synchronize CSS 3D transformations to a WebGL scene Usage: var createCSS3D = require('gl-css3d'); // pass an HTML DOM element node, such as
Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js
perParticles Performant Particles is a demo that was written to handle a comparatively large amount of particles without slowing down to the same degr
CSS Space Shooter Play The Game This is an experiment I made to investigate the capabilities of CSS 3D transforms. Having played about with this techn
vuepress-plugin-cursor-effects 🎉 Add a cute click effect to your mouse in your vuepress! Document: moefy-vuepress LiveDemo: notev Install yarn add vu
Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov
Map Effects 100 Map Effects 100 has cool tips to design UI/UX on your Map. Map? Leaflet Quick Start git clone https://github.com/muxlab/map-effects-10
pickout Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped. DEMO PAGE For syntax of the previous version click here How to
#Tilted Page Scroll by Pete R. Create a beautilful 3D tilted scrolling effect for your website with jQuery Tilted Page Scroll. Created by Pete R., Fou
react-native-kenburns-view KenBurns Image Effect for React Native. Based on Image Component Image Component. Version: 4.1.0 Tested on React Native 0.6