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

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

Ханимейт

11 ноября 2016

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

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

Проект создавался как замена Эмёрджу, поэтому АПИ похоже. Разница в том, что Ханимейт бесплатный, с открытым исходным кодом и работает без зависимостей.

Версия 2.0 Глобальный обработчик для expose, анимации просят кадры, между функциями передаётся только индекс. Производительность выросла, теперь Ханимейт красиво отработает даже на слабых телефонах. Индикатор больше не промахивается.

ЗИП ↓ или возьмите с гитхаба

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

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

<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" — показы­вает инди­катор загрузки, который выгля­дит вот так

Лицензия

Ханимейт распространяется по лицензии MIT.