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

230

Недавно задумался, каким образом на сайте 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 );
?>
Добавить комментарий

Made with by WP Store