Простая javascript библиотека для добавления полноэкранных gif как hover-эффектов. Это очень серьезно, вот демо! Можно также поиграть с исходным кодом вживую на CodePen.

GifLinks это самостоятельная библиотека (никаких jquery, и тому подобного) так что использование довольно прямолинейно. Вся стилизация элементов в руках пользователей, GifLinks.js только управляет созданием, стилизацией и управлением gif-попапом, предоставляя несколько css-классов для кастомной стилизации.

Есть не так много ограничений на то, какие 'html'-элементы можно использовать для GifLinks, единственно необходимым является атрибут data-src, который должен указывать на gif/image, который вы хотите показать на hover-е.

<a href="awesome.html" data-src="./img/awesome.gif"> Ты только посмотри на это! </a> <!-- Можно использовать любой элемент, серьезно --> <span class="anything" data-src="./img/amazing.gif" /> Бабах! </span>

Чтобы начать использовать GifLinks.js, просто передайте элемент в функцию Giflinks, когда они отрендерятся. Это можно сделать с document.querySelector, выбирая элементы как вам нравится.

<a href="awesome.html" data-src="./img/awesome.gif"> Посмотри сюда! </a> <script> window.onload = function() { // Добавим GifLink-и ко всем якорям на странице! var element = document.querySelector( 'a' ); GifLinks( element ); } </script>

Или несколько за один раз через имя класса.

<a class="giflink-to-be" href="awesome.html" data-src="./img/awesome.gif"> Посмотри сюда! </a> <a class="giflink-to-be" href="incredible.html" data-src="./img/incredible.gif"> Просто Изумительно! </a> <script> window.onload = function() { // Перевести все картинки в Giflink-и с классом 'giflink-to-be'. var elements = document.querySelectorAll( '.giflink-to-be' ); GifLinks( elements ); } </script>

Также можно передать флаг для прелоада картинки. В таком случае giflinks будут активны как только загрузка завершится!

<a href="awesome.html" data-src="./img/awesome.gif"> Посмотри сюда! </a> <script> window.onload = function() { // Добавим GifLink-и ко всем а-тэгам на странице и попросим либу сделать пре-лоад! var element = document.querySelector( 'a' ); GifLinks( element, { preload: true } ); } </script>

Есть несколько мелких вещей, с которыми можно играть с css.

У всех активных giflink есть классы ready и giflink. А если в элементе есть активная ссылка, также добавятся has-link и no-link.

Также, если вы пользуетесь прелоадом, giflink-и получат класс preloaded, который можно использовать, чтобы показать, что ссылка доступна, например так:

.giflink.preloaded { transition: color 300ms; color: #ff0000; }

The MIT License (MIT)

Copyright (C) 2014 ~ Tim Holman ~ timothy.w.holman@gmail.com