Author: | tholman |
---|---|
Views Total: | 243 views |
Official Page: | Go to website |
Last Update: | September 27, 2022 |
License: | MIT |
Preview:

Description:
GifLinks is a zero-dependency JavaScript library that displays and plays a fullscreen GIF image when hovering over elements.
How to use it:
1. Load the minified version of the GifLinks library in the document.
<script src="GifLinks.min.js"></script>
2. Specify the path to the GIF image.
<a href="#" data-src="./1.gif" class="demo"> Hove Me! </a> <span data-src="./1.gif" class="demo"> Hove Me! </span> ...
3. Initialize the GifLinks library on document ready.
window.onload = function() { var elements = document.querySelectorAll( '.demo' ); GifLinks( elements ); }
4. Apply CSS classes to the GIF image based on its state.
.giflink.preloaded { /* ... */ } .giflink.has-link { /* ... */ } .giflink.no-link { /* ... */ }