AOS Анимация при прокручивании (скролле) страницы


 
AOS - js плагин придаст вашему сайту немного анимационных эффектов при прокручивании страницы.
Удобный и очень лёгкий плагин отлично подойдет к любому DLE шаблону. Очень простая установка.
Данный плагин я использовал в шаблоне "MyBlog" это можно увидеть в видеообзоре шаблона.

Установка (пример установки на DLE шаблон)
1. Скачиваем архив с плагином aos-master.zip
2. Открываем архив, в архиве много всякой всячины но нам нужна папка dist Файлы aos.js и aos.css раскидываем в папки со стилями и js нашего шаблона.
3. Открываем файл main.tpl перед строкой </head> к остальным стилям подключаем наш плагин:

 <link rel="stylesheet" href="/templates/FDv2/css/aos.css">w
4. Спускаемся в самый низ файла main.tpl и перед тегом </body> подключаем js файл:
<script src="/templates/FDv2/js/aos.js"></script>
5. Для того чтобы наш плагин заработал необходимо инициализировать его. Там же, в самом низу перед тегом </body> вставляем:
<script>
  AOS.init({
  easing: 'ease-in-out-sine'
  });
</script>

Готово! Плагин мы подключили теперь переходим на демонстрационную страницу самого плагина.
http://michalsnik.github.io/aos/

Допустим у нас есть блок с навигацией:
<div class="navbar">
<-Тут ваша навигация-->
</div>

Чтобы придать эффект этому блоку на нужно заключить этот блок следующим образом
<div data-aos="fade-up">

 <div class="navbar">
 <-Тут ваша навигация-->
 </div>

</div>
Либо так:
 <div class="navbar" data-aos="fade-up">
 <-Тут ваша навигация-->
 </div>
Перезагружаем страницу CTRL+F5 и вуоля!


Если возникнут проблемы либо вопросы, смело пишите в комментарии под этой статьей.скачать dle 11.1смотреть фильмы бесплатно


aos
Информация