Статья опубликована в №70 (июнь) 2019
Разделы: Информационные технологии
Размещена 30.05.2019. Последняя правка: 29.05.2019.
Просмотров - 1708

ИССЛЕДОВАНИЕ ТЕХНОЛОГИЙ СОЗДАНИЯ ПАРАЛЛАКС-ЭФФЕКТА ПРИ ПОМОЩИ ВЕБ-БРАУЗЕРА

Бажан Павел Владимирович

Бакалавр

Санкт-Петербургский национальный исследовательский университет информационных технологий, механики и оптики

Студент

Государев И.Б., кандидат педагогических наук, доцент, Санкт-Петербургский национальный исследовательский университет информационных технологий, механики и оптики

УДК 004

Введение. Изначально всемирная паутина разрабатывалась с целью хранения и извлечения данных в виде документов, однако с развитием таких технологий как язык разметки HTML и таблицы стилей CSS появилась возможность создавать стилистически уникальные документы. Разработчик больше не был ограничен одной гарнитурой шрифта, мог использовать огромное количество цветов и добавлять изображения в свой материал. А через некоторое время появилась возможность визуализации и трехмерной графики (3D) в окне браузера.

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

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

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

Параллакс-скроллинг (англ. Parallax Scrolling) – это метод, который создает ощущение глубины пространства посредством различий в анимации нескольких слоев изображения на экране (рисунок 1). Он позволяет веб-пользователям воспринимать различные аудиовизуальные образы посредством простых операций, таких как прокрутка или перетаскивание мышью.

 Рисунок 1 – Принцип работы эффекта параллакса

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

Рисунок 2 – Пример работы параллакс-эффекта

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

Способы создания параллакса на веб-странице

1. jQuery Parallax

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

function parallaxScroll(){

var scrolled = $(window).scrollTop();

$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');

$('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');

$('#parallax-bg3').css('top',(0-(scrolled*.75))+'px');

}

2. CSS3

a) Position + top, left

Существует два основных способа управления координатами элемента на веб-странице. Первый из них — это сочетание свойств position и top / left. Первое отвечает за способ позиционирования элемента на странице, второе — за сдвиг элемента. Оносительно чего производится данный сдвиг зависит от значения position.

b) Transform: translate(x, y)

Свойство translate(x, y) отвечает за изменение положения элемента относительно его изначальной позиции. Несмотря на то, что в целом его функция аналогична использованию сочетанию свойств position: relative и top / left, существует ряд существенных отличий [10]. По словам Пола Ирриша, инженера из команды Google Chrome, использование translate(x, y) предпочтительнее ввиду двух причин [11]:

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

· свойство translate() выполняется в браузере с большей производительностью (рисунок 4), благодаря чему одновременно можно использовать больше анимаций

 Рисунок 3 – Сравнение времени кадра при использовании top/left и translate()

В процессе исследования были проанализированы способы создания параллакс-эффекта на веб-странице. В настоящее время можно выделить два наиболее популярных инструмента — создание параллакса при помощи

библиотеки jQuery или его плагинов, а также параллакс на CSS. Решения на jQuery являются более гибкими в силу использования языка JavaScript и возможности тонкой настройки поведения браузера. Также в пользу данной технологии играет наличие большого количества плагинов для создания параллакс-эффекта. Их наличие предоставляет свободу выбора наиболее подходящего API для каждого конкретного проекта. Однако развитие стандарта HTML привело к постепенному уменьшению спроса на jQuery, и в настоящее время его использование не рекомендуется, специалисты настаивают на использовании чистого нативного JavaScript-кода или отдельных библиотек / фреймворков для выполнения необходимых задач.

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

1. Frederick, D.M. The effects of parallax scrolling on user experience and preference in web design. [Текст] / Dede M. Frederick. — Purdue Univesity, 2013. — 21 с.
2. 12 jQuery Parallax Plugins | jQueryHouse [Электронный ресурс] — электрон. текстовые дан. — Режим доступа: https://jqueryhouse.com/12-jquery-parallax-plugins/, свободный.
3. Pure CSS Parallax Websites [Электронный ресурс] — электрон. текстовые дан. — Режим доступа: https://keithclark.co.uk/articles/pure-css-parallax-websites/, свободный.

Рецензии:

22.07.2019, 16:50 Феофанов Александр Николаевич
Рецензия: РЕЦЕНЗИЯ на статью «Исследование технологий создания параллакс-эффекта при помощи веб-браузера » бакалавра Бажан Павла Владимировича. Статья Бажан П.В. посвящена анализу способов создания параллакс-эффекта, принципов и алгоритмов создания этого эффекта, рассмотрены базовые элементы для создания анимации элементов веб-страницы, проведены исследования возможности интерактивного взаимодействия веб-страницы и пользователя. Актуальность данной статьи не вызывает сомнения, поскольку исследование технологий создания параллакс-эффекта на страницах веб-сайта является важной составляющей для привлечения внимания пользователя и позволяет визуально улучшать восприятие страницы, презентацию продукта или услуг, в случаи корпоративных решений. Автором была проделана по анализу технологий для создания параллакс-эффекта на веб-страницах и рассмотрены способы создания эффекта, и выделены два наиболее популярных инструмента создания параллакс-эффекта. Научная статья «Исследование технологий создания параллакс-эффекта при помощи веб-браузера» соответствует всем требованиям, предъявляемым к работам такого рода. Данная статья может быть рекомендована к публикации. Д.т.н., проф. Феофанов А.Н.



Комментарии пользователей:

Оставить комментарий