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

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

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

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

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

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

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

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

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

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

Chrome, FF, Safari, Opera, IE9+

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

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

Добавить комментарий