Урок 5. Добавление анимаций и интерактивных эффектов в портфолио

В этом уроке мы добавим немного магии на нашу страницу. Мы научимся создавать анимации и интерактивные эффекты с помощью CSS, чтобы наше портфолио стало более динамичным и привлекательным. Простые эффекты при наведении и плавные переходы сделают взаимодействие с вашим сайтом приятным и запоминающимся.

Что такое CSS-анимации?

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

Добавляем анимации при наведении на карточки проектов

Для начала давайте добавим эффект при наведении на наши карточки проектов. При наведении они будут слегка увеличиваться и изменять цвет фона, чтобы привлечь внимание пользователя.

Откройте файл styles.css и добавьте следующий код:

/* Добавляем анимацию для карточек проектов */
.project-link {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.project-link:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
}

Что здесь происходит:

• transition: transform 0.3s ease, background-color 0.3s ease; — мы добавили переходы для свойства transform (изменение размера) и для background-color (цвет фона). Это означает, что любые изменения этих свойств будут происходить плавно в течение 0.3 секунды.

• .project-link:hover — при наведении на карточку проекта (:hover), её фон изменится на светло-серый, а сама карточка увеличится на 5% (scale(1.05)).

Добавляем плавные появления элементов

Теперь давайте добавим анимацию появления элементов на странице. Например, мы можем сделать так, чтобы блоки с проектами плавно появлялись при загрузке страницы, создавая эффект постепенного появления контента.

Добавьте следующий код в файл styles.css:

/* Анимация появления для карточек проектов */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-link {
    animation: fadeIn 0.6s ease forwards;
}

Что здесь происходит:

• @keyframes fadeIn — это объявление анимации. Мы создали анимацию fadeIn, которая изменяет opacity (прозрачность) и transform (положение) элемента.

• from { opacity: 0; transform: translateY(20px); } — в начале анимации элемент будет полностью прозрачным и сдвинутым на 20 пикселей вниз.

• to { opacity: 1; transform: translateY(0); } — в конце анимации элемент будет полностью видимым и находиться на своём исходном месте.

• animation: fadeIn 0.6s ease forwards; — мы применили анимацию fadeIn к карточкам проектов, которая будет длиться 0.6 секунд и будет выполняться один раз при загрузке страницы.

Добавляем анимацию к другим элементам

Теперь давайте добавим анимацию к заголовкам и блоку "О себе", чтобы они также плавно появлялись при загрузке страницы. Это создаст более гармоничный и плавный визуальный эффект.

/* Анимация появления для заголовков и блока "О себе" */
.header, .about {
    animation: fadeIn 0.6s ease forwards;
}

.projects h2 {
    animation: fadeIn 0.6s ease forwards;
}

Что здесь происходит:

• .header, .about и .projects h2 — мы применили анимацию fadeIn к заголовку блока "О себе" и "Проекты".

Проверяем анимации

Теперь давайте проверим, как работают наши анимации. Откройте свою страницу в браузере, обновите её и обратите внимание на плавное появление блоков и эффект увеличения карточек проектов при наведении. Эти простые анимации добавляют динамики и делают ваше портфолио более современным и привлекательным.

Что дальше?

Поздравляю! Вы успешно добавили анимации и интерактивные эффекты на свою страницу. В следующем уроке мы продолжим улучшать наше портфолио, добавив новые элементы и стили.