LAnima

Transform элементов при загрузке страницы с встроенными стилями и возможностью собственных настроек. Без зависимостей. Для использования добавьте класс "lanima" нужному элементу и атрибуты для анимации.

Демо

Демо 1 — страндартные стили, примеры использования.

Демо 2 — пользовательские стили.

Параметры

data-effect=""      <!-- тип эффекта (line, scale, my) (по умолчанию: отсутствует)         -->
data-time="Z"       <!-- ровносильно transition: all Zs ease 0s (по умолчанию: Z = 0.3)    -->
data-left="Zpx"     <!-- если эффект — "line", ровносильно translate(-Zpx, 0)              -->
data-right="Zpx"    <!-- если эффект — "line", ровносильно translate(Zpx, 0)               -->
data-top="Zpx"      <!-- если эффект — "line", ровносильно translate(0, -Zpx)              -->
data-bottom="Zpx"   <!-- если эффект — "line", ровносильно translate(0, Zpx)               -->
data-scale="Z"      <!-- если эффект — "scale", ровносильно scale(Z) (по умолчанию: Z = 0) -->
data-styles="Z"     <!-- если эффект — "my", transform: Z                                  -->
data-opacity="Z"    <!-- Начальное значение прозрачности (по умолчанию: Z = 0)             -->

Эффекты

data-effect="line"      <!-- работает с translate(X,Y). X и Y задаются атрибутами data-left/right/top/bottom. -->
data-effect="scale"     <!-- работает с scale(Z). Z задается атрибутом data-scale. -->
data-effect="my"        <!-- работает с transform. В атрибуте data-styles задается стиль, из которого будет произведена анимация. -->

Советы

• Используйте библиотеку для анимации элементов, которые нужно загрузить в последнюю очередь.
• Для текстовых блоков используйте data-opacity="1".
• Старайтесь максимально оптимизировать страницу, в любом случае.
• Если возникает мерцание элементов при загрузке, рекомендуется подключать скрипт до других библиотек.
  
  

Гитхаб

lanima.js

lanima.min.js