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

Добавьте в элемент <head> на странице:

<script src="/путь/к/emerge.js"></script>

Теперь элементы, у которых class="emerge", будут проявляться только после загрузки их содержимого:

<div class="emerge">
  ... Покажется после загрузки ...
</div>

Эмёрдж ждёт загрузки картинок в тегах <img /> и подключенных через ЦСС (фоны, маркеры списка и т. д.), а также видеороликов в теге <video />.

Если подключаете скрипт в конце документа, в <head> добавьте:

<style>.emerge { opacity: 0; }</style>

Индикаторы загрузки

Пропишите data-spin="true" в элементах, которым нужен индикатор загрузки:

<div class="emerge" data-spin="true">
  ... Будет индикатор загрузки ...
</div>

Встроенный спиннер выглядит так:

Эти атрибуты управляют индикатором:

data-spin-size="24"
Диаметр в пикселях. По умолчанию 24.
data-spin-color="#000"
Цвет. По умолчанию чёрный.
data-spin-direction="clockwise"
Направление вращения. Варианты: clockwise (по умолчанию) и counter-clockwise

Чтобы использовать свой индикатор, заверните его код в скрытый див:

<div id="custom-spinner" style="display: none">
  ... Код своего индикатора загрузки ...
</div>

И привяжите его к нужному Эмёрдж-элементу:

data-spin-element="custom-spinner"
Использовать содержимое дива с id="custom-spinner" в качестве индикатора загрузки

Эмёрдж клонирует этот див для каждого элемента и выставит соответствующие размеры. Поэтому если вы хотите, чтобы индикатор отображался по центру, вам нужно самостоятельно добиться этого, например:

<div id="custom-spinner" style="position: relative; display: none">
  <img src="data:image..." width="24" height="24"
    style="position: absolute; left: 50%; top: 50%; margin: -12px"
  />
</div>

Чтобы использовать spin.js, «заведите» его внутри вашего дива (см. пример в блоге).

Эффекты

Эти атрибуты управляют анимационными эффектами:

data-effect="slide"
Использовать такой встроенный эффект. Встроенные эффекты: relax, slide, zoom и screw.
data-duration="500"
Длительность анимации в миллисекундах. По умолчанию 500 мс.
data-up="20px" or data-down="5em"
Для эффекта slide указывает, насколько элемент должен скользить вверх или вниз. По умолчанию 20 пикселей вверх. Использование одновременно обоих атрибутов не имеет смысла.
data-left="10%" or data-right="5cm"
Для эффекта slide указывает, насколько элемент должен скользить влево или вправо. По умолчанию ноль (т. е. без горизонтального скольжения). Использование одновременно обоих атрибутов не имеет смысла.
data-scale="0.5"
Для эффектов relax, zoom и screw исходный масштаб. По умолчанию 0,92 для эффекта relax и 0,5 для эффектов zoom и screw.
data-angle="90"
Для эффекта screw исходных угол в градусах. По умолчанию 90°. Используйте знак для изменения направления вращения.
data-origin="top"
Для эффектов relax, zoom и screw точка, относительно которой происходит трансформация. По умолчанию ”top” для эффекта relax и ”center center” для эффектов zoom и screw.
data-opaque="true"
Все встроенные эффекты включают переход из полностью прозрачного в полностью непрозрачное состояние. Этот атрибут делает элемент изначально полностью непрозрачным. Полезно, например, если вы хотите, чтобы элемент прилетел из-за края экрана.
data-style-1
data-style-2
Использовать указанный ЦСС для анимационных эффектов (см. пример ниже). Эти атрибуты игнорируются, если используется data-effect.

Пример:

<div class="emerge" data-effect="slide">
  ... Появится со скольжением ...
</div>

Использование data-атрибутов для изменения параметров анимации:

<div class="emerge"
  data-effect="relax" data-scale=".5" data-origin="bottom"
>
  ... Вырастет вертикально от половины высоты ...
</div>

Использование указанного ЦСС (перепроверьте префиксы):

<div class="emerge"
  data-opaque="true"
  data-style-1="-webkit-transform: rotate3d(1,1,0,90deg)"
  data-style-2="-webkit-transform: rotate3d(0,0,0,0);
    transition: opacity .5s ease-out,
      -webkit-transform 2s cubic-bezier(0.0, 0.0, 0.001, 1.0)"
>
  ... Космический эффект ...
</div>

Порядок и время

Иногда нужно, чтобы один элемент дождался другого перед появлением. Следующие атрибуты управляют порядком и временем:

data-await="element-id"
Ждать, пока элемент с id="element-id" загрузится (но не конца его анимации появления). Ожидаемый элемент должен иметь class="emerge", иначе атрибут будет проигнорирован. Здесь можно указывать только один элемент, но тот элемент может в свою очередь ждать другого.
data-continue="true"
Ждать, пока предыдущий элемент class="emerge" (по порядку в ХТМЛ-документе) загрузится (но не конца его анимации появления). Это равносильно использованию data-await со значением id предыдущего элемента, но позволяет не прописывать ему это значение (проще!). Этот атрибут игнорируется, если используется data-await.
data-hold="500"
Задержаться на столько миллисекунд (хотя бы столько времени должно пройти с тех пор, как готов элемент, которого ждёт данный).
data-expose="true"
Задержаться до тех пор, пока пользователь не доскролит до элемента. Если установлена временная задержка, она будет отсчитывать только после появления элемента в области видимости.

Пример:

<div class="emerge">
  ... Тра-ля-ля...
</div>
<div class="emerge" data-continue="true">
  ... Дождётся предыдущего элемента ...
</div>

Чуть сложнее:

<div class="emerge" data-await="thing" data-hold="500">
  ... Дождётся элемента thing, появится через 500 мс ...
</div>
<div class="emerge" id="thing">
  ... Появится первым ...
</div>

Чтобы элементы появились одновременно независимо от того, какой загрузится первым, их нужно заставить ждать друг друга:

<div class="emerge" id="one" data-await="two">
  ... Появится одновременно со следующим ...
</div>
<div class="emerge" id="two" data-await="one">
  ... Появится одновременно со предыдущим ...
</div>

Событие готовности видео

По умолчанию Эмёрдж ждёт полной загрузки видеороликов перед тем, как их показать (событие canplaythrough). С помощью аттрибута data-emerge-event у видеоролика это событие можно изменить, например:

<video ... data-emerge-event="loadedmetadata">
  ...
</video>

См. документацию по медиасобытиям в МДН.

Повтор

Добавьте class="emerge-replay" любому элементу, и по клику на нём все анимации страницы будут воспроизведены заново:

<a href="#" class="emerge-replay">Replay</a>

Полезно для отладки процесса появления страницы.


Поделиться
Отправить
Emerge