Источник: Nuances of Programming
В этом руководстве мы поговорим о том, как создать эффект открывающегося блока при прокрутке. Эффект состоит из сплошного цветного блока, который уменьшается в размере, открывая текст или изображение.
Эффекты открывания можно использовать для создания интересных взаимодействий с пользовательскими компонентами, такими как слайд-шоу. Этот слайд создан с помощью схожей wipe-анимации:
Рассмотрим создание этого эффекта с использованием CSS и Animate on Scroll (AOS) (библиотека JavaScript для анимации элементов при прокрутке в момент входа пользователя в viewport).
Начало
Начнем с добавления библиотеки Animate on Scroll в проект. Добавьте aos.css в тег <head>:
<link href=”https://unpkg.com/aos@2.3.1/dist/aos.css" rel=”stylesheet”>
И aos.js перед закрытием тега <body>:
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
Затем инициализируйте AOS:
AOS.init();
Создание открывающегося блока
Класс .reveal-holder представляет собой контейнер для элемента сплошного цветного блока и текста. Дизайн классов выглядит следующим образом:
Благодаря этому, блок открывает и закрывает элемент должным образом. Высота класса .reveal-block должна достигать 101%:
Установка свойства CSS overflow в скрытое значение для класса .reveal-holder помогает предотвратить отсечения вне содержимого элемента.
Использование CSS переходов
Анимации установлены с помощью атрибута data-aos. Например, чтобы открыть элемент справа, добавьте атрибут в класс .reveal-block в HTML:
<div class="reveal-block" data-aos="reveal-right"></div>
И CSS:
Свойство CSS transform использует функцию scaleX() в элементе .reveal-block для изменения размеров блока при анимации. Свойство transform-origin устанавливает точку изменения, которая в данном случае находится на 100% 0% или вправо-влево. Благодаря этому, блок начинает двигаться, уменьшаясь в размерах. transition-property устанавливает эффект перехода для применения, а transition-delay устанавливает переход на ожидание, основанное на установленном значении.
Добавьте эти параметры в функцию AOS.init() для воспроизведения анимации один раз:
AOS.init({
once: true
});
Теперь анимации прокрутятся один раз! Это выглядит следующим образом:
Аналогичным образом можно добавить этот эффект для изображений. Замените текст с изображением в HTML:
Чтобы слайд открывался слева направо отредактируйте transform-origin на 0% 100%:
Анимация псевдоэлементов
Мы будем использовать псевдоэлементы в классе .reveal-block для создания более стильной анимации.
Начнем с изменений CSS для класса .reveal-block:
севдоэлемент ::before является элементом сам по себе и выступает в качестве другого .reveal-block. Однако в нем могут быть установлены свойства, такие как фоновый цвет или место размещения.
Добавьте класс .right в .reveal-block:
<div class="reveal-block right" data-aos="reveal-right"></div>
Это поможет при анимации с псевдоэлементами. CSS выглядит так:
Получаем результат:
Выглядит отлично! Осталось только скрыть появление элементов перед прокруткой. Для этого добавим атрибут data-aos в класс .reveal-holder:
<div class="reveal-holder" data-aos="reveal-item">...</div>
И соответствующий CSS:
Подведение итогов
Анимации прокрутки, такие как эффект открывающегося блока, могут быть реалистичными и элегантными. Надеюсь, это руководство помогло вам разобраться в том, как создавать такие анимации, а также, как они работают.
Live-демо код доступен на CodePen.
Также полную версию кода можно найти на репозитории GitHub.
Читайте нас в телеграмме и vk
Перевод статьи Katherine Kato: Creating Reveal Effects on Scroll