В процессе создания веб-страниц разработчики и дизайнеры часто используют разнообразные эффекты. Одним из них является параллакс (parallax). Он позволяет получать в конечном итоге достаточно красивые сайты.
Далее parallax effect будет рассмотрен более подробно. Предложенная информация поможет изучить соответствующий эффект, а также разобраться, что он собой представляет. Разработчики смогут понять, что за он, для чего и когда используется, какие особенности имеет. Также предстоит научиться реализовывать параллакс на практике.
Что это такое
Параллакс в дизайне – это смещение близкого объекта относительно далекого при изменении угла зрения. Соответствующий эффект позволяет видеть на экране предметы в объеме, а также воспринимать глубину и понимать, какие элементы располагаются ближе/дальше на дисплее устройства.
На веб-страницах изначально CSS предлагает плоское изображение. Дизайнерам остается лишь создавать иллюзию объема. Именно в этом помогает параллакс эффект. Чтобы его добиться, потребуется:
- «удаленный» элемент (Фон), который движется медленнее;
- «близкий» объект, который будет двигаться быстрее;
- действие, которое отвечает за непосредственный запуск движения (скролл или перемещение курсора).
Для того, чтобы создать параллакс, требуется поделить картинку (изображение) на несколько слоев. Каждому после этого задается различная скорость и диапазон движения в зависимости от скролла или перемещения курсора.
Для чего используется
Примеры параллакса на сайте можно перечислять много и долго. Этот прием обычно используется дизайнерами и программистами для различных целей. Далее предстоит познакомиться с самыми распространенными ситуациями, при которых будет использоваться parallax.
Изюминка на сайте
Первый вариант – это презентация продукта, услуги или компании. Для этого требуется полноценный лендинг. Такие сайты похожи друг на друга. Чтобы выделиться среди конкурентов, приходится придумывать разнообразные приемы. Нестандартные дизайнерские решения – один из вариантов выделения собственного сайта из общей массы.
Параллакс поможет оживить готовые иллюстрации на сайте, а также текст. С его помощью получится добавить веб-порталу глубины без применения сложных дизайнерских решений.
Выделение объектов
Параллакс эффекты на сайте – это отличный способ выделить один элемент на сайте, «провести» его через всю страницу и вывести на передний план. На верхний слой (тот, что ближе всего к пользователю) помещается ключевой (главный) элемент. Им может выступить рекламируемый продукт. Соответствующий прием поможет сделать дополнительный акцент на товаре.
Демонстрация динамики
При помощи параллакс эффектов на сайтах можно демонстрировать динамику. Этот вариант подойдет тем, кто продает на странице не непосредственный товар, а услуги. Parallax будет создавать иллюзию движения, что поможет добавить эффектности веб-проекту.
Что не относится к параллаксу
Эффекты параллакса на скролле смотрятся достаточно эффектно. Они помогут придать веб-порталу красивый дизайн, который запомнится пользователям. Только не все эффекты относятся к parallax. За него пользователи и некоторые дизайнеры-новички часто принимают другие компоненты на сайте:
- Простую анимацию. Примером может служить ситуация, когда текст или иллюстрации выплывают при скроллинге.
- Анимированные готовые картинки. Они обычно размещаются на первых (главных) экранах сайтов или непосредственно на страницах веб-портала в качестве картинок (иллюстраций).
- Анимацию при движении курсора или скролле. В этом случае один объект будет анимирован, но он не сдвигается относительно других составляющих страницы или фона.
- Анимацию картинок на статичном фоне. Такой подход будет создавать небольшую иллюзию глубины, но она окажется значительно слабее, чем при parallax.
Теперь понятно, что именно представляют собой параллакс эффекты на сайтах. Реализовать их обычно получается несколькими способами. Далее будет представлен пример на CSS и JavaScript.
Создание параллакса
Parallax при прокрутке веб-сайтов создаются за счет 3D-трансформаций:
- transform-style:preserve-3d;
- perspective;
- transform: translateZ.
Создавать такие эффекты на JavaScript слишком сложно и затратно с точки зрения ресурсов, потому что браузер должен будет отслеживать движение по событию scroll, вызывать функцию перерасчета положения блоков и осуществлять их смещение. В конечном итоге страницы начнут тормозить, а скролл станет прерывистым.
Параллакс-эффект по движению мыши создается именно на JavaScript. В CSS пока для данной задачи подходящих свойств нет, но с его помощью все равно можно оптимизировать рассматриваемый тип дизайна.
Чистый CSS
Для формирования глубины используется transform: translateZ. Дополнительно предстоит указать значение свойства perspective.
Элементы на сайте будут позиционироваться по двум осям: X и Y (по вертикали и горизонтали). Также существует третья ось – Z. Она отвечает за отражение глубины элемента и его расстояние непосредственно до пользователя. Если просто сдвинуть по ней элемент, задав параметр transform: translate, разница заметна не будет. Элемент располагается в двухмерной плоскости, ведь глубиной современные гаджеты пока не обладают.
Чтобы сделать плоскость трехмерной, можно воспользоваться CSS-свойством perspective. В качестве значения принимается расстояние от элемента до пользователя по оси Z. Чем больше этот параметр, тем дальше от клиента компонент на экране. Обратный принцип тоже действует. Часто для perspective указывается значение, равное 1px. Этого будет достаточно для того, чтобы установить глубину перспективы.
Пример
Вот примеры параллакс эффекта. Первый – при прокрутке страницы. Сначала необходимо подготовить разметку блока с parallax. Далее – добавить <div> – родителя с классом parallax. Внутри создаются два элемента-слоя с классами parallax-layer:
- div – с изображением;
- span – с текстом.
Для div требуется указать дополнительный класс – parallax-image, для span – parallax-text.
Теперь div-родителю задается свойство perspective: 1px. Оно создаст виртуальную 3D-плоскость, указывая, что центр блока parallax – исходная точка построения перспективы. Далее нужно добавить overflow-y: auto. Это требуется для прокрутки элементов-потомков относительно фиксированной точки.
Теперь можно удалить внутренние элементы с классом parallax-layer из общего потока и растянуть на всю площадь родителя. Можно задать смещение по оси Z. Текст окажется дальше от пользователя, а «задний план» – ближе. За счет этого будет достигнут фон параллакс.
На JavaScript
Теперь можно создать рассматриваемый эффект на JS. Для этого создается карточка с несколькими компонентами, которые будут перемещаться при движении курсора – каждый со своей скоростью. Элементы смещаются по X и Y, поэтому parallax окажется в 2D.
Сначала создается разметка, которая будет напоминать прошлый пример. Требуется div-обертка и внутренние анимируемые элементы:
Сейчас можно задать анимацию при перемещении компонентов за счет свойства transition. Более точную настройку помогают производить кривые Безье. Пользоваться ease-in-out не рекомендуется: могут возникнуть «рывки» при быстром движении курсора.
В JS предстоит прислушиваться к движению курсора мыши – mousemove:
Элементы будут следовать за курсором. Остается добавить эффект скорости, который замедляет трансформацию. Пусть он будет 0,5 – устанавливать слишком большое значение не рекомендуется.
Вычисленные координаты будут умножаться на соответствующий коэффициент. Код работает, но суть параллакса пока не реализована. Коэффициент скорости будет храниться прямо в разметке data-атрибут.
Теперь желаемый результат достигнут. Отныне понятно, как на сайте создать параллакс-эффект в том или ином случае.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus!
