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

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

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

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

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

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

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

Идея

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

Контент

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

content_scroll_144

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

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

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

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

viewport_content_scroll_144

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

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

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

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

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

dom_beginning_144

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

dom_scrolling_144

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

partially_visible_144

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

fullyvisible_144b

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

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

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

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

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

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

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

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

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

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

scroll_content_into_view_144

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

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

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

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

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

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

Но существует небольшая проблема с данным подходом. Данное событие вызывается при очень большой частоте, поэтому вам нужно не допустить конфликта с DOM (объектной моделью документа). Вы можете использовать setTimeOut или setInterval, чтобы определить задержку реакции браузера на обработку того или иного события, но лучше привязать данные параметры к частоте обновления кадров страницы. Это может быть осуществлено с помощью метода requestAnimationFrame.

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

Конечный результат этого кода идентичен к тому подходу, который мы рассматривали ранее в статье. Как только страница начинает прокручиваться, вызывается обработчик событий dealWithScrolling. Разница лишь в том, что наш обработчик событий не будет вызван раньше, чем метод requestAnimationFrame. Это значит, что текущий обработчик событий будет вызван около 60 раз в секунду, что является допустимым значением при работе с DOM структурами различного рода.

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

Только некоторые фрагменты кода позволят вам выяснить, какие из элементов на текущей веб-странице можно считать видимыми при скроллинге. Чтобы это осуществить, используем метод getBoundingClientRect. Этот метод возвращает некий прямоугольник, который ограничивает ту самую видимую область, со значениями относительно верха, низа страницы, левого и правого направлений, а также относительно левого верхнего угла браузера и его основных свойств (ширины и высоты окна). Другими вашими помощниками будут выступать свойства window.innerHeight window.innerWidth, которые возвращают высоту и ширину окна браузера соответственно.

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

get_bounding_rect_144

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

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

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

В качестве аргумента функции нам необходимо передать элемент. Если элемент частично видимый, функция вернет true. Иначе, функция вернет false.

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

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

Данная функция работает аналогично к isPartiallyVisible функции, которая была описана ранее. Если элемент определился, как полностью видимый, то функция isFullyVisible вернет значение true, если же данный элемент оказался частично видимым для пользователя, то наша функция вернет значение false.

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

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

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

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

Вывод

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

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

Автор статьи: Kirupa Chinnathambi

Перевод и редакция: webupblog.ru

comments powered by HyperComments