73 Repositories
JavaScript hover-effects Libraries
jQuery Plugin for Ticker, News Ticker with Vertical, Horizontal, Marquee and Typewriting effects
AcmeTicker - News Ticker A very lightweight jQuery plugin for creating advanced news ticker. Demo: Gutentor News Ticker Ticker Type Vertical Horizonta
An easy to implement marquee JQuery plugin with pause on hover support. I know its easy because even I can use it.
Simple-Marquee Copyright (C) 2016 Fabian Valle An easy to implement marquee plugin. I know its easy because even I can use it. Forked from: https://gi
Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop.
MultiDeviceHover Pure JavaScript library that add .is-hover class instead of css :hover for mobile and desktop. Usage Install Using npm, install multi
Group together Tailwind CSS modifiers like focus, peer-checked, dark:hover and more with HTML attributes 👩🚀
Tailwind CSS Group Classes Group together Tailwind CSS modifiers like focus, peer-checked, dark:hover and more with HTML attributes 👩🚀 Using with a
A vanilla js library to show preview images on hover
Hover Preview A vanilla js library to show preview images on hover, check a Demo here Please watch 👀 or star 🌟 this repo if you like it. Getting sta
Motionity is a free and open source animation editor in the web
Motionity The web-based motion graphics editor for everyone 📽 Motionity is a free and open source animation editor in the web. It's a mix of After Ef
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
Vanilla JavaScript version of jquery-hoverIntent
sv-hover-intent sv-hover-intent is a JavaScript plugin for handling mouse hovers on a delay. It tracks when the mouse movement has slowed enough that
Tiny CSS framework with almost no classes and some pure CSS effects
no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no
Javascript library to animate images on hover.
Ripple Hover Effect Javascript library to animate images on hover. If this project help you, don't forget to star it. Codepen demo by Essam Abed Demo
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
A simple waves effect library
jquery-waves A simple & lightweight waves effect plugin Installation You can install jquery-waves plugin using npm or include directly files install u
A simple step by step tooltip helper for any site
Tooltip Sequence A minimalistic set of tooltips on your app. What it does So suppose you create a Web Application and you want to take your users or a
Autocomplete, diagnostics, hover info & more for the Wally package manager
Wally Utilities This VSCode extension provides some nice-to-haves when using the Wally package manager. The extension can be downloaded from the Visua
CSS3 Animations with special effects
🎩 magic CSS3 Animations with special effects. (→ 3.1 kB gzip) Demo Checkout the demo for the animations here Table of Contents Installation Getting S
A Simple jQuery Plugin for Animating Scroll
AnimateScroll A Simple jQuery Plugin for Animating the Scroll Demo can be seen at http://plugins.compzets.com/animatescroll What is it exactly? Animat
CSS3 list scroll effects
stroll.js – because it scrolls, and trolls. A collection of CSS list scroll effects. Works in browsers with support for CSS 3D transforms including a
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.
Intro iHover is a collection of hover effects using pure CSS, inspired by this codrops article, powered by Sass. Demo: https://gudh.github.io/ihover/d
Enable hover capabilities for Cypress. 🛸
cypress-hover 🛸 Enable hover capabilities for Cypress 🛸 with zero dependencies! 💯 Installation npm install cypress-hover Usage In your cypress/sup
🖱or ⌨️? 🤷♀️, but hopefully use-hover-state works on the "user intent" not the "device"
useHoverState() The one aware of keyboard navigation as well 😉 npm i use-hover-state A React hook for tracking user interaction with the DOM elements
A JavaScript library for adding ripple effects to HTML elements based on mouse events.
About project Ripplejs is an open source javascript library created for the purpose of adding ripple effects to html elements based on mouse events. L
A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.
Cuberto Mouse Follower A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website. Dependencies GSAP v3 (
A various color Matrix filters and Presets for pixi.js
Pixi Color Effects A various color Matrix filters for pixi.js with TON of presets! DEMO Install # npm npm install pixi-color-effects # yarn yarn add
An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.
Hover Preview Effect with Mini Map An experimental hover effect, where a content preview is shown while a mini map indicates the position of the curso
Easy Effect is a WYSIWYG Lottie animation editor, dedicated to helping you make dynamic effects easily.
Easy Effect 🖖 Introduction Easy Effect is a WYSIWYG animation editor based on Lottie. ✨ Feature 🌈 ease to use Anyone who want to create an animation
A community ran noodle effects library developed for remapper.
The all around modchart helper that contains functions and utilities created by the community. These scripts are designed to be used with Remapper. Ch
Spotify radio is an audio streaming app where you can add effects in real time.
Spotify Radio - Semana JS Expert 6.0 Spotify radio is an audio streaming app where you can add effects in real time. JS-Expert Project of the Week by
Generate sound effects and background music for good old-fashioned mini-games
Generate sound effects and background music for good old-fashioned mini-games
Etch-a-Sketch - Resizable grids that change color when you hover over it
Etch-a-sketch This repository contains a basic resizable grid which changes its
🧱 Easily extend native three.js materials with modular and composable shader units and effects
three-extended-material Easily extend native three.js materials with modular and composable shader units and effects. Usage npm install three-extended
Little app for live coding effects for Matt Parker's xmas tree thing
Xmas Tree Lights App Little app for live coding and exporting effects for Matt Parker's Xmas tree experiment (2021 edition). You can check this out on
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
Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
lax.js Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. DEMO What's new w
A JavaScript API for drawing unconventional text effects on the web.
A JavaScript API for drawing unconventional text effects on the web. Home — Help Overview When applying effects to text on the web, designers have tra
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
Atropos - Stunning touch-friendly 3D parallax hover effects
Atropos Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for J
Vue-cursor-fx - 🖱 An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible
🎉 Vue Cursor Fx An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible Installation This package is a
Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.
Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless View Demo: slickscroll.musabhassan.com Momentum Scroll
TypeWriter - Create easily a TypeWriter effect for your website
TypeWriter Create easily a TypeWriter effect for your website Written by Luuk Walstra Discord: Luuk#8524 Github: https://github.com/Luuk-Dev Replit: h
Imagable - Create, Edit, Optimize And Add Effects to Images
Imagable Imagable is an open-source image editor build on top of Typescript and Node.js. We serve with next-gen tools and filters and effects to make
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat
Amazing-Js-Projects
Amazing-Js-Projects This project is a part of the following Open Source Program Levels & Points Level Points Level 0 5 Level 1 10 Level 2 20 Level 3 4
Adding volumetric effects to a built-in Three.js shader.
Magical Marbles in Three.js Adding volumetric effects to a built-in Three.js shader. Article on Codrops Demo Installation Install dependencies: yarn
Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.
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
A preview component of the creator with more information on hover.
vue-creator-preview Introduction A preview component of the creator with more information on hover. Checkout the Demo here. Installation Install using
Javascript Sound Effect Generator
This is a JavaScript library for sound effect generation and is supported on most current browsers. Generation speed is approximately 1s audio = 10ms
Cool tips to design UI/UX on Leaflet maps.
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
Some shape morphing hover effects on images using SVG clipPath.
Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js
Some ideas for decorative link distortion effects using SVG filters.
Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De
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
Loading effects for assets including some built in animated reveals
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
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 bursting particles effects buttons component ✨💥❄️🌋
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
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
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
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
"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
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
image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.
Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions
A set of playful dragging effects for images using various techniques.
Image Dragging Effects A set of playful effects for dragging images. Article on Codrops Demo Installation Install dependencies: npm install Compile t
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
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
👓 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
magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet
magneticHover magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet. Examples https://codesandbox
:tada: Add a cute click effect to your mouse in your vuepress!
vuepress-plugin-cursor-effects 🎉 Add a cute click effect to your mouse in your vuepress! Document: moefy-vuepress LiveDemo: notev Install yarn add vu
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
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 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 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
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
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
add some slide effects.
slidr.js A simple, lightweight javascript library for adding slide transitions to your page. No dependencies required. Tested on Chrome 26.0, Firefox
Makes typing in input fields fun with CSS3 effects
Fancy Input Makes typing & deleting in input/Textarea fields exciting & fun with CSS3 effects. View Demo Page Basic use example: !-- ...previous page