Портфолио и визитки

Для начала необходимо подключить библиотеку AOS к проекту. Существует несколько способов:

Через CDN:

<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

Через npm:

npm install aos --save

После установки через npm подключение производится в основном JS-файле:

import AOS from 'aos';
import 'aos/dist/aos.css';

Инициализация выполняется следующим образом:

AOS.init({
  offset: 120,        // смещение триггера анимации относительно верха окна
  delay: 0,           // задержка перед началом анимации (в мс)
  duration: 400,      // продолжительность анимации (в мс)
  easing: 'ease',     // функция сглаживания анимации
  once: false,        // анимация срабатывает только один раз или при каждом скролле
  mirror: false,      // анимация проигрывается при скролле вверх
});

Основные атрибуты AOS

Для элементов, которые должны анимироваться при прокрутке, используется атрибут data-aos. Примеры базовых анимаций:

<div data-aos="fade-up">Появление снизу</div>
<div data-aos="fade-down">Появление сверху</div>
<div data-aos="fade-left">Появление слева</div>
<div data-aos="fade-right">Появление справа</div>
<div data-aos="zoom-in">Масштабирование внутрь</div>
<div data-aos="zoom-out">Масштабирование наружу</div>

Дополнительные атрибуты для тонкой настройки анимации:

  • data-aos-offset="200" – изменяет расстояние от верха окна до элемента, при котором срабатывает анимация.
  • data-aos-delay="300" – задержка старта анимации в миллисекундах.
  • data-aos-duration="1000" – продолжительность анимации в миллисекундах.
  • data-aos-easing="ease-in-out" – функция сглаживания.
  • data-aos-once="true" – анимация выполняется один раз.
  • data-aos-mirror="true" – анимация повторяется при скролле вверх.

Практическое применение в портфолио и визитках

В проектах типа портфолио и онлайн-визиток AOS позволяет добавить динамичность без сложных JavaScript-кодов. Основные примеры использования:

1. Анимация блоков проектов

<section class="projects">
  <div class="project-card" data-aos="fade-up" data-aos-delay="100" data-aos-duration="800">
    <img src="project1.jpg" alt="Проект 1">
    <h3>Проект 1</h3>
    <p>Описание проекта.</p>
  </div>
  <div class="project-card" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
    <img src="project2.jpg" alt="Проект 2">
    <h3>Проект 2</h3>
    <p>Описание проекта.</p>
  </div>
</section>

Ключевой момент: Использование различной задержки (data-aos-delay) для последовательного появления карточек создает эффект «ступенчатой» анимации, что улучшает визуальное восприятие портфолио.

2. Анимация элементов визитки

<div class="contact-card" data-aos="zoom-in" data-aos-duration="600">
  <h2>Имя Фамилия</h2>
  <p>Должность</p>
  <p>Email: example@mail.com</p>
</div>

Здесь эффект «масштабирования внутрь» подчеркивает важность контактов и делает карточку более заметной на странице.

3. Плавное появление секций

<section class="about-me" data-aos="fade-right" data-aos-offset="150" data-aos-duration="900">
  <h2>Обо мне</h2>
  <p>Краткая биография, навыки, достижения.</p>
</section>

<section class="skills" data-aos="fade-left" data-aos-offset="150" data-aos-duration="900">
  <h2>Навыки</h2>
  <ul>
    <li>HTML / CSS</li>
    <li>JavaScript / AOS</li>
    <li>React / Vue</li>
  </ul>
</section>

Эффект появления с противоположных сторон позволяет создавать визуальный баланс и удерживать внимание пользователя.

Адаптация под мобильные устройства

Для мобильных версий можно использовать медиазапросы и условные атрибуты:

@media (max-width: 768px) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}

Или инициализировать AOS с проверкой ширины окна:

if (window.innerWidth > 768) {
  AOS.init({ once: true, duration: 600 });
}

Советы по оптимизации

  • Использование once: true снижает нагрузку на рендеринг при множественных анимациях.
  • Минимизация числа анимируемых элементов на одной странице увеличивает плавность прокрутки.
  • Группировка элементов с одинаковыми атрибутами уменьшает объём кода и упрощает поддержку.
  • Проверка производительности на мобильных устройствах обязательна, так как сложные анимации могут тормозить страницу.

Расширенные возможности

  • Кастомные анимации через CSS: Можно комбинировать @keyframes с атрибутом data-aos для создания уникальных эффектов.
  • Динамическая инициализация: AOS поддерживает refresh() для обновления списка элементов после динамического добавления контента через JS.
AOS.refresh(); // обновление анимаций после добавления новых элементов в DOM
  • Интеграция с фреймворками: В React, Vue или Angular компоненты можно оборачивать в <div data-aos="..."> без конфликтов с жизненным циклом компонентов, главное — инициализировать AOS после рендера.

Эти подходы делают AOS универсальным инструментом для создания современного, динамичного и интерактивного портфолио или онлайн-визитки, при этом сохраняя легкость и производительность страницы.

Оглавление