Как легко анимировать элементы веб-сайта при прокрутке с помощью бесплатной библиотеки AOS

[ad_1]
⭐
Анимация при прокрутке может добавить вашему сайту довольно элегантный эффект. Небольшая анимированная полировка может иметь большое значение для того, чтобы ваш сайт выглядел всесторонне и завершенно. С помощью JavaScript и CSS вы можете заставить элементы исчезать, скользить или даже вращаться, когда они появляются при прокрутке страницы вниз.
И вам даже не нужно кодировать все это самостоятельно! Благодаря бесплатной библиотеке AOS украсить ваш веб-сайт так же просто, как добавить скрипт. Просто используйте CDN или менеджер пакетов для установки файлов JavaScript и CSS и вставьте несколько строк кода. Тогда создание анимации станет проще простого.
Мы покажем вам, как настроить библиотеку AOS прямо здесь, а также приведем несколько замечательных примеров экспериментов с AOS в действии.
НЕОГРАНИЧЕННЫЕ ЗАГРУЗКИ: шаблоны электронной почты, администратора, целевой страницы и веб-сайта
Только начиная с $16.50 в месяц!
Настройка AOS
Установка AOS на ваш сайт — простой процесс, если вы используете CDN или менеджер пакетов, которые размещают для вас все файлы и устанавливают их правильно. Если вы не хотите этого делать, вам нужно скачать файлы и настроить их самостоятельно.
С менеджером пакетов все, что вам нужно сделать, это ввести код в командную строку/терминал сервера, на котором вы его установили. npm — одно из популярных решений, и оно также автоматически поставляется вместе с Node.js. Просто используйте эту команду:
npm install --save [email protected]
Есть также Bower, для которого требуется npm. Хотя это устаревший инструмент, он все еще поддерживается и используется многими. Если он у вас установлен, запустите этот скрипт:
bower install aos --save
Наконец, есть Yarn, популярная альтернатива Bower. Это код, который вам понадобится:
yarn add [email protected]
Если вы предпочитаете использовать CDN, эти сценарии установят файлы и таблицы стилей, которые вам понадобятся для начала работы. Обязательно включите их оба, иначе это не будет работать должным образом.
CSS-скрипты:
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
JS-скрипты:
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
Какой бы метод вы ни использовали, последним шагом будет инициализация AOS с помощью этого кода и завершение процесса установки:
<script>
AOS.init();
</script>
Тогда это просто вопрос создания анимации! Ознакомьтесь с этой таблицей элементов управления анимацией и предопределенными анимациями, которые вы можете использовать. Вам решать, как создать идеальные эффекты, соответствующие вашему уникальному веб-сайту. Если вы застряли, попробуйте это подробное руководство, написанное разработчиком. В нем много полезных примеров.
Эксперименты и примеры AOS
Лучший способ изучить новую библиотеку — увидеть код в действии, и именно поэтому такие сайты, как CodePen, так ценны. Просмотрите приведенные ниже фрагменты, и вы сможете увидеть работающий AOS JavaScript вместе с выводом. Вы даже можете настроить код в режиме реального времени. Затем используйте полученные знания для создания собственных потрясающих анимаций!
Модель
См. перо
Модель Рикардо Пиреса (@skeezrocco)
на КодПене.
Библиотека AOS Animate On Scroll
См. перо
Библиотека AOS Animate On Scroll от Oltika (@oltika)
на КодПене.
АОС — анимация
См. перо
AOS – анимация Сника (@michalsnik)
на КодПене.
АОС — якорь
См. перо
AOS – якорь от Snik (@michalsnik)
на КодПене.
AOS — якорь и размещение якоря
См. перо
AOS – якорь и размещение якорей от Snik (@michalsnik)
на КодПене.
AOS — пользовательские анимации
См. перо
AOS — пользовательские анимации от Snik (@michalsnik)
на КодПене.
Примеры анимации при прокрутке — отключить анимацию
См. перо
Примеры анимации при прокрутке — отключите анимацию от SitePoint (@SitePoint)
на КодПене.
АОС JS
См. перо
AOS JS от manufufu (@WAWI)
на КодПене.
Кино
См. перо
Фильм Артема (@Artem91)
на КодПене.
Эффекты прокрутки стали проще
Благодаря библиотекам JavaScript, таким как AOS, создание веб-сайтов с красивой анимацией не такая уж сложная задача. Изучение всех тонкостей библиотеки может занять некоторое время, особенно если вы новичок, но это делает весь процесс намного более доступным для новых веб-разработчиков. А это значит, что вам не придется создавать его самостоятельно с нуля.
Если вы ищете библиотеку, которая позволяет легко реализовать элегантные эффекты прокрутки, обязательно попробуйте AOS. Его просто установить и еще легче освоить, так что вы можете мгновенно настроить и запустить анимацию прокрутки.
Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.
Source: 1stwebdisigner
Заключение
Вы ознакомились с статьей — Как легко анимировать элементы веб-сайта при прокрутке с помощью бесплатной библиотеки AOS
Пожалуйста оцените статью, и напишите комментарий.