В этом руководстве мы поговорим о том, как создать эффект открывающегося блока при прокрутке. Эффект состоит из сплошного цветного блока, который уменьшается в размере, открывая текст или изображение.
Эффекты открывания можно использовать для создания интересных взаимодействий с пользовательскими компонентами, такими как слайд-шоу. Этот слайд создан с помощью схожей wipe-анимации:
Рассмотрим создание этого эффекта с использованием CSS и Animate on Scroll (AOS) (библиотека JavaScript для анимации элементов при прокрутке в момент входа пользователя в viewport).
Начало
Начнем с добавления библиотеки Animate on Scroll в проект. Добавьте aos.css в тег <head>:
<link href=”https://unpkg.com/[email protected]/dist/aos.css" rel=”stylesheet”>И aos.js перед закрытием тега <body>:
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>Затем инициализируйте AOS:
AOS.init();Создание открывающегося блока
Для начала создадим открывающийся блок, из которого будет появляться текст. Возьмем текст из Doggo Ipsum, генератора lorem ipsum из doggo lingo.
<div class="reveal-holder">
<div class="reveal-block"></div>
<h1 class="heading">Maximum borkdrive</h1>
</div>Класс .reveal-holder представляет собой контейнер для элемента сплошного цветного блока и текста. Дизайн классов выглядит следующим образом:
.reveal-holder {
position: relative;
display: inline-block;
overflow: hidden;
}
.reveal-block {
position: absolute;
top: 0;
width: 100%;
height: 101%;
background: white;
}
Благодаря этому, блок открывает и закрывает элемент должным образом. Высота класса .reveal-block должна достигать 101%:
Установка свойства CSS overflow в скрытое значение для класса .reveal-holder помогает предотвратить отсечения вне содержимого элемента.
Использование CSS переходов
Анимации установлены с помощью атрибута data-aos. Например, чтобы открыть элемент справа, добавьте атрибут в класс .reveal-block в HTML:
<div class="reveal-block" data-aos="reveal-right"></div>И CSS:
[data-aos="reveal-right"] {
transform: scaleX(1);
transform-origin: 100% 0%;
transition-property: transform;
transition-delay: 0.5s;
}
[data-aos="reveal-right"].aos-animate {
transform: scaleX(0);
}Свойство CSS transform использует функцию scaleX() в элементе .reveal-block для изменения размеров блока при анимации. Свойство transform-origin устанавливает точку изменения, которая в данном случае находится на 100% 0% или вправо-влево. Благодаря этому, блок начинает двигаться, уменьшаясь в размерах. transition-property устанавливает эффект перехода для применения, а transition-delay устанавливает переход на ожидание, основанное на установленном значении.
Добавьте эти параметры в функцию AOS.init() для воспроизведения анимации один раз:
AOS.init({
once: true
});Теперь анимации прокрутятся один раз! Это выглядит следующим образом:
Аналогичным образом можно добавить этот эффект для изображений. Замените текст с изображением в HTML:
<div class="reveal-holder">
<div class="reveal-block" data-aos="reveal-left"></div>
<img src="pomeranian.jpg" alt="Pomeranian">
</div>Чтобы слайд открывался слева направо отредактируйте transform-origin на 0% 100%:
[data-aos="reveal-left"] {
...
transform-origin: 0% 100%;
...
}Анимация псевдоэлементов
Мы будем использовать псевдоэлементы в классе .reveal-block для создания более стильной анимации.
Начнем с изменений CSS для класса .reveal-block:
.reveal-block {
position: absolute;
top: 0;
width: 100%;
height: 101%;
background: white;
}
.reveal-block::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
background: lightgray;
transition-property: transform;
transition-duration: 0.5s;
}
Псевдоэлемент ::before является элементом сам по себе и выступает в качестве другого .reveal-block. Однако в нем могут быть установлены свойства, такие как фоновый цвет или место размещения.
Добавьте класс .right в .reveal-block:
<div class="reveal-block right" data-aos="reveal-right"></div>Это поможет при анимации с псевдоэлементами. CSS выглядит так:
.reveal-block.right::before {
transform: scaleX(0);
transform-origin: 0% 100%;
}
.reveal-block.right.aos-animate::before {
transform: scaleX(1);
}Получаем результат:
Выглядит отлично! Осталось только скрыть появление элементов перед прокруткой. Для этого добавим атрибут data-aos в класс .reveal-holder:
<div class="reveal-holder" data-aos="reveal-item">...</div>И соответствующий CSS:
[data-aos="reveal-item"] {
visibility: hidden;
transition-property: visibility;
transition-duration: 0s;
}
[data-aos="reveal-item"].aos-animate {
visibility: visible;
}Подведение итогов
Анимации прокрутки, такие как эффект открывающегося блока, могут быть реалистичными и элегантными. Надеюсь, это руководство помогло вам разобраться в том, как создавать такие анимации, а также, как они работают.
Live-демо код доступен на CodePen.
Также полную версию кода можно найти на репозитории GitHub.
Перевод статьи Katherine Kato: Creating Reveal Effects on Scroll
