Как сделать плавное появление блока css

Создание эффектов при прокрутке

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

Эффекты открывания можно использовать для создания интересных взаимодействий с пользовательскими компонентами, такими как слайд-шоу. Этот слайд создан с помощью схожей wipe-анимации:

Рассмотрим создание этого эффекта с использованием CSS и Animate on Scroll (AOS) (библиотека JavaScript для анимации элементов при прокрутке в момент входа пользователя в viewport).

Начало

Начнем с добавления библиотеки Animate on Scroll в проект. Добавьте aos.css в тег <head> :

И aos.js перед закрытием тега <body> :

Затем инициализируйте AOS:

Создание открывающегося блока

Для начала создадим открывающийся блок, из которого будет появляться текст. Возьмем текст из Doggo Ipsum, генератора lorem ipsum из doggo lingo.

Класс . reveal-holder представляет собой контейнер для элемента сплошного цветного блока и текста. Дизайн классов выглядит следующим образом:

Благодаря этому, блок открывает и закрывает элемент должным образом. Высота класса .reveal-block должна достигать 101%:

Установка свойства CSS overflow в скрытое значение для класса .reveal-holder помогает предотвратить отсечения вне содержимого элемента.

Использование CSS переходов

Анимации установлены с помощью атрибута data-aos . Например, чтобы открыть элемент справа, добавьте атрибут в класс .reveal-block в HTML:

Свойство CSS transform использует функцию scaleX() в элементе .reveal-block для изменения размеров блока при анимации. Свойство transform-origin устанавливает точку изменения, которая в данном случае находится на 100% 0% или вправо-влево. Благодаря этому, блок начинает двигаться, уменьшаясь в размерах. transition-property устанавливает эффект перехода для применения, а transition-delay устанавливает переход на ожидание, основанное на установленном значении.

Добавьте эти параметры в функцию AOS.init() для воспроизведения анимации один раз:

Теперь анимации прокрутятся один раз! Это выглядит следующим образом:

Аналогичным образом можно добавить этот эффект для изображений. Замените текст с изображением в HTML:

Чтобы слайд открывался слева направо отредактируйте transform-origin на 0% 100%:

Анимация псевдоэлементов

Мы будем использовать псевдоэлементы в классе .reveal-block для создания более стильной анимации.

Начнем с изменений CSS для класса .reveal-block :

Псевдоэлемент ::before является элементом сам по себе и выступает в качестве другого .reveal-block . Однако в нем могут быть установлены свойства, такие как фоновый цвет или место размещения.

Добавьте класс .right в .reveal-block :

Это поможет при анимации с псевдоэлементами. CSS выглядит так:

Выглядит отлично! Осталось только скрыть появление элементов перед прокруткой. Для этого добавим атрибут data-aos в класс .reveal-holder :

Читать:

Как усилить звук на ноутбуке программа бесплатно

И соответствующий CSS:

Подведение итогов

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

Плавное появление элемента

У меня есть меню простенькое. Как сделать чтобы при входе на страницу он плавно появлялся.

Не нужны здесь никакие лишние скрипты. Вот несколько примеров на CSS:

Например можно удалять класс, вот так:

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Плавное появление блока CSS

Рассмотрим, как можно реализовать плавное появление блока при наведении с помощью CSS.

Пример HTML структуры. Два блока: первый видимый, при наведении на который будем плавно показывать второй (скрытый) элемент.

Всплывающий блок может содержать абсолютно любой контент: текст, картинку, видео и т.п.

Плавность появления и исчезновения работает за счёт добавления transition к свойствам opaciy и visibility

До скрытого элемента мы добрались с помощью родственного селектора

(тильда). Также можно было обратиться при помощи соседнего селектора + или дочернего >

Пример с более сложной структурой

Допустим, у нас следующая структура:

Тогда CSS будет следующий:

Таким образом, используя различные селекторы мы можем обратиться к последующим элементам для дальнейшей работы с ними.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.