Параллакс-эффект в веб-дизайне
Эффект параллакса признан одним из самых интересных трендов веб-дизайна 2012 года. Но несмотря на широкое обсуждение и ожесточенные споры, развернувшиеся вокруг него, сайтов с его использованием на данный момент не так много, как стоило бы ожидать. В чем причины востребованности технологии? С какими трудностями столкнулись веб-разработчики на пути ее практической реализации? Как сложится судьба «модного» веяния?
Параллакс-скроллинг — технология скроллинга в компьютерной графике, при которой различные слои фонового изображения и изображения элементов переднего плана, перемещаясь с разной скоростью, создают иллюзию глубины в двухмерной анимации. Иногда для усиления иллюзии глубины к элементам «заднего плана» применяется размытие, степень которого снижается от слоя к слою на пути к «поверхности».
Корни параллакс-скроллинга можно обнаружить в технике многоплановой камеры, использовавшейся в классической мультипликации 40-х годов, а своего полного развития технология достигла в 80-х годах в индустрии компьютерных игр. Технология обрела вторую жизнь, закономерно проникнув в веб-дизайн с появлением HTML5, развитием CSS и JavaScript. Сайты с основанным на ней оформлением начали появляться с 2011 года. Первым успешным примером использования параллакс-эффекта в веб-дизайне стал сайт компании Nike, разработанный Weiden & Kennedy, за которым последовал настоящий взрыв популярности технологии.
Параллакс-эффект применяется не только в навигационном скроллинге, но и в создании декоративных эффектов, не требующих перемещения по странице. Да и собственно скроллинг не ограничивается вертикальной прокруткой по прямой линии: часто он имеет различное направление, широко сочетается с масштабированием и изменением элементов во время перемещения, с движением элементов по разным траекториям.
Основным инструментом создания параллакс-эффекта на веб-странице чаще всего служит jQuery и несколько специальных библиотек и плагинов. Наример, плагин Scrollorama, предназначенный специально для удобства реализации различных эффектов скроллинга и предоставляющий простой инструмент для создания параллакс-эффекта. Тем временем сайт плагина сам по себе служит прекрасной иллюстрацией его возможностей.
Удивительно, что технология получила такое распространение несмотря на имеющийся у нее недостаток: серьезные проблемы с производительностью. Обработка JavaScript-кода для расчета положения элементов каждого слоя при скроллинге занимает определенное время и существенно замедляет не только загрузку страницы, но и само перемещение по странице, часто сводя на ноль декоративный эффект параллакса, не говоря уже о юзабилити и эффективности сайта. Поэтому применение технологии всегда требует тщательной оптимизации процесса.
Другой вопрос, связанный с параллакс-скроллингом в веб-дизайне, — как влияет использование этого эффекта на восприятие сайта пользователем. Часто даже в случае корректной работы технологиии на сайте многие пользователи признаются, что динамический и «трехмерный» скроллинг скорее раздражает их и мешает воспринимать содержимое страницы.
Сочетание сложности технической реализации и требовательности к ресурсам с неоднозначностью оценки пользователями и явной избыточностью препятствует проникновению технологии в более широкий контекст веб-разработки — параллакс остается эффектным и креативным, но далеко не везде уместным «дизайнерским решением». Наиболее адекватным полем применения параллакс-скроллинга остаются одностраничные промо-сайты, содержащие небольшое количество контента и нуждающиеся в создании запоминающегося внешнего образа.
Несомненно, текущий интерес к параллакс-скроллингу в оформлении веб-страниц пройдет. Но важным отличием параллакс-эффекта от других «модных» веяний веб-дизайна является то, что многообразие его возможностей и вариантов применения, в сущности, невозможно исчерпать, и когда волна перегруженных и однотипных псевдотрехмерных сайтов наконец схлынет, мы обнаружим, что уже не можем представить себе веб-дизайн без тех или иных идей, привнесенных технологией параллакс-скроллинга. Тем более, к тому времени развитие веб-технологий наверняка позволит забыть и о ее текущих недостатках.