Что такое parallax эффект
10 потрясающих примеров параллакс скроллинга
Параллакс эффект на вашем сайте — это прекрасный способ удивить посетителей и улучшить поведенческий фактор. Такой сайт выглядит привлекательно и ваш посетитель как минимум потратит время на то, чтобы рассмотреть его.
Топ 10 сайтов с параллаксом
Параллакс эффект наиболее часто использовался в играх. И в последнее время приобрел второе дыхание на веб ресурсах, которые хотели добавить себе индивидуальности. Создать такой эффект не очень сложно, у нас есть подробная инструкция
как сделать параллакс на js.
Мы подобрали для вас 10 самых впечатляющих сайтов с примерами параллакса, чтобы вы могли вдохновиться на свой собственный дизайн. Но прежде, чем перейти к ним, давайте разберем что же это за эффект и почему он так привлекает внимание пользователей.
Что такое параллакс скроллинг?
Давайте отделим два слова друг от друга и разберем каждый по отдельности.
Параллакс — это зрительная разница в расстоянии между объектами на переднем и заднем плане. Скроллинг — это прокрутка экрана, то есть перемещение графики и текста в двухмерном пространстве.
Ну а параллакс скроллинг — это техника в веб дизайне, когда элементы фона на переднем и заднем плане двигаются с разной скоростью при прокрутке окна браузера. Это создает эффект трехмерного пространства.
10 примеров, которые взорвут ваших посетителей!
Если правильно и гармонично использовать эффект параллакса, то можно создать уникальный пользовательский опыт. Но если сделать плохо, то это отпугнет ваших посетителей или будет отвлекать от основной цели сайта. Будьте особенно осторожны с мобильной версией, там перебор с параллаксом может настолько замедлить работу браузера, что посетитель вашего сайта может сильно расстроиться. Рекомендуем тестировать поведение пользователей, чтобы добиться хороших результатов.
1 История Джесс и Расс
Два крутых американских дизайнера создали сайт, где рассказывают историю своих отношений и используют при этом параллакс скроллинг. В результате получился романтический рассказ, дополненный классной графикой.
10 потрясающих примеров параллакс скроллинга
2 Webflow
На этом сайте вы можете посмотреть всю историю интернета. Это довольно увлекательно, а параллакс эффект добавляет динамики истории.
3 Ресторан Koox
Этот ресторан расскажет вам о своем заведении, меню и поворах с помощью приятных иллюстраций дополненных параллакс эффектом. Только, пожалуйста, не открывайте этот сайт, если вы голодный.
4 Make Your Money Matter
Хоть тема финансов считается довольно сухой и скучной, этот сайт умудрился сделать из этого увлекательную историю, по просмотру которой вы побежите открывать себе счет.
5 Волкодав
Очень аккуратное и не навязчивое применение параллакс эффекта вы можете увидеть на сайте, посвященном волкодаву по имени Ворон. На этом сайте есть как текстовые параллакс эффекты, так и анимации Ворона, подкрадывающегося к своей жертве.
6 Epicurrence
Epicurrence — это конференция для творческих людей, которая проводится в Америке, штате Колорадо. Срезу на главном экране нас встречает параллакс эффект с использованием надписи и гор. В меру и со вкусом.
7 Гуччи гэнг.
Сюрреалистичные иллюстрации в сочетании с параллаксом дают незабываемый пользовательский опыт, проверьте сами!
8 Lopesce
Пожалуй, самый яркий промо сайт в этой подборке! На нем вы во всей красе увидите замороженные итальянские морепродукты.
9 Apple iPad Pro
На сайте эпл реализована горизонтальная прокрутка. За счет параллакс эффекта можно покрутить и повертеть Ipad как только вы захотите. Как всегда минималистичное и стильное решение.
10 Игра Firewatch
Возможно вы уже встречали ранее этот сайт как пример параллакса. Но нужно признать, сделан он фантастически. Яркая иллюстрация заката и множество слоев параллакса покоряют с первого раза.
Чтобы повторить это у себя на сайте, можете посмотреть наш туториал по параллаксу на js библиотеке SimpleParallax. Вы нашли больше интересных примеров? Оставляйте их в комментариях, лучшие мы добавим в наш топ.
Знакомство с Parallax Scrolling
Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.
Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.
Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.
Наверное, вы заметили, что во время прокрутки страницы сайта вниз несколько различных элементов, находящихся на этой странице, двигаются с разной скоростью. Давайте для примера возьмем страницу, отображенную на картинке сверху. По мере прокрутки страницы вниз вы увидите, что голубые точки в фоне (те, которые немного размыты), двигаются с той же скоростью, что и скроллбар. Также, вы увидите, что группа голубых точек, которые более сфокусированы и лежат на переднем плане, двигаются с немного большей скоростью, чем скроллбар. Быстрее этих точек двигается текст “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” и главный заголовок страницы “Products”. И, наконец, есть изображения самого продукта, как маленькие и расфокусированные в фоне, так и большие, сфокусированные и лежащие на переднем плане. Фоновые изображения продуктов двигаются с той же скоростью, что и текст, в то время как изображения продуктов на переднем плане двигаются быстрее этого текста. Это все и является идеальной демонстрацией параллакс-скроллинга, когда разные слои изображений накладываются друг на друга и все движутся с разной скоростью при прокрутке страницы, создавая эффект трехмерности.
Параллакс-скроллинг не ограничивается только вертикальным скроллом страницы или скроллингом по прямой линии. Отдадим право Nintendo для демонстрации идеального примера, подтверждающего это утверждение. Вспомните ранние игры Nintendo, где наши герои обычно двигались горизонтально слева направо вдоль экрана, а не вертикально вниз, как мы видели это на сайте Activate выше. Прокатитесь на MarkioKart Wii и давайте поговорим о некоторых клевых штуках, которые мы там можно увидеть.
Первую вещь, которую вы заметите, это направление скроллинга страницы — оно не вертикальное, а как сказано выше, а изначально горизонтальное. Конечно, это круто, но это также не новый концепт. Также, вы заметите параллакс-эффект с динозавром Йоши и панцирями на фоне, Марио и Луиджи на переднем плане и основным контентом, которые смещаются с разной скоростью при прокрутке. Но как только вы доедете до страниц #highlights и #attack, траектория смещения перестанет быть идеально горизонтальной. То же самое касается перехода между страницами #rediscover и #snes. Изображения не только сохраняют свою разную скорость смещения, но и меняют общее направление с горизонтального на вертикальное.
Стоит также отметить, что использование эффекта параллакса на вашем сайте не должно быть ограничено лишь возможностью создания искусственного 3D-эффекта. Сайт немецкой студии веб-дизайна Webseitenfactory является примером того, как можно использовать параллакс для добавления различных эффектов на страницу сайта, например движение иконок по разным траекториям, их увеличение и уменьшение по мере скроллинга сайта.
Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.
Параллакс-скроллинг — это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.
Параллакс: глубинное зрение
Как мы определяем глубину — расстояние от нашего местоположения до другого объекта? Для этого существует несколько способов, и один из самых распространённых и простых для понимания включает в себя такое геометрическое явление, как параллакс. Этот чрезвычайно простой принцип используется нашими глазами и мозгом для формирования нашего трёхмерного изображения мира, а астрономы столетиями используют его для определения расстояний (или относительных расстояний) от Земли до астрономических объектов.
Ещё один распространённый способ определять расстояния включает в себя отправку волны (звука, света, чего-то ещё), распространяющейся с известной скоростью, которая отражается от объекта и возвращается к нам; время, затраченное на возврат волны — эхо — сообщает нам расстояние до объекта. По этому принципу летучие мыши определяют расстояние до пищи и препятствий, а также работает радар.
Рис. 1
Мы воспринимаем параллакс, даже не думая о нём, каждый раз, когда двигаем головой. Представьте, что произойдёт, Если ваш друг спрячется от вас, встав в нескольких метрах за крупным деревом (рис. 1, в центре). Если вы достаточно далеко отодвинетесь влево или вправо, вашего друга станет видно (рис. 1, слева и справа). Мы знаем, что всё дело просто в перспективе; при определённом угле зрения дерево уже не будет загораживать вам вашего таинственного друга. Геометрически происходящее изображено на рис. 1. Когда вы двигаетесь влево и вправо, смотря вперёд, близлежащие объекты меняют свой угол по отношению к тому, что находится прямо перед вами, быстрее, чем объекты, расположенные дальше. Из скорости изменения угла при вашем движении — из параллакса движения — вы можете понять, насколько далеко расположен объект.
Каждый ребёнок это знает, поскольку, когда вы выглядываете из окна движущейся машины, фонарные столбы проносятся мимо очень быстро, удалённые здания проходят медленнее, а Луна, находящаяся настолько далеко, что угол зрения по отношению к наблюдателю не меняется на ощутимую величину, пока машина едет по шоссе, как будто бы двигается вместе с машиной. Именно небольшой параллакс, являющийся следствием огромного расстояния, заставляет луну «следовать за машиной».
Все, кто смотрел старые двумерные мультфильмы (и многие современные), такие, как Флинстоуны, знают, что этот факт используется, чтобы изобразить глубину. Когда персонажи путешествуют в автомобиле, двигаясь слева направо, автомобиль рисуют неподвижным, деревья рисуют в другом слое, который с высокой скоростью передвигается справа налево, а холмы в удалении рисуют на третьем слое, который двигается справа налево чуть медленнее (см. рис. 2).
Рис. 2
Наша способность воспринимать глубину, даже не двигая головой, основана на том же принципе. Левый и правый глаз видят мир с немного разных углов. Попробуйте разместить пару объектов — неважно, каких, пусть даже это будут большие пальцы рук — так, чтобы один из них был в два раза дальше другого, и находился прямо за ним. Закройте левый глаз и посмотрите на них правым; затем поменяйте глаза; потом снова поменяйте, и сделайте так несколько раз — и вы увидите, что объекты двигаются, как на рис. 1, только ваш левый глаз увидит ближайший объект справа от того, что дальше, а правый глаз увидит его чуть левее.
Так почему вы воспринимаете эти объекты при помощи обоих глаз так, будто они находятся один за другим? У вашей оптической системы есть очень хитрый обработчик информации — своего рода компьютер. Для вас он создаёт не такую картину мира, какую непосредственно видят ваши глаза, а выстроенную на её основе при помощи сложных преобразований картину. Воспринимать глубину вам позволяет информация, полученная от двух глаз и скомбинированная вместе (это в основном — хотя параллакс движения тоже вносит свою лепту). Ни один из ваших глаз не может определить глубину, если вы стоите неподвижно. Попробуйте закрыть глаза, повернуться в другую сторону и открыть один глаз. Можете ли вы точно описать расстояние до предметов? Мир выглядит более плоским, более двумерным, чем обычно. С обоими открытыми глазами у вас нет таких проблем. Это использование двух изображений для использования трёхмерной карты мира называется стереоэффектом.
Но даже с одним открытым глазом вы можете довольно быстро оценить глубину, если подвигаете головой. Ваш мозг способен использовать параллакс движения — более быстрое изменение угла зрения на близлежащие объекты по отношению к отдалённым при движении влево или вправо — чтобы помочь восстановить часть информации о глубине, которая обычно получается сравнением вида из двух разных глаз (рис. 2).
Рис. 3
Какие основные подсчёты использует наша оптическая система? Простейший случай показан на рис. 3. Допустим, объект находится прямо перед вами. Если ваши глаза находятся на расстоянии R друг от друга, а ваш левый глаз видит объект под углом α правее по отношению ко взгляду прямо вперёд, а правый глаз видит объект под углом α левее, тогда согласно простейшей геометрии прямоугольных треугольников, расстояние D до объекта будет равняться
Из формулы видно, что когда D меньше, угол, на который линия взгляда на объект отстоит от прямого взгляда, становится больше. Именно этого мы и ожидаем от параллакса.
В более общем случае, показанном на рис. 4, когда объект находится не прямо перед вами, получается чуть более сложным, как и тригонометрические формулы, но в нём работает тот же самый основной принцип и в итоге его не так уж сложно подсчитать. Ваш мозг проделывает такие подсчёты так быстро (используя технику, которую мы пока ещё не раскрыли), что вы об этом и не подозреваете.
Для достаточно удалённых объектов угол α оказывается слишком малым для того, чтобы его восприняли ваши глаза и мозг. В этот момент ваше чувство глубины пропадает. Поэтому Луна не кажется расположенной ближе, чем звёзды; они находятся слишком далеко, чтобы ощутить глубину. Также вашего ощущения глубины обычно не хватает, чтобы понять, пройдёт ли самолёт перед или за горой вдалеке. Но это просто ограничение ваших глаз.
Рис. 4
Как определить расстояние до более удалённых объектов? Есть два варианта; разработать научный инструмент, способный измерять углы точнее, чем ваш глаз; увеличить R, чтобы сравнивать не вид из глаз, а, например, вид из двух камер, стоящих в нескольких метрах друг от друга, или даже в разных местах континента. А когда астрономы хотят измерить самые большие расстояния, какие только можно измерить при помощи параллакса, они сравнивают изображения удалённой звезды, сделанные с разницей в шесть месяцев, чтобы получить максимальное расстояние R на основании того, что Земля в течение года проходит довольно большое расстояние. Детали этих техник отличаются, но основной принцип тот же, что показа на рис. 3 и рис. 4 — принцип параллакса.
Как сделать параллакс-эффект с помощью JavaScript
JavaScript добавляет на страницы сайта очень интересные эффекты. Один из них — параллакс. Разбираемся, что это и как его создать самостоятельно.
Параллакс — это иллюзия движения объекта относительно фона, которая появляется, если движется наблюдатель. Такой эффект легко увидеть, если поднести к лицу палец и посмотреть на него сперва одним глазом, а потом вторым.
В этой статье мы рассмотрим, как создать движущиеся фон и другие элементы для сайта на JavaScript.
Исходный код вы найдёте на GitHub.
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Параллакс-эффект фона
Для начала подготовим два изображения, которые нам нужны, — передний и задний планы. Для заднего плана я взял фотографию космоса:
Для переднего плана вырезал простой пейзаж с другой фотографии:
Теперь нужно сверстать элементы, в которых выводятся изображения:
Альтернативный вариант: установить один из фонов для body, а второй для wrapper — адаптируйте код под свой проект. Далее добавляем стили:
У элементов фиксированная позиция на странице — один элемент (дерево) расположен поверх другого (космос). Также мы добавили фильтр размытости для дерева, чтобы скрыть неровности и создать ощущение расфокуса.
Остаётся написать скрипт:
Теперь посмотрим на результат:
Вы можете использовать столько слоёв, сколько вам необходимо. При этом более дальние слои должны двигаться медленнее, как в нашем случае: если зритель пройдёт несколько шагов, то на положение звёзд это никак не повлияет. А вот дерево находится близко к смотрящему, поэтому оно двигается быстрее.
Параллакс-эффект для частиц
Параллакс работает не только для фона, но и для передних планов.
Что-то подобное любят использовать в Apple на своих лендингах.
Мы добавим на страницу частицы, которые окажутся над основным контентом и будут двигаться вместе с прокруткой страницы.
Для начала нужен блок, куда мы поместим частицы:
Сам блок не виден пользователю — он нужен нам как контейнер. Теперь подготовим стили:
Основные свойства частицам задаём с помощью скрипта.
Теперь можно посмотреть, как это работает:
Конечно, тут ещё многое можно улучшить: изменить размер и форму частиц на разных слоях, поработать с перспективой и размытием. Найти подходящие значения можно только перебором.
Заключение
Параллакс чаще всего используют на лендингах, и это всё ещё достаточно модный эффект. Вы можете модифицировать представленный в статье код или использовать формулы, чтобы создать какой-нибудь новый эффект на основе параллакса.
Конечно, для этого нужно хорошо разбираться в JavaScript, знать о событиях и свойствах страниц и ООП. Всему этому можно научиться на нашем курсе по frontend-разработке. Кроме того, вы изучите популярные фреймворки для более сложных задач и соберёте портфолио.
Параллакс-эффект на чистом CSS
В этой статье показано, как с помощью CSS-трансформаций, перспективы и небольших хитростей с масштабированием сделать параллакс-эффект на чистом CSS.
Параллакс чаще всего делается на JavaScript, и почти всегда он реализован плохо: отлавливается событие прокрутка, изменения в DOM вносятся напрямую в обработчике и вызываются лишние перерасчёты и перерисовки. Всё это происходит асинхронно с потоковым рендерингом браузера, в результате чего некоторые кадры пропускаются и эффект выглядит прерывистым. Впрочем, это не так уж страшно — requestAnimationFrame и отложенное обновление DOM позволяют управлять внешним видом сайтов с параллакс-эффектом. Но что если вы могли бы совсем не зависеть от JavaScript?
Перенос параллакс-эффекта на CSS избавит вас от упомянутых проблем и позволит браузеру положиться на аппаратное ускорение — почти всё будет обрабатываться компоновщиком. В результате вы получите согласованную частоту кадров и гладкую прокрутку страницы. Кроме того, можно сочетать этот эффект с другими CSS-приёмами, такими как медиавыражения и поддержка CSS-свойств. Как насчёт отзывчивого параллакс-эффекта?
Теория
Прежде чем говорить о принципе работы, давайте выполним базовую разметку:
А вот основные стили:
Коррекция глубины
Поскольку параллакс-эффект создаётся при помощи 3D-трансформаций, сдвиг элемента по оси Z имеет побочный эффект: по мере того, как он приближается к вьюпорту или отодвигается от него, его реальный размер меняется. Чтобы компенсировать это, мы должны применить трансформацию scale() к этому элементу — так он будет отображаться в оригинальном размере:
Управление скоростью движения слоя
Скорость движения слоя определяется сочетанием значений перспективы и перемещения по оси Z. Элементы с отрицательным значением translateZ прокручиваются медленнее, чем с положительным. Чем дальше это значение от 0, тем более выраженным получится параллакс-эффект (то есть при translateZ(-10px) прокрутка происходит медленнее, чем при translateZ(-1px) ).
Разделы страницы с параллакс-эффектом
Предыдущие примеры демонстрировали основные приёмы, используя очень простой контент, но страницы большинства сайтов состоят из отдельных блоков-разделов, к которым можно применять разные эффекты. Вот как это делается.
Вот CSS-стили для группового элемента:
Не существует чётких правил для решения проблемы с позиционированием слоёв — в разных проектах может быть разная реализация. Гораздо проще устранить неполадки в слоях, если понимать, как работает параллакс-эффект — чтобы увидеть картину яснее можно применить трансформацию к групповым элементам:
Посмотрите на следующий пример — обратите внимание на опцию debug!