https://github.com/tholman/giflinks

The best thing to happen to the internet since the <a> tag.
https://github.com/tholman/giflinks

Last synced: about 13 hours ago
JSON representation

The best thing to happen to the internet since the <a> tag.

• Host: GitHub
• URL: https://github.com/tholman/giflinks
• Owner: tholman
• Created: 2014-07-01T01:15:22.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-10-03T15:13:31.000Z (about 9 years ago)
• Last Synced: 2024-05-22T21:32:14.464Z (6 months ago)
• Language: JavaScript
• Homepage: http://tholman.com/giflinks
• Size: 5.04 MB
• Stars: 794
• Watchers: 29
• Forks: 80
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# GifLinks

A simple javascript library used for adding full screen gif action as a hover effect. This is very serious stuff, [here's a demo](http://tholman.com/giflinks)! You can also play with the source [live on CodePen](http://codepen.io/tholman/pen/gJBdi).

### Instructions

GifLinks is a stand alone library (no jquery, or the likes) so usage is pretty straight forward. All styling of elements is up to the user, `GifLinks.js` only handles the creation, styling and management of the gif popup, as well as providing a few css classes for custom styling.

#### HTML

There aren't many restrictions for the `html` elements you want to use to activate GifLinks, the one mandatory attribute a `data-src`, which needs to point to the gif/image you wish to flash up when hovering.

```html

 Check this out! 

 Kapow! 

```

#### JS

GifLinks.js is fairly robust when it comes to assigning elements to be used, its as simple as passing them to the ```Giflinks``` function, once they have been rendered. You can do this with `document.querySelector` finding your elements however you like.

```html

 Check this out! 

window.onload = function() {

	// Add GifLinks to all anchor tags on the page!

    var element = document.querySelector( 'a' );

	GifLinks( element );

}

```

Or doing multiple at once, with a classname.

```html

 Check this out! 

 Just Incredible! 

window.onload = function() {

	// Giflinkify all images with the 'giflink-to-be' classname.

    var elements = document.querySelectorAll( '.giflink-to-be' );

	GifLinks( elements );

}

```

You can also pass in an option to preload the image, In this case the giflinks will only become active when loading is complete!

```html

 Check this out! 

window.onload = function() {

	// Add GifLinks to all a tags on the page, and preload!

    var element = document.querySelector( 'a' );

	GifLinks( element, { preload: true } );

}

```

#### CSS

There are a few little things to play with, when it comes to css.

All active giflinks will have a `ready` and a `giflink` class. As well as a `has-link` and `no-link` class, if the element contains an active href.

Also, if you preload, the giflinks will recieve a `preloaded` class, which can be used to show the link is ready to be hovered, for example:

```css

.giflink.preloaded {

	transition: color 300ms;

	color: #ff0000;

}

```

### License

The MIT License (MIT)

Copyright (C) 2014 ~ [Tim Holman](http://tholman.com) ~ [email protected]