Оглавление

Настройка Lightload — анимация загрузки элементов страницы

Lightload включается в настройках, на первой вкладке.

 <h2><div class='lightload'>.…  </div></h2>
 — появится только после того,  как всё содержимое будет загружено

 Атрибуты для добавления эффектов:
 <b>data-spin-parent='true'</b> 
 — покажет Spin в родительском элементе,  пока не загрузится

 <b>data-effect='slide'</b> 
 — выбор эффекта появления: relax,  slide,  zoom или screw.
 См. пример:
 data-effect='slide' data-up='100px' 
 — появится,  пролетев снизу вверх 100 пикселей
 data-effect='relax' data-scale='.5' data-origin='bottom'
 — будет вертикально расти,  появившись в половину своей высоты

 <b>data-duration='500'</b> 
 — продолжительность анимации в миллисекундах,  по-умолчанию = 500.

 <b>data-up='20px'</b> или <b>data-down='5em'</b> 
 — применяется для slide-эффекта,  элемент пролетит снизу 
 или сверху на указанное расстояние. 
 Одновременное использование data-up и data-down не имеет смысла.

 <b>data-left='10%'</b> или <b>data-right='5cm'</b>
 — применяется для slide-эффекта,  элемент пролетит справа или слева 
 на указанное расстояние. 
 По-умолчанию = 0,  т.е. без горизонтального смещения. 
 Одновременное использование data-up и data-down не имеет смысла.

 <b>data-scale='0.5'</b> 
 Увеличение для эффектов relax,  zoom и screw. 
 По-умолчанию: для relax — 0.92,  для zoom и screw — 0.5.

 <b>data-angle='180'</b> 
 Для screw-эффекта,  наклон в градусах. По-умолчанию: 90˚. 
 Для изменения направления используйте минусовые значения.

 <b>data-origin='top'</b> 
 Для relax,  zoom и screw эффектов,  начальная точка трансформации. 
 По-умолчанию: «top» для relax и «center center» для zoom и screw.

 <b>data-opaque='true'</b> 
 — Включает плавный переход от полной прозрачности к видимости.

 <b>data-style-1</b> и <b>data-style-2</b>
 Создание эффектов вручную с помощью CSS-анимации. 
 Эти атрибуты будут игнорированы,  если будут использованы data-эффекты. 
 См. пример:
 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)'
 Невероятный эффект!


 Порядок загрузки и задержка по времени
 Иной раз нужно подождать,  прежде чем загрузиться 
 один элемент до того,  как показывать следующий.

 <b>data-await='element-id'</b>
 Ожидание элемента с id='element-id' (но не окончание анимации). 
 Ожидаемый элемент также должен иметь class='lightload',  
 иначе он будет проигнорирован. Здесь можно указать только один элемент,  
 зато он может ожидать какой-то другой элемент 
 — получается последовательная цепочка ожидания.

 <b>data-continue='true'</b> 
 Ожидание предыдущего обозначенного классом элемента.
 Если указано data-await — этот атрибут не сработает.

 <b>data-hold='500'</b>
 Ожидание в миллисекундах

 Примеры:

 <div class='lightload'>
 …  Эй…  
 </div>
 <div class='lightload' data-continue='true'>
 …  Ожидаем загрузки предыдущего элемента с lightload.…  
 </div>

 <div class='lightload' data-await='thing' data-hold='500'>
 …  Ожидаем элемент с id=thing,  затем ждем 500 ms и показываем.…  
 </div>
 <div class='lightload' id='thing'>
 …  Этот элемент грузится первым.…  
 </div>

 Для одновременной загрузки элементов не важно,  
 какой будет грузиться первым — настройте их ожидать друг друга:
 <div class='lightload' id='one' data-await='two'>
 …  
 </div>
 <div class='lightload' id='two' data-await='one'>
 …  
 </div>


 Добавление индикатора загрузки
 <b>data-spin='true'</b>
 — Добавляет индикатор,  если включен Spin в Настройках


 Вставка анимации загрузки в блоки
 осуществляется за счет поля Класс CSS в их Настройках.
 Туда можно прописать просто «lightload»
 Или использовать эффекты и настройки,  не забыв в конце
 lightload поставить «'»,  а в конце всех настроек «'» не ставить.
 Пример: lightload' data-spin='true

 
423
Комментарии

Сайт не хранит персональных данных!


Ваше имя:
Ваш вопрос или комментарий:
Жирный
Цитата
: )
Введите код:

Закрыть


Информация будет добавлена на сайт после проверки администратором.

CMS Движок

позволяет создать:
— порталы
— сайты компаний
— блоги
— каталоги с фильтром
— магазины
— CRM и базы данных

Вопросы

Вы можете задать любые вопросы, а также описать свои предложения по улучшению Движка на почту

merkvlad@gmail.com

Консультация

Служба поддержки работает по Skype:

angel13i

Покупка

Вопросы о приобретении лицензии вы можете задать по телефону в Самаре:

+7 937 200-00-61

© 2006—2017 CMS Движок разработал Влад Мерк & Co. Лицензия.
Дизайн сайта — совместно с Андреем Никифоровым, отдельная благодарность.
Приятно, что все поисковые системы находят Движок по запросу «CMS Движок».

Смотрите также:

  • Знакомства для айтишников (бесплатно, быстро и просто, без регистрации и SMS)
  • ПервоХаб — здесь можно писать об IT (не дожидаясь утверждения в Песочнице и не боясь понижения кармы)