Для разработчика

Для разработчика

Ханимейт

11 ноября 2016

Ханимейт — скрипт, который управляет отображением страницы.

Ханимейт показывает картинки только после того, как они полностью загрузились и позволяет выбрать анимацию с которой отобразится блок.

Версия 1.7 Исправлена работа data-continue. Исправлена работа в Фаерфоксе. Размер скрипта уменьшен вдвое.

ЗИП ↓

Установка и использование

Ханимэйт подклю­чает­ся как и любой другой яваскрипт.

<script src="/js/honeymate.js"></script>

Чтобы анимиро­вать загрузку элемен­та надо добавить класс honey к блоку:

<div class="honey">
<img src="/img/photo.jpg">
</div>

Ханимэйт дождется загрузки всех изобра­жений и отобра­зит блок только после этого.

Управление появлением

У скрипта есть ряд атри­бутов, через которые настра­еватся анимация.

<div class="honey" data-effect="helix" data-delay="400">
<img src="/img/photo.jpg">
</div>

Дополнительные атрибуты:

  • data-effect="zoom" — исполь­зуемый эффект. Доступные эффекты: helix, fade, relax, zoom. Значение по–умолча­нию — fade;
  • data-delay="200" — задер­жка с момен­та оконча­ния загрузки изобра­жений в блоке;
  • data-origin="top" — точка начала анимации. По–умолча­нию top для relax и center для zoom;
  • data-duration="300" — продол­житель­ность анимации. По–умолча­нию 600;
  • data-expose="true" — если значение этого атри­бута равно true, тогда блок будет отобра­жен после того, как до него доскро­лят;
  • data-await="first" — показывает блок после того, как загру­зится блок с указан­ным id. Помога­ет задать после­дователь­ность появ­ления блоков;
  • data-spin="true" — показы­вает инди­катор загрузки, который выгля­дит вот так

Лицензия

Ханимейт бесплатный, использование не ограничено ничем. Для коммерческого и некоммерческого использования.