AOS Анимация при прокручивании (скролле) страницы
AOS - js плагин придаст вашему сайту немного анимационных эффектов при прокручивании страницы.
Удобный и очень лёгкий плагин отлично подойдет к любому DLE шаблону. Очень простая установка.
Данный плагин я использовал в шаблоне "MyBlog" это можно увидеть в видеообзоре шаблона.
Установка (пример установки на DLE шаблон)
1. Скачиваем архив с плагином [attachment=8:aos-master.zip]
2. Открываем архив, в архиве много всякой всячины но нам нужна папка dist Файлы aos.js и aos.css раскидываем в папки со стилями и js нашего шаблона.
3. Открываем файл main.tpl перед строкой </head> к остальным стилям подключаем наш плагин:
<link rel="stylesheet" href="{THEME}/css/aos.css">w
4. Спускаемся в самый низ файла main.tpl и перед тегом </body> подключаем js файл:
<script src="{THEME}/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 и вуаля!
Если возникнут проблемы либо вопросы, смело пишите в комментарии под этой статьей.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.