Добавить gif (гифку), анимацию на страницу

Последние изменения: 07.11.2017

Сегодня мы все чаще встречаем видео анимации в постах блогов или на целевых страницах. Это и понятно, ведь зацикленные GIF являются отличным способом захвата внимания посетителя. Из этой статьи вы узнаете, что означает gif и как использовать этот формат на целевой странице.

Признайтесь, иногда просто невозможно оторваться от просмотра очередной гифки! К слову, некоторые уже называют GIF анимации особым видом искусства.

Но не стоит забывать и об информативных анимациях и о том, что такое gif файл. Ни для кого не секрет, что короткие видео - это отличный способ объяснить или пояснить что-то всего за несколько секунд не используя массу текста!

Не зря сервис Twitter недавно запустил поддержку GIF анимации.

Формат gif - что это такое?

Простыми словами GIF - это графические изображения, которые движутся. Итак, чем открыть gif и как устроен этот формат? При воспроизведении GIF происходит показ отдельных статичных картинок по порядку, с нулевой задержкой между ними. Как пример представьте себе мультфильм. При его просмотре у нас создается иллюзия движения объектов, хотя на самом деле это много-много статичных изображений.

Бесспорным плюсом файлов формата GIF является то, что они, как правило, небольшие. Итак, вы можете оживить ваш лендинг с помощью GIF! Ниже читайте, чем открыть gif анимацию и что для этого понадобится.

Как создать GIF анимацию и добавить ее на лендинг?

1) Чтобы узнать, чем смотреть gif, скачайте программу по нужной ссылке:

Для ОС Windows: LICEcap v1.24 для Windows (300kb installer)
Для Mac: LICEcap v1.24 для OSX (800kb DMG)

2) Установите “LICEcap” на свой компьютер:

LICEcap

LICEcap

LICEcap

LICEcap

3) Запустите “LICEcap” с рабочего стола, например:

LICEcap

4) Откроется прозрачное окно. Внутри этой рамки потом будет записываться анимация. Внизу рамки можно задать ее размер в пикселах.

LICEcap

5) Перейдите в то окно, из которого будет производиться запись. Потом потяните за углы и измените размеры рамки, если это необходимо.

В левом нижнем поле “FPS” можно изменить частоту кадров в секунду.

Внимание: посетителям сайта нужно будет знать, чем открыть файл gif, и чем больше разрешение(размер кадра) и FPS, тем больше весит анимация. Это может значительно замедлить загрузку лендинга!

LICEcap

LICEcap

6) Как и чем редактировать gif? Нажмите кнопку “Record” в правом нижнем углу окна

LICEcap

7) Желательно создать папку для файла здесь: C:\Windows\Temp (Для ОС WIN - скопируйте этот путь и вставьте в строку сверху). Назовите файл и задайте необходимые настройки анимации:

анимация

  • Title frame – в этом поле можно ввести краткое описание, поясняющее о чем анимация
  • Elapsed time – поставьте галочку, чтобы видеть время воспроизведения
  • Mouse button press – можно записывать при клике по левой кнопке мыши
  • GIF repeat count (0=infinite) – можно прекратить воспроизведение после определенного количества времени
  • Control+Alt+P – назначить клавиши для запуска и остановки записи

8) После того как нажмете “Сохранить” начнется запись. Нажмите кнопку “Stop”, чтобы ее закончить.

LICEcap

9) Откройте страницу в визуальном редакторе LPgenerator и нажмите инструмент “Изображение”.

10) Выберете записанную анимацию:

LPgenerator

11) Добавьте ее на целевую страницу

LPgenerator

12) Сохраните лендинг и откройте в режиме просмотра. Теперь вы знаете, чем сделать gif и как использовать его на целевой странице.

Пример >>>

Помогла ли вам статья?