Javascript library to draw and animate images on hover

Related tags

Slider hover-effect
Overview

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 can give me a cup of coffee or a beer ūüćļ

paypal

DEMO

ARTICLE

Example

example 1 example 2

Use locally

To load the images you'll need to view the demo via a web server, simply go to the demo's folder location and type python -m SimpleHTTPServer 8000 in your terminal. Then access the demo in your browser by typing: localhost:8000

Basic usage

This helper needs Three.js and TweenMax to do the transition, so you need to include it before this little helper.

Then you only need a div element in HTML to start animating things with a piece of code like this:

<!-- Div to draw the effect -->
<div class="my-div"></div>

<!-- library needed -->
<script src="three.min.js"></script>
<script src="TweenMax.min.js"></script>

<script src="dist/hover.umd.js"></script>
<script>
    var myAnimation = new hoverEffect({
        parent: document.querySelector('.my-div'),
        intensity: 0.3,
        image1: 'images/myImage1.jpg',
        image2: 'images/myImage2.jpg',
        displacementImage: 'images/myDistorsionImage.png'
    });
</script>

Node JS usage

This helper can also be used in node js environments. Three.js and TweenMax scripts are included as dependencies in the package so you don't need to manually include them.

Install

npm install hover-effect

Import

import hoverEffect from 'hover-effect'

Init

Initialize just as you would in the basic usage example above.

Options

Mandatory parameters

Name Type Default Description
parent Dom element null The DOM element where the animation will be injected. The images of the animation will take the parent's size.
image1 Image null The first Image of the animation.
image2 Image null The second Image of the animation.
displacementImage Image null The Image used to do the transition between the 2 main images.

Optional parameters

Name Type Default Description
intensity Float 1 Used to determine the intensity of the distortion effect. 0 is no effect and 1 is full distortion.
intensity1 Float intensity Overrides the distortion intensity of the first image.
intensity2 Float intensity Overrides the distortion intensity of the second image.
angle Float Math.PI / 4 Angle of the distortion effect in Radians. Defaults to Pi / 4 (45 degrees).
angle1 Float angle Overrides the distortion angle for the first image.
angle2 Float -angle * 3 Overrides the distortion angle for the second image.
speedIn Float 1.6 Speed of the inbound animation (in seconds).
speedOut Float 1.2 Speed of the outbound animation (in seconds).
hover Boolean true if set to false the animation will not be triggered on hover (see next and previous function to interact)
easing String Expo.easeOut Easing of the transition, see greensock easing
video Boolean false Defines if you want to use videos instead of images (note: you need 2 videos, it doesn't work with one image and one video.)
imagesRatio Float 1 Specify a value if you want a background: cover type of behaviour, otherwise it will apply a square aspect ratio. usage: image height / image width example: 1080 / 1920

Methods

Name Description
next Transition to the second image.
previous Transition to the first image.

Credits

Thanks to :

Made with it

Alex Brown demo

Comments
  • Aspect ratio of image

    Aspect ratio of image

    Hello. Is it possible to respect aspect ratio of image, inside of three scene. Or to make image behavior similar to object-fit: cover? For the purpose of percent width container

    opened by kierok 9
  • relative path to local images is not working

    relative path to local images is not working

    Hi.

    Congratulations for the tool!! Is so amazing.

    I'm with problem. Relative path to local images is not working.

    Exemple:

    new hoverEffect({ parent: document.querySelector('.ticket'), intensity1: 0.1, intensity2: 0.1, // angle2: Math.PI / 2, image1: "../images/balloon.jpg",

    I imported the lib imagesloaded, but not working. Only function with images uploaded from websites.

    opened by JulioCVaz 3
  • Disable hover effect

    Disable hover effect

    Hey,

    After using .next(); (as per #4) to animate the effect document load, I'm now hoping to prevent any more transitions when hovering over this particular element.

    Effectively I'm hoping to achieve:

    • A user enters website and the animation (using .next()) takes place once.
    • When the user hovers on/off the element after the above, I don't want the animation to take place.

    Is there some way of easily destroying/preventing hover-effect, i.e. after an interval?

    I need the image (2nd) to still be visible, just no hovering effects.

    Thank you and kindest regards, Elliott

    opened by elliott-impression 3
  • Using with dynamic element.

    Using with dynamic element.

    Hi. I'm trying to use the effect with elements in the data attributes. The problem is that while the images are changing the effect isn't shown.

    temp site: https://kolorlab.pl/brk/pl/o-nas

    I'm using this with tiny slider as follows.

     docum document.querySelectorAll('.goto-next-button').forEach( button => {
                button.onclick = function () {
                    let info = slider.getInfo(),
                        indexPrev = info.indexCached,
                        items = info.slideItems,
                        count = info.slideCount,
                        indexCurrent = info.index; // int
    
                        console.log(indexCurrent)
    
                        let current = items[indexCurrent].dataset.backgroundImage;
                        let next = items[indexCurrent+1].dataset.backgroundImage;
    
                        console.log(current,next);
    
                    displaceAnimation(current,next);
                    slider.goTo('next');
                    return false;
                }
            });
    
            document.querySelectorAll('.goto-prev-button').forEach( button => {
                button.onclick = function () {
                    let info = slider.getInfo(),
                        indexPrev = info.indexCached,
                        items = info.slideItems,
                        count = info.slideCount,
                        indexCurrent = info.index; // int
                        console.log(indexCurrent)
    
                        let current = items[indexCurrent].dataset.backgroundImage;
                        let next = items[indexCurrent-1].dataset.backgroundImage;
    
                    displaceAnimation(current,next);
                    slider.goTo('prev');
                    return false;
                }
            });
    

    I've also tried to preload the images but with no luck.

    I'm using a cms so the user can add as many slides in the future as he wants, I also used the hover version from https://github.com/robin-dela/hover-effect

    Edit: The issue was not calling the transition functions.

    opened by adamo 2
  • canvas defaults height to 0

    canvas defaults height to 0

    Hi,

    I'm trying to implement this helper in WP on a site using elementor. I copy pasted the example code to test and only changed the imgs, displacement img paths. Yet the canvas that's generated always has 0 height.

    If i add a canvas element inside the div, it works. However, i end up with 2 canvas elements creating a white space above the auto-generated canvas which contains the images and hovering on that space changes images as well...

    Any guidance is much appreciated.

    Thanks

    opened by MrBushid0 2
  • Images don't showing up

    Images don't showing up

    I did everthing correct and still images don't showing up. In my js file I have few errors and also in the hoffer-effect.umd.js are many errors. Someone know how to fix it?

    opened by olafsulich 2
  • Images not showing on Chrome or Safari

    Images not showing on Chrome or Safari

    Hello,

    I would really love to use this feature on my portfolio site but when I download the files and view the examples on Chrome and Safari the images do not show. They show in Firefox though... The CodePen example you posted doesn't work on Chrome either.

    opened by jcbbuller 2
  • Force hover on-load

    Force hover on-load

    Hey,

    I am trying to use reuse this fantastic hover-effect solution so that rather than on hover, I get the same effect on page load. A similar example (without the slider) would be: https://yard.agency/en.

    My initial thought would be to force hover on the element, using jQuery methods like below:

    // 01. Document ready
    $(document).ready(function(){
            $("figure.my-element").trigger('mouseenter');
    });
    
    // 02. Window load
    $(window).load(function(){
            $("figure.my-element").trigger('mouseenter');
    });
    
    // 03. Timeout
    setTimeout(function(){
            $("figure.my-element").trigger('mouseenter');
    }, 2000);
    

    Unfortunately, none of the above appear to work, and I wonder if you can shed a simple solution that will help me achieve this load-in effect.

    Thank you and great job!

    opened by elliott-impression 2
  • Improvements and optimizations

    Improvements and optimizations

    Hi!

    I stumbled upon the effect on Codrops, and thought it was neat though I noticed there are some things that could use optimization... and while I was at it, I added some new capabilities.

    Optimizations:

    • The mobile check was completely removed, since most of those browsers are legacy enough to not support WebGL anyway. Instead, the events are registered for both mouse and touch events. This way, weird configurations like "Android with a mouse" are also supported.
    • Instead of re-rendering all images at 60 FPS even if they haven't changed, TweenMax's onUpdate and onComplete hooks are used.
    • The GLSL shader code uses less operations, which is probably (very slightly) faster.
    • UglifyES is used for minification.

    Additions:

    • Both the red and green channels of the distortion map image are now used. The red channel controls distortion on the X axis, the green channel controls the Y axis.
    • The distortion may be rotated, even separately for the two images. (I noticed this was partially in the old source too.)
    • The distortion intensity may be varied for both images.

    Even with the new features, the new minified source is smaller, too (though admittedly most of that comes from the removal of the mobile detection regexp), at 5009 bytes vs 2852 bytes.

    opened by akx 2
  • Bump three from 0.99.0 to 0.125.0

    Bump three from 0.99.0 to 0.125.0

    Bumps three from 0.99.0 to 0.125.0.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump lodash from 4.17.15 to 4.17.19

    Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump json5 and microbundle

    Bump json5 and microbundle

    Bumps json5 to 2.2.3 and updates ancestor dependency microbundle. These dependencies need to be updated together.

    Updates json5 from 0.5.1 to 2.2.3

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2

    • Fix: Bump minimist to v1.2.5. (#222)

    v2.1.1

    • New: package.json and package.json5 include a module property so bundlers like webpack, rollup and parcel can take advantage of the ES Module build. (#208)
    • Fix: stringify outputs \0 as \\x00 when followed by a digit. (#210)
    • Fix: Spelling mistakes have been fixed. (#196)

    v2.1.0

    • New: The index.mjs and index.min.mjs browser builds in the dist directory support ES6 modules. (#187)

    v2.0.1

    • Fix: The browser builds in the dist directory support ES5. (#182)

    v2.0.0

    • Major: JSON5 officially supports Node.js v6 and later. Support for Node.js v4 has been dropped. Since Node.js v6 supports ES5 features, the code has been rewritten in native ES5, and the dependence on Babel has been eliminated.

    • New: Support for Unicode 10 has been added.

    • New: The test framework has been migrated from Mocha to Tap.

    • New: The browser build at dist/index.js is no longer minified by default. A minified version is available at dist/index.min.js. (#181)

    • Fix: The warning has been made clearer when line and paragraph separators are

    ... (truncated)

    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    • Fix: Bump minimist to v1.2.5. (#222)

    v2.1.1 [code, [diff][d2.1.1]]

    ... (truncated)

    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Updates microbundle from 0.11.0 to 0.15.1

    Release notes

    Sourced from microbundle's releases.

    v0.15.1

    Patch Changes

    v0.15.0

    Minor Changes

    Patch Changes

    ... (truncated)

    Changelog

    Sourced from microbundle's changelog.

    0.15.1

    Patch Changes

    • cebafa1 #961 Thanks @‚Äčzyrong! - Fix for when multiple entries reference different CSS, only the CSS referenced by the first entry will be packaged
    • 6018e58 #956 Thanks @‚Äčrschristian! - Silences warnings when using Node builtins with the 'node:...' protocol on imports. Warnings related to bare usage of these builtins were already silenced.
    • e72377a #964 Thanks @‚Äčrschristian! - Fixes filename generation for es & modern outputs. Both 'jsnext:main' and 'esmodule' were incorrectly ignored.

    0.15.0

    Minor Changes

    Patch Changes

    • b51b855 #935 Thanks @‚Äčmycoin! - Don't attempt to write build stats in watch mode when there has been a build error/sizeInfo is undefined

    0.14.2

    Patch Changes

    0.14.1

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by smoljsteam, a new releaser for microbundle since your current version.


    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump loader-utils and postcss-modules

    Bump loader-utils and postcss-modules

    Bumps loader-utils and postcss-modules. These dependencies needed to be updated together. Updates loader-utils from 0.2.17 to 1.4.1

    Release notes

    Sourced from loader-utils's releases.

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    • fixed a hash type extracting in interpolateName (#137) (f8a71f4)

    v1.2.1

    1.2.1 (2018-12-25)

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    • fixed a hash type extracting in interpolateName (#137) (f8a71f4)

    1.2.1 (2018-12-25)

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils since your current version.


    Updates postcss-modules from 1.4.1 to 1.5.0

    Changelog

    Sourced from postcss-modules's changelog.

    1.5.0

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • add playSlideshow and stopSlideShow actions

    add playSlideshow and stopSlideShow actions

    Passing an array of images to a new "hoverEffect" object will allow to build a slideshow with the. The action "playSlideshow" will activate the slideshow. The "stopSlideShow" will allow to stop it.

    With this branch change is not necessary to pass always the image1 and image2 if and array of images is passed.

    The old hover effect functionalities will still work.

    opened by 8BigFish88 0
  • Images doesn't load when using NPM

    Images doesn't load when using NPM

    Hi, I tried using the library after installing the package and it's dependencies via NPM but it doesn't display the images at all. I assume it's because I'm using a newer version of GSAP in contrast to the version used to initiate the library. How do I fix this?

    opened by Ginikachuqu 0
  • Using effect as hover effect for CMS image without 2 input images

    Using effect as hover effect for CMS image without 2 input images

    Is there a way to use this as a hover effect for a portfolio collection? Where I can input the same CMS image as image1 and image2. I tried putting the .div_name for the image1 and 2 inputs instead of an image link.

    Has anyone achieved this before?

    opened by pantheradesigns 1
Owner
Robin Delaporte
Creative developer & Former student @Gobelins - Available for freelance
Robin Delaporte
Vanilla javascript slider for all purposes created by ganlanyuan in Vue.

tiny-slider 2.0 for Vue Wrapper for Tiny slider for all purposes by ganlanyuan in Vue. Try it out! Firefox 12+, Chrome 15+, Safari 4+, Opera 12.1+, IE

Viktor Sarström 139 Dec 20, 2022
Keen-Slider a free library agnostic touch slider with native touch/swipe behavior and great performance

Keen-Slider is a free library agnostic touch slider with native touch/swipe behavior and great performance. It comes with no dependencies, typescript support, multitouch support and is compatible with all common browsers including IE 10. Furthermore it comes with a React Hook, a React Native Hook and a Vue 3 Composition Function for easier use.

Eric Beyer 3.7k Dec 31, 2022
Swiper - the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Vladimir Kharlampidi 33.7k Jan 3, 2023
Webpraktyk Vue Slider is a fully responsive and customizable Vue component slider and carousel

Webpraktyk Vue Slider is a fully responsive and customizable Vue component slider and carousel. This component is compatible with Vue 3,

Krzysztof ŇĀozowski 0 Oct 18, 2021
Vue 3 slider component with multihandles, tooltips merging and formatting.

Vue 3 Slider Sponsors Other libraries @vueform/multiselect - Vue 3 multiselect component with single select, multiselect and tagging options. @vueform

Vueform 173 Dec 28, 2022
A touch ready and responsive slideshow / carousel for Vue & Vue 3.

A touch ready and responsive slideshow / carousel for Vue & Vue 3.

Antoni 513 Jan 5, 2023
A light and Elegant theme for Slidev

A light and Elegant theme for Slidev. This theme contains collection of amazing & light-weighted icons called the light-icons.

Light Vue 35 Dec 5, 2022
A simple vue-range slider, that supports custom values, labels and more

vue-custom-range-slider This is a simple vue-range slider, that supports custom values, labels and more. The component is based on use with v-model, t

FireFly Stars 0 Nov 20, 2021
A pure vue native horizontal list implementation for mobile/touch and responsive web.

?? You might want to use Vue Horizontal instead! Vue Horizontal is another take on the horizontal layout written by me with an ultra simple implementa

Fuxing Loh 175 Dec 15, 2022
A custom range slider for vue, that builds on the native range slider, but supports stuff like custom values, labels and more.

vue-custom-range-slider This is a simple vue-range slider, that supports custom values, labels and more. The component is based on use with v-model, t

Bj√łrn Nyborg 11 Oct 28, 2022
A slider and carousel as vue component on top of the Glide.js

Vue Glide Vue component on top of the Glide.js Documentation https://antonreshetov.github.io/vue-glide Install NPM Installing with npm is recommended

Anton Reshetov 267 Dec 26, 2022
A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.

v-show-slide A Vue.js directive for animating an element from height: auto to height: 0px and vice-versa. ?? 3kb (1kb gzipped) ?? No dependencies ?? T

Pete Hegman 104 Nov 24, 2022
‚ąě Infinite slide bar component (no dependency and light weight 1.48 KB)

‚ąě Vue Infinite Slide Bar ?? Infinite slide bar component (no dependencies and light weight 1.48 KB) ?? Document & Demo Page LIVE DEMO ?? Install npm i

Pongsatorn 235 Dec 10, 2022
Vue-colorful-slider - An easy-to-use and quite customizable slider for Vue.js

vue-colorful-slider An easy-to-use and quite customizable slider for Vue.js Brig

Deadida 4 Aug 14, 2022
Atropos is a lightweight, free and open-source JavaScript library to create 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

Vladimir Kharlampidi 2.3k Jan 8, 2023
A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

null 1 Aug 3, 2020
responsive image with zoomed image on hover

vue-zoom-on-hover responsive image with zoomed image on hover. demo (ctrl+click to open in new tab) this vue.js component displays an image with the w

Intera GmbH 158 Dec 30, 2022
ūüĎč Declarative, direction-aware hover in Vuejs

vue-direction Direction aware hover in Vuejs Installation Install the component via npm by running npm i vue-direction or yarn add vue-direction. Usag

William Lindvall 35 Nov 24, 2022
A preview component of the creator with more information on hover.

A preview component of the creator with more information on hover.

Gobie Nanthakumar 6 Jun 20, 2021
Video.js plugin that displays thumbnails on progress bar hover, driven by external VTT files.

Video.js plugin that displays thumbnails on progress bar hover, driven by external VTT files. Based on this JW Player spec. Note, this plugin currently only supports sprited thumbnails.

Luca Hohmann 0 Sep 1, 2020