Эффект появления при скролле что это
Перейти к содержимому

Эффект появления при скролле что это

Появление элементов при скролле

Появление элементов при скролле

В этой статье мы рассмотрим, как можно сделать плавное появление элементов при прокрутке страницы.

Мы будем использовать 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. Расставляем текстовые блоки и добавляем над каждым текстом элемент Shape. Уменьшаем непрозрачность Shape до 90%.

2. В пошаговой анимации выставляем Event (событие) — on Scroll (при скролле), Start Trigger (начало триггера анимации) — on Window Top (от верхнего края экрана), Trigger Offset (отступ, задержка) — 200 пикселей. В первом шаге при дистанции 10 пикселей выставляем смещение вниз на 90 пикселей, чтобы полупрозрачный шейп перестал перекрывать текстовый блок.

3. Для следующих элементов выставляйте такие же настройки. Если вы хотите, чтобы следующий текстовый блок показывался быстрее, увеличьте значение Trigger Offset.

4. Чтобы при смещении вниз шейпы не перекрывали нижние элементы, откройте слои (ctrl (command) + L) и разместить верхние элементы под нижними.

Плавное появление линии при скролле страницы

Как при скролле сайта, когда дойду до нужного блока, реализовать плавное из центра до левого и правого края появление линии?

Отслеживать
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака
задан 20 янв 2021 в 20:13
21 1 1 бронзовый знак
«. делаю сайт.» Это точно? А то что-то кода не видно.
20 янв 2021 в 20:16
@UModeL, вы забыли про чертоги разума
20 янв 2021 в 20:31

посмотрите в сети hover.css — ianlunn.github.io/Hover — тут вроде как есть и нужный вам эффект — зайдите (когда скачаете) внутрь стилей и посмотрите как устроен нужный вам

20 янв 2021 в 20:32
Нету кода для линии, просто нужно чтоб с центра страницы до краев плавно линия выходило.
20 янв 2021 в 20:38

@Вадим: «Нету кода для линии. « Но, код, куда собираетесь вставлять линию есть? Приложите к вопросу. И, да, одним лишь CSS обойтись не получится — отслеживать скролл только через JS, поэтому добавьте метку в вопросе.

21 янв 2021 в 2:55

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вот простой пример, когда элемент (ваш блок) находится ровно по центру экрана, то ему добавляется еще один класс, для которого мы прописываем правило @keyframes и устанавливаем ключевые кадры. Но это импровизация, потому что из вашего вопроса не совсем понятно, в какой момент должна происходить анимация, а также каким элементом должна являться эта линия.

$(document).ready(function() < var windowHeight = $(window).height(); $(document).on('scroll', function() < $('.block').each(function() < var self = $(this), height = self.offset().top + self.height() / 2 - windowHeight / 2; if ($(document).scrollTop() >= height) < self.addClass('active'); >>); >); >);
.page < position: relative; height: 3000px; >.block < position: absolute; top: 50%; margin-top: -100px; left: 0; width: 100%; height: 100px; background: chocolate; line-height: 100px; text-align: center; color: white; >.active:before < content: ""; display: block; position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: black; animation: 3s linear animate; >@keyframes animate < 0% < left: 50%; width: 10%; >100% < left: 0%; width: 100%; >> h1
 

Крутим вниз

Какой-то блок

Анимация на Тильде

У Тильды 3 вида анимации. Базовые эффекты появления элементов делаются на стандартных блоках. В Zeroblock больше возможностей, где настраиваются базовые эффекты или пошаговая анимация.

ЭФФЕКТЫ В СТАНДАРТНЫХ БЛОКАХ
2 варианта анимации
Можно настроить появление элементов с любой стороны или методом увеличения.
Легко настраивать
Настройка таких эффектов доступна даже начинающему пользователю Тильды.
Не увеличивают время загрузки
Эффекты не утяжеляют сайт, поэтому на время загрузки не влияют.
БАЗОВАЯ АНИМАЦИЯ В ZERO-БЛОКЕ

Самые популярные виды анимации, часть которых взята из стандартного функционала, но с возможностью дополнительной настройки. Это эффекты появления при увеличении или через прозрачность справа, слева, сверху или снизу, фиксацию элементов и параллакс-эффект. Дополнительно можно менять характеристики этой анимации: настраивать скорость, расстояние, отступы и задержку.

Zero block

Click „Block Editor» to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.

Tilda Publishing
create your own block from scratch
Широкий выбор

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

Дополнительные настройки

Можно задавать скорость появления элемента, задержку. Настроить расстояние, откуда появится элемент. Задать ему положение относительно экрана.

Настройка каждого элемента

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

ПОШАГОВАЯ АНИМАЦИЯ В ZERO-БЛОКЕ

Step-by-step анимация — это настройка трансформации или движения элемента для каждого шага. Если в базовой анимации в Zero-блоке после появления элемент будет принимать статичное положение или фиксироваться при скролле, то в пошаговой анимации значительно больше возможностей. Можно менять траекторию движения, скорость, прозрачность, поворачивать элемент и задавать ему действия по наведению и клике курсора. С такой анимацией воплощаются самые креативные идеи дизайнера. Сайт становится уникальным и запомнится пользователю.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *