Gifffer. Делаем gif-анимацию управляемой
26 июня 2014 JavaScript 15503 просмотра
На днях наткнулся в GitHub на один очень интересный репозиторий. Инструмент, разрабатываемый болгарским программистом, решает одну маленькую, но очень назойливую проблему. А именно, он позволяет остановить циклическое автопроигрывание гифок на веб-странице. Теперь у меня появилось желание использовать gif! Инструмент называется Giffer, а под катом я опишу как просто с ним работать и покажу маленькое демо.

Во-первых, библиотека очень компактная, ее размер составляет всего 1.5 KB.

Использовать ее очень просто: подключаем библиотеку, в теге img меняем атрибут src на data-giffer и вызываем Giffer, который сам всё сделает для всех гифок на странице.
<img data-gifffer="my.gif" />
<script type="text/javascript" src="gifffer.min.js"></script>
<script>
window.onload = function() {
    Gifffer();
}
</script>
А вот и пример:



Код очень простой, пару строк работы с канвас, пару событий на клик.

Репозиторий
Минифицированный JS-файл

Теперь буду вместо скучных скриншотов выкладывать гифки в блоге. Кстати, если кто не знает, беларусы сделали приложение Gifstory, которое записывает 10 секундное видео как GIF.