Трансформация скроллинга как сделать

Анимация при прокрутке страницы на JavaScript и CSS

Испокон веков, всякий раз, когда вы прокручивали страницу, полную различного контента, ничего восхитительного не происходило. Контент, который попадал в поле зрения просто появлялся. А тот, который был прокручен — попросту исчезал из виду.

С нововведениями в CSS и DOM API перед каждым пользователем открываются новые горизонты для создания анимации при скролле. Но давайте меньше говорить и больше делать. Предлагаю ознакомиться с таким примером:

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

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

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

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

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

Контент

Начиная с самого верха веб-страницы, первое, что видит пользователь, это контент:

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

Время скроллить

Контент, расположенный на любой веб-странице, является автономным, но способ просмотра данного контента зависит от вашего браузера (или других параметров).

Всякий раз, когда браузер видит больше контента, чем он может отобразить за один раз, он будет давать вам возможность прокрутить содержимое текущей веб-страницы:

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

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

Идентификация элементов

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

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

Во время скороллинга подмножество видимых элементов будет меняться:

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

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

Несмотря на то, что на данный момент довольно сложно ощутить разницу между этими двумя методами (при написании кода), результат, который они обеспечивают на практике, сможет расставить все точки над «i».

Изменение элементов

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

Это решение базируется на создании значений класса видимых (в конкретный момент времени) элементов. Теперь у нас одна задача: активировать любой из стилей CSS, который сможет в дальнейшем управлять прокручиваемыми элементами на данной веб-странице. Это основная концепция моделирования элементов с помощью JavaScript.

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

Эти элементы имеют следующий стиль:

Причина, по которой мы делаем это, не позволяет установить различный вид наших элементов в HTML коде. По крайней мере, это не конечная цель, которую мы преследуем. Наша цель – сделать так, чтобы данные элементы имели разные стили. В тот момент, когда наши элементы, расположенные на веб-странице, получают активный статус, параметр стилей #myList li.active применяется к ним. Это ключевой момент, когда видимые элементы отличаются от невидимых (которым не присваивается никакое значение).

Остальное за заливкой. Говоря более точно, на странице мы видим то, что прописано в HTML и CSS. Если следовать примеру, то когда стиль #myList li.active является активным, видимые элементы станут анимированными. Проверить это можно с помощью такого кода, прописанного в CSS:

Если визуализировать вышеуказанное, то мы получим примерно следующее:

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

Создание структуры

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

Создание события прокрутки

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

Советуем взглянуть на следующий фрагмент:

Определение видимых элементов

Для визуализации полученных сведений рекомендуем ознакомиться с данной диаграммой:

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

Определение частично видимых элементов

Чтобы определить, какая часть элементов на странице является видимой, вы можете использовать функцию isPartiallyVisible :

Определение полностью видимых элементов

Чтобы определить, является ли элемент полностью видимым, вы можете использовать функцию isFullyVisible :

Собираем все воедино

Если вы хотите изучить полный код (HTML, JS, CSS) для нашего примера, рекомендуем вам ознакомиться со следующими материалами:

Но не стоит пугаться столь большого количества кода, которого на самом деле меньше, чем кажется сразу. Здесь также много интересных элементов, которые описаны в body, нашем списке и др. Не забудьте проследить, чтобы в JavaScript были учтены все особенности для корректной работы веб-страницы и ее контента. Также не забудьте добавить функции isFullyVisible и isPartiallyVisible, чтобы определить, к какой категории относятся те или иные элементы. Этот пример содержит все, о чем мы говорили ранее, и даже больше!

Вывод

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

Теперь остается лишь пожелать вам удачи в ваших начинаниях, и я уверен на 100%, что у вас получится.

Источник

Обзор технологий скроллинга

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

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

Технологии для реализации специфических механизмов скроллинга

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

▍CSS-свойство position: sticky

Синий элемент «упирается» в верхнюю часть контейнера и не прокручивается вместе с остальными элементами

Вот демонстрация такого скроллинга.

▍Эффект параллакса

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

Эффект параллакса: элементы движутся с разной скоростью.

Вот демонстрация эффекта параллакса.

▍Прокрутка с привязкой к определённым точкам

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

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

Вот демонстрация работы скроллинга с точками привязки.

▍Плавная прокрутка

Плавный скроллинг поддерживается средствами браузера при прокрутке страницы до определённого раздела с использованием метода window.scrollTo() в JavaScript, или даже с применением CSS-свойства scroll-behavior. В настоящее время для реализации плавного скроллинга со сглаживанием движений колеса мыши требуются специальные JavaScript-библиотеки. Но при применении таких библиотек нужно обеспечить их нормальное взаимодействие с другими технологиями скроллинга. Кроме того, использование плавного скроллинга — это далеко не всегда хорошая идея.

Технологии скроллинга общего назначения

▍Использование API Intersection Observer

API IntersectionObserver позволяет с успехом решать различные задачи, связанные со скроллингом, в том случае, если всё, что нужно для запуска анимации, — это знание о том, видим ли элемент в области просмотра, а так же о том, какая именно часть элемента видима. Это делает API IntersectionObserver отличным инструментом для запуска анимации, сопровождающей появление элемента на экране. Но, даже так, некоторые эффекты очень сложно (хотя и можно) реализовать с помощью этого API. Например — это запуск разных анимаций в зависимости от направления движения элемента. Этот API, кроме того, не особенно полезен в ситуации, если при скроллинге нужно запускать анимацию тогда, когда элемент находится где-то в середине области просмотра, то есть, не появляется в области просмотра и не исчезает из неё.

▍Использование события scroll

Инструменты для создания механизмов скроллинга общего назначения

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

▍ScrollMagic

Библиотека ScrollMagic даёт нам сравнительно простой API, позволяющий создавать различные эффекты при скроллинге. Эта библиотека может работать совместно с различными библиотеками для анимации, наподобие GSAP и Velocity.js. Правда, в последние несколько лет эта библиотека недостаточно хорошо поддерживается. Это привело к тому, что была создана библиотека ScrollScene.

▍ScrollScene

ScrollScene — это, в сущности, обёртка, которая направлена на то, чтобы повысить удобство работы с библиотекой ScrollMagic и (или) с API IntersectionObserver. Здесь используется собственная версия ScrollMagic, которая отличается лучшей поддержкой, чем обычный вариант библиотеки. Тут имеются и дополнительные возможности, наподобие проигрывания видео и поддержки контрольных точек, влияющих на анимацию. Кроме того, эта библиотека использует GSAP.

▍ScrollTrigger

Библиотека ScrollTrigger — это официальный GreenSock-плагин для GSAP. Эта библиотека отличается большим набором возможностей, её API кажется мне самым простым из API существующих библиотек для скроллинга. Используя эту библиотеку, вы полностью контролируете то, где именно начинается и заканчивается анимация скроллинга, вы можете анимировать при прокрутке всё что угодно (WebGL, canvas, SVG, DOM), можете закреплять элементы на время выполнения анимации. Этим возможности данной библиотеки не ограничиваются. Кроме того, эту библиотеку поддерживает GreenSock, получить помощь по её использованию можно на форумах GreenSock.

▍Библиотека, достойная упоминания: Locomotive Scroll

Сравнение технологий и инструментов

Вот сравнение технологий скроллинга.

Вот сравнение рассмотренных библиотек.

Итоги

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

Я обычно, для настройки скроллинга, рекомендую использовать библиотеку ScrollTrigger. Она позволяет достичь всего, на что способен чистый CSS, а так же — многого другого. Эта библиотека берёт на себя заботу о браузерной поддержке тех или иных технологий, облегчает выполнение вычислений, что позволяет тому, кто её использует, просто заниматься своими делами.

Какие технологии вы используете при настройке скроллинга в своих проектах?

Источник

Как запускать CSS-анимацию при прокрутке страницы

В этом пошаговом руководстве будет рассмотрено создание CSS-анимации с нуля и её включение при скролле (прокрутке вверх-вниз) страницы, когда HTML-элемент находится в поле зрения — видимой части окна, с помощью Intersection Observer API.

Настройка CSS-анимации с помощью ключевых кадров

В этом примере будет анимирован HTML-элемент квадратной формы:

Управление анимацией с помощью CSS-класса

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

Добавление CSS-класса, когда элемент появляется при скролле (прокрутке страницы вверх-вниз)

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

Вот три способа определить, когда элемент находится в видимой области окна:

Для базовой анимации с запуском при скролле, оптимально использование Intersection Observer API, потому что он требует меньше кода, удобнее и лучше с точки зрения производительности.

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

Intersection Observer API можно рассматривать, как обычный слушатель событий, но с некоторыми дополнительными опциями. Вместо того, чтобы прикреплять прослушивание событий к HTML-элементу, надо заставить наблюдателя отслеживать элемент и его положение на странице.

Начнём с создания наблюдателя и заставим его отслеживать HTML-элемент:

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

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

Собираем всё вместе. Обратите внимание, что entry — это объект, предоставленный наблюдателем, а entry.target — это фактический элемент, за которым который ведется наблюдение, поэтому именно ему нужно добавить CSS-класс для запуска анимации.

Теперь, когда HTML-элемент пересекает границы окна браузера, ему будет добавлен CSS-класс, который будет воспроизводить анимацию.

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

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

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

Теперь — порядок! Добавляя и удаляя CSS-класс каждый раз, когда при скролле страницы HTML-элемент входит в область просмотра, запускается CSS-анимация.

Запуск CSS-transition при скролле

В этом примере CSS-transition запускается, когда элемент-оболочка при скролле появляется в окне. Если Javascript не запустился, элемент всё-равно будет виден.

Как видите, эту технику можно расширять разными способами, чтобы создать множество эффектов анимации.

Источник