Появление элементов при скролле
В этой статье мы рассмотрим, как можно сделать плавное появление элементов при прокрутке страницы.
Мы будем использовать css и немного нативного js, без использования сторонних библиотек. Пристегнитесь!
Вы наверняка видели на многих сайтах красивую анимацию, где блоки появляются в тот момент, когда вы до них доскролили. Иногда они появлялись снизу вверх, иногда слева направо, а иногда непонятно даже как. Сейчас я покажу вам, как это делается.
Анимация при скролле: создаем html
Все начинается с html. Давайте сделаем разметку.
Элемент, который появляется Мы здесь создали два больших блока и между ними текст. Два больших блока нам нужны, чтобы получился скролл страницы.
Сейчас добавим css для них и вы все поймете.
Появление элементов при прокрутке страницы: добавляем начальный CSS
В CSS мы, во-первых, зададим большим блокам высоту, чтобы у нас на странице появился скролл. Это нужно только для демонстрации.
А во-вторых, сделаем так, что в начальном состоянии элемент (наш текст) не будет виден, в дальнейшем он будет появляться, когда пользователь доскроллит до него.
.green < background-color: green; >.red < background-color: red;; >/* Задаем высоту большим блокам, чтобы у нас на странице получится скролл */ .element-big < width: 100%; height: 1200px; >.element-animation < margin: 2rem 0; font-size: 3rem; /* Скроем элемент в начальном состоянии */ opacity: 0; >Теперь перейдем к JS — нам ведь нужно понимать, когда пользователь доскроллил до нужного элемента.
Появление контента при скроллинге: работаем с JS
Нам повезло, веб не стоит на месте и регулярно улучшается, делая нашу жизнь чуточку проще. Если раньше нам нужно было сильно повозиться, чтобы реализовать плавное появление элементов при скролле страницы, то теперь все стало намного понятнее.
Я не буду сильно углубляться, если хотите, можете почитать отдельно про Intersection Observer. С помощью этого мы можем отслеживать видимость элемента в условном «окне» пользователя. И благодаря этому мы можем делать не только анимацию, но и, например, отложенную загрузку, либо «бесконечный» скролл.
Но вернемся к нашей теме. Вставим в JS следующий код:
function onEntry(entry) < entry.forEach(change => < if (change.isIntersecting) < change.target.classList.add('element-show'); >>); > let options = < threshold: [0.5] >; let observer = new IntersectionObserver(onEntry, options); let elements = document.querySelectorAll('.element-animation'); for (let elm of elements)
Здесь мы цепляемся за класс .element-animation и будем следить, доступен он на «экране» или нет. Обратите внимание, что вы можете использовать этот класс сразу к нескольким элементам.
Итак, когда пользователь доскроллил до класса .element-animation, то мы добавляем ему класс .element-show
Вот и все, что делает JS. Проверяет виден ли класс и если да, то добавляет к нему еще один класс.
А теперь зная это, давайте вернемся к CSS.
Появление элементов на сайте: заключительный шаг
У нас добавляется класс .element-show к классу .element-animation, когда до него доскроллил юзер. Давайте же сделаем его видимым. Для этого достаточно просто прописать в CSS следующее:
.element-animation.element-show
Bот и все, теперь наш блок будет видимым, когда до него доскроллит пользователь.
Если хотите, вы можете сделать так, чтобы элемент появлялся снизу:
.element-animation < margin: 2rem 0; font-size: 3rem; /* Скроем элемент в начальном состоянии */ opacity: 0; transform: translateY(100%); >.element-animation.element-show
Ничего сложного. Вы можете экспериментировать, добавляя различные варианты к первоначальному состоянию, за затем меняя их на стандартные. Попробуйте, например, поиграться с transform: rotate(5deg).
Плавное появление элемента
У меня есть меню простенькое. Как сделать чтобы при входе на страницу он плавно появлялся.
Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 Отслеживать
5,050 2 2 золотых знака 15 15 серебряных знаков 44 44 бронзовых знака
задан 23 апр 2021 в 15:13
Dmitry Chernyak Dmitry Chernyak
375 1 1 золотой знак 3 3 серебряных знака 10 10 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Не нужны здесь никакие лишние скрипты. Вот несколько примеров на CSS:
header < opacity: 0; animation: ani 2.5s forwards; >@keyframes ani < 0% 100% > Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 header < transform: translateX(-150%); animation: ani 1s forwards; >@keyframes ani < 0% 100% > Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 header < transform: translateY(-150%); animation: ani 1s forwards; >@keyframes ani < 0% 100% > Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 header < font-size: 0; animation: ani 2s forwards; >@keyframes ani < 0% 100% > Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 header < position: absolute; overflow: hidden; top: 15px; left: 0; width: 0; text-align: right; white-space: nowrap; animation: ani 1s linear forwards; >@keyframes ani < 0% 100% > Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 header>div header>div:nth-child(1) header>div:nth-child(2) header>div:nth-child(3) header>div:nth-child(4) header>div:nth-child(5) @keyframes ani < 0% 15% 30% 45% 60% 75% 85% 100% > Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 Как сделать плавное появление блока CSS?
В этой статье хочу вам показать два, очень интересных приема работы с CSS3, которые дают возможность сделать плавное появление блока CSS свойствами. Используя данную возможность можно сделать достаточно много интересных вещей для своего сайта. Например, мы можем сделать плавное появление элемента при наведении на какой-либо элемент на странице, или показать элемент через определенный интервал времени не используя при этом никаких скриптов!
Навигация по статье:
- Плавное появление блока CSS при наведени
- Плавное появление блока CSS с задержкой по времени
Плавное появление блока CSS при наведении
В ситуации, когда нам нужно показать блок при наведении, мы должны сделать следующее:
-
1. Создаем блок, который будет плавно появляться на странице, и блок, который будет по умолчанию скрыт:
width : 300px ;
background : #176387;
color : #fff;
font — size : 25px ;
border : 3px solid #2BA2DB;
padding : 20px ;
margin : auto ;
margin — bottom : 20px ;
text — align : center ;
. hidden — block <
width : 300px ;
background : #176387;
color : #fff;
font - size : 25px ;
border : 3px solid #2BA2DB;
padding : 20px ;
margin : auto ;
text - align : center ;
opacity : 0 ; /*Элемент полностью прозрачный (невидимый)*/
transition : 1s ; /*Скорость перехода состояния элемента*/
. on - hover : hover + . hidden - block <
opacity : 1 ;
transition : 1s ;
Селектор .on-hover:hover+ .hidden-block означает, что при наведении на элемент с классом .on-hover будут применены свойства для элемента .hidden-block. В данном случае мы делаем этот элемент видимым, то есть меняем прозрачность (opacity:1;).
Так как блок .hidden-block не находится внутри .on-hover, то я использую hover с +. В случае если у вас скрытый элемент находится внутри элемента, на который нужно навести указатель мышки, то вам нужно использовать вот такой селектор:
.on-hover:hover .hidden-block
Вот что у нас получилось:
Плавное появление блока CSS с задержкой по времени
Второй вариант реализации плавного появления блока с помощью CSS заключается в использовании правила @keyframes.
Подробно об использовании данного правила вы можете почитать в этой статье:
Создаём CSS-анимацию без плагинов
В случае если нам нужно показать элемент с некоторой задержкой, мы должны сделать следующее:
-
1. Создаем блок, который по умолчанию будет полностью прозрачным:
Плавное появление блока CSS при скроллинге: инструкция для начинающих
Если вы занимаетесь веб-разработкой, то, скорее всего, знаете, как важен эффектный дизайн для привлечения посетителей на сайт. Но многие разработчики только начинают свой путь в этой сфере и сталкиваются с проблемой создания интересной и динамичной страницы. Одним из способов повышения интерактивности сайта является плавное появление блоков CSS при скроллинге.
Этот эффект позволяет появляться содержимому по мере прокрутки страницы, привлекая внимание к тому, что является важным либо просто красивым. Он может использоваться для различных целей, таких как анимация, галереи изображений и других динамических элементов. Если вы хотите добавить этот эффект на свой сайт, необходимо следовать ряду инструкций.
В этой статье мы рассмотрим основные этапы создания плавного появления блока CSS при скроллинге. Вы получите подробную пошаговую инструкцию, которая поможет вам настроить этот эффект на вашем сайте. Кроме того, вы узнаете, какие инструменты лучше использовать, чтобы получить наилучший результат.