Управление Gif анимацией на JavaScript

Недавно задумался, каким образом на сайте dribbble.com реализована управление анимацией изображений. Когда на странице много gif изображений, очень удобно, если они не мельтешат перед глазами, и пользователь может сам выбрать, что просмотреть, а что нет.

Чтобы внедрить ручное управление gif анимацией у себя на сайте, скачайте готовую JS библиотеку Gifffer. Gifffer позволяет отключить автоматический запуск браузером gif изображений. Кроме того, библиотека добавляет кнопку управления над анимацией: пользователь может вручную запустить, поставить на паузу, или возобновить просмотр. И еще есть один плюс. Кнопку запуска вы можете оформить так, как вам захочется с помощью CSS стилей.

Важно! Если вы используете gif анимацию на сайте под управлением WordPress, при загрузке движок создает уменьшенные копии исходного изображения. Проблема в том, что копии становятся статичными. Единственный способ обойти эту проблему – выводить исходное изображение. Это значит, что оптимизацию и выбор подходящего размера, необходимо производить перед заливкой картинки на сайт. Остается надеется, что в будущих версиях WP эта проблема будет устранена.

Установка библиотеки

Подключаем библиотеку.

<script type="text/javascript" src="gifffer.js"></script>

В теге img укажите путь к картинке, вместо src используйте атрибут data-gifffer. Например:

<img data-gifffer="image.gif" />

Инициализация библиотеки:

window.onload = function() {
	Gifffer();
}

Можно оформить кнопку запуска анимации.

<script>
window.onload = function() {
	Gifffer({
		playButtonStyles: {
			'width': '60px',
			'height': '60px',
			'border-radius': '30px',
			'background': 'rgba(255, 255, 255, 0.3)',
			'position': 'absolute',
			'top': '50%',
			'left': '50%',
			'margin': '-30px 0 0 -30px'
		},
		playButtonIconStyles: {
			'width': '0',
			'height': '0',
			'border-top': '14px solid transparent',
			'border-bottom': '14px solid transparent',
			'border-left': '14px solid rgba(255, 255, 255, 0.75)',
			'position': 'absolute',
			'left': '26px',
			'top': '16px'
		}
	});
}
</script>

Дополнительно вы можете прописать атрибуты изображения:

<img 
     data-gifffer="image.gif" 
     data-gifffer-width="250" 
     data-gifffer-height="250"
     data-gifffer-alt="Описание картинки"
>

Работа библиотеки совместима с браузерами:

Chrome, FF, Safari, Opera, IE9+

Интегрируем на WordPress сайт

Чтобы наша библиотека заработала на WordPress сайте, нам придется подкорректировать обычный вывод миниатюр с использованием функции the_post_thumbnail. Для работы анимации, нам нужно добавить изображению атрибут data-gifffer. Делается это так:

<?php $attr = array(
	'data-gifffer' => $src,
	'alt' => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )),
	);
	the_post_thumbnail( 'medium', $attr );
?>