Эмёрдж

Жуэль     Эмёрдж     Лайкли

Эмёрдж — система управления загрузкой веб-страниц.

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

Эмёрдж использует Джейквери.

Версия 1.2.2

Улучшена совместимость с Интернет-эксплорером и Фаерфоксом.

Версия 1.2.1

Исправлена ошибка, из-за которой data-expose мог не работать на страницах с доктайпом ХТМЛ 5. В версии 1.2 добавилась возможность с помощью атрибута data-expose проявлять элемент, когда пользователь доскролит до него. Кроме того, индикатор загрузки теперь использует СВГ-анимацию вместо ЦСС-анимации.


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

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

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

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

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

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


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

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

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

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

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

data-spin-size="24"
Диаметр в пикселях. По умолчанию 24.
data-spin-color="#404040"
Цвет. По умолчанию #404040.
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/svg+xml..." 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>

Примеры использования

Посмотрите, как загружается главная страница этого сайта, зайдите в разделы верхнего меню.


Требования к браузерам и Джейквери

Полностью поддерживаются последние браузеры на Вебките и Фаерфокс. В неподдерживаемых браузерах страница загрузится как если бы Эмёрджа не было. Аналогично с выключенными скриптами.

Эмёрдж создан с Джейквери версии 1.10.1. Возможно, он заработает с более старыми, но это не гарантированно.

745 р.  или
0,04 BTC

  • Лицензия на домен
  • Манибек 30 дней
  • Бесплатное обновление

 

Для домена:

Эксперимент. Если что-то пойдёт не так, напишите мне.

Разработчики, свяжитесь для обсуждения условий использования в нескольких проектах.

 

Автор и разработчик — Илья Бирман