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

Как добавить плавное появление элементов при прокрутке страницы

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

Шаг 1: Подготовка HTML-структуры

Для начала создадим простую HTML-структуру с несколькими блоками, которые будут появляться плавно при прокрутке страницы.

        
Блок 1
 
Блок 2
 
Блок 3
 
   

Шаг 2: Стилизация элементов

Теперь добавим немного стилей для наших блоков и зададим начальное состояние элементов (невидимые и смещенные).

Шаг 3: Реализация плавного появления с помощью JavaScript

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

document.addEventListener('DOMContentLoaded', function() < let blocks = document.querySelectorAll('.block'); function checkBlocksVisibility() < let windowHeight = window.innerHeight; blocks.forEach(block => < let blockPosition = block.getBoundingClientRect().top; if (blockPosition < windowHeight - 100) < block.style.opacity = "1"; block.style.transform = "translateY(0)"; >>); > checkBlocksVisibility(); window.addEventListener('scroll', function() < checkBlocksVisibility(); >); >);

Теперь, когда вы прокрутите страницу, элементы будут плавно появляться и двигаться в свою исходную позицию. 🎉

Заключение

В этой статье мы рассмотрели, как добавить плавное появление элементов при прокрутке страницы с использованием HTML, CSS и JavaScript. Эта техника поможет сделать ваш сайт более интерактивным и привлекательным для пользователей.

Если вы хотите углубить свои знания в области веб-разработки, рекомендую посетить замечательную школу

Источник

Несколько неочевидных frontend-хитростей

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

Оформление декоративной линии текста (text-decoration-style, text-decoration-color)

В Firefox и Safari уже довольно давно появились дополнительные возможности для оформления декоративной линии, которая добавляется к тексту с помощью свойства text-decoration.

К примеру, можно задавать свойству text-decoration сразу несколько значений (причем это работает уже очень давно):

Можно задавать цвет для оформления текста:

А также стиль линии:

Учтите, что в данный момент работают новые свойства только в Firefox и, частично, в Safari. Посмотреть рабочий пример можно здесь

Плавная прокрутка страницы на CSS (scroll-behaviour)

Малоподдерживаемое, но очень полезное свойство scroll-behaviour позволит нам одной строкой сделать скролл на странице плавным. Работает как при прокрутке в нужное место при переходе по якорям, так и при прокрутке страницы JS-ом.

• smooth — плавная прокрутка;
• instant — мгновенная прокрутка;
• auto — на усмотрение браузера.

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

Анимация появления элемента (быстро и легко)

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

Как это часто делали раньше:
1) на сервер посылаетcя запрос;
2) после загрузки ответа данные добавляются в скрытый на странице блок;
3) блоку присваивается класс, в котором прописана анимация его появление (либо (о, ужас!) блок анимируется JS-ом).

Так вот, последний пункт можно считать избыточным, ведь у нас есть старое доброе CSS-свойство animation. По умолчанию анимация срабатывает при загрузке страницы либо при изменении DOM-дерева (а именно при добавлении элементу класса с анимацией или самого элемента). Поэтому, важно не хранить незаполненные блоки в DOM, а добавлять их динамически в контейнеры по мере загрузки.

@keyframes fade-in < 0% < opacity: 0; >100% < opacity: 1; >> .content

• Прописав @keyframes один раз, можно использовать их в любом месте CSS для добавления типовой анимации всем нужным элементам;
• Обращения к DOM в JS будут сведены к минимуму, что при большом количестве элементов или итераций поможет снизить нагрузку на страницу.

Изучить рабочий пример можно здесь.

Разрыв строки на CSS

Если в определенном месте на странице вам нужно добавить перенос строки, а в HTML лезть не хочется (или невозможно), на помощь придет CSS. Первое, что приходит в голову — добавить псевдоэлемент с тегом
внутри:

К сожалению (а может, и к счастью), добавлять теги в псевдоэлементы, нельзя. Но выход есть!

SVG с интерактивными элементами

Если вам когда-нибудь приходилось оформлять взаимодействие с SVG-элементами, вы знаете, что сделать это не так-то просто. Чтобы обращаться в CSS к отдельным SVG-элементам, приходится добавлять на страницу не тег , а код всего SVG-изображения целиком. Это делает HTML-код ужасно громоздким. В результате нам приходится жертвовать размером страницы и лаконичностью кода ради визуальных эффектов.

 
 
Элемент, который появляется 
 

.green < background-color: green; >.red < background-color: red;; >/* Задаем высоту большим блокам, чтобы у нас на странице получится скролл */ .element-big < width: 100%; height: 1200px; >.element-animation < margin: 2rem 0; font-size: 3rem; /* Скроем элемент в начальном состоянии */ opacity: 0; >

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-show

.element-animation < margin: 2rem 0; font-size: 3rem; /* Скроем элемент в начальном состоянии */ opacity: 0; transform: translateY(100%); >.element-animation.element-show