Cегодня мы бы хотели поговорить о чем-то необыкновенном и красивом. Вряд ли такой эффект станет популярным среди разработчиков, но если вы разрабатываете сайт -портфолио для фотографа то вы обязательно должны попробовать такой плеер у себя на сайте. Когда мы первый раз столкнулись с таким плеером на зарубежных сайтах то были удивлены, как простая вещь позволяет оживить сайт, и подать посетителю нечто необычное, именно о создании плеера для анимации GIF файлов мы хотим сегодня поговорить и показать как сделать такой эффект.

 

Такой плеер будет реализовываться с помощью небольшого jQuery плагина под названием freezeframe.js. Данный плагин-это адаптивный сенсорный jQuery GIF-плеер, который позволяет вручную воспроизводить анимированный GIF кадр за кадром с пользовательскими настройками. При этом плагин достаточно прост в использовании. Смотрите бесплатные шаблоны от наших партнеров:

Шаг 1. HTML

Сначала необходимо загрузить последнюю версию библиотеки jQuery JavaScript в документ html.

Затем загрузите  плагин jQuery freezeframe.js. Обратите внимание, что freezeframe.минута.js должен быть загружен после библиотеки jQuery.

Сама разметка у нас будет элементарной, мы просто подключаем нашу gifку к странице с необходимым нам классом:

Как видите, ничего сложно у нас нет, давайте перейдем к следующему шагу.

Шаг 2. JS

Нам необходимо вызвать наш плагин к странице где размещены GIFы и готово. По умолчанию плагин приостанавливает GIF и воспроизводит его при наведении курсора мыши.

По умолчанию плагин имеет немного настроек, вот основные из них:

В результате мы получаем вот такой замечательный эффект, который можно использовать к своим фотографиям и оживить их в буквальном смысле.

Вот и все. Готово!