что такое параллакс эффект на сайте
Параллакс на чистом CSS
В этой статье показывается, как с помощью CSS трансформаций и махинаций с 3d сделать параллакс-эффект на сайте на чистом CSS.
Теория
Прежде, чем погрузиться в понимание работы этого механизма, создадим необходимую разметку:
Коррекция глубины
Так как параллакс эффект создаётся за счёт 3D преобразований, смещение элемента по оси Z имеет побочный эффект — размеры элемента меняются, в зависимости от того, ближе или дальше он к вьюпорту. Чтобы исправить это, нам нужно применять scale() трансформацию, чтобы элемент отрисовывался в своём изначальном размере:
Регулирование скорости слоя
Скорость слоя регулируется комбинацией значений перспективы и смещения по Z. Элементы с отрицательными значениями Z будут скроллиться медленнее, чем элементы с положительными значениями. Чем больше разность значения от 0, тем явнее параллакс эффект
( т.е. translateZ(-10px) будет скроллиться медленнее, чем translateZ(-1px) ).
Создание разных участков параллакс эффекта
Предыдущие примеры демонстрировали базовую технику использования простого контента, но ведь большинство параллакс сайтов делят страницу на разные участки с разными эффектами. Вот как можно реализовать это в нашем методе.
для него CSS будет выглядеть так:
Важное правило, которое нужно помнить — при группировке элементов мы не можем обрезать контент внутри группы, тк overflow: hidden у элемента parallax__group сломает весь параллакс эффект. Необрезанный контент приведёт к тому, что дочерние элементы будут выступать за рамки. Поэтому нужно пошаманить с значением z-index у группы, чтобы быть уверенным, что контент будет корректно прятаться и показываться по мере того, как пользователь будет скроллить сайт.
Нет никаких жестких или быстрых правил по поводу работы со слоями и разные методы подразумевают разную реализацию. Но, чтобы упростить отладку позиционирования слоёв, можно применить простую трансформацию групповых элементов:
Поддержка браузеров
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. Вы нашли больше интересных примеров? Оставляйте их в комментариях, лучшие мы добавим в наш топ.
8 приемов работы с CSS: параллакс, «липкий» футер и другие
От переводчика: перевели для вас статью Брета Кэмерона о хитростях в работе с CSS. Многие моменты пригодятся не только новичкам, но и опытным разработчикам.
Эта статья о приемах работы в CSS, узнав о которых, я восклицал: «Агаааа!». Надеюсь, вы тоже сделаете пару открытий.
CSS — специфическая технология. На первый взгляд она кажется очень простой. Но некоторые эффекты, которые в теории кажутся простыми, не являются таковыми на практике.
Я покажу несколько приемов и расскажу о принципах их использования в CSS. Сама по себе статья не о сложностях. Наоборот, она призвана сделать вашу работу более комфортной.
Напоминаем: для всех читателей Хабра — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».
1. «Липкий» футер
Несмотря на простоту реализации, он может стать камнем преткновения для начинающих разработчиков.
В большинстве проектов вы захотите, чтобы футер оставался в нижней части экрана вне зависимости от объема контента и адаптировался под различные условия просмотра.
До появления CSS3 этого эффекта было сложно добиться, не зная точную высоту футера. Но сейчас это не проблема, для создания «липкого» футера лучше всего использовать Flexbox. А именно — взять свойство flex-shrink, так вы будете уверены в том, что нижний колонтитул сохранит свои размеры.
При размере 0 он не будет сжиматься вообще.
2. Увеличение при наведении
Такой эффект — отличный способ привлечь внимание пользователя к кликабельному изображению. Когда тот наводит курсор на картинку, она слегка «приподнимается» с сохранением прежних размеров.
Для того, чтобы сделать такой эффект, нам понадобится враппер div, им нужно обернуть тэг image в HTML.
Кроме того, чтобы эффект заработал, нужно установить width и height элемента, а также убедиться, что его overflow установлен как hidden. После этого вы сможете применять любые типы трансформаций.
3. Постоянный режим Night Mode
Если вам необходим быстрый способ установить ночной режим для вашего сайта, то используйте фильтры invert и hue-rotate.
filter: invert() может принимать значения от 0 до 1. 1 — это инверсия, белое становится черным.
filter: hue-rotate () изменяет цветовое содержимое ваших элементов таким образом, что они сохраняют более-менее одинаковый уровень отделения друг от друга. Значения варьируются от 0 до 360 градусов.
Если объединить эти эффекты внутри тега body, вы можете быстро добиться получения ночного скина для сайта (фону в этом случае нужно задать цвет).
Используя эти настройки можно превратить стартовую страницу Google вот в это.
4. Кастомные буллиты
Для создания кастомных буллитов для списка можно использовать content вместе с псевдоэлементом ::before
Бонус: хлебные крошки в навигации
Есть много способов получать интересные эффекты с помощью свойства content, но я не удержался и добавил еще один.
Поскольку слеши и другие символы, используемые для разделения хлебных крошек, это стилистика, имеет смысл определить их в CSS. Как и во многих других примерах в этой статье, эффект основан на псевдоклассе — last-child. Он доступен только в CSS3:
5. Параллакс-изображения
Этот популярный эффект привлекает внимание пользователей. Его стоит использовать, если вы хотите оживить страницу во время скроллинга.
В то время, как обычные изображения изменяют местоположение при прокручивании, параллакс-изображения остаются на месте.
CSS-пример (только CSS)
Здесь неотъемлемым элементом является background-attachment: fixed, он привязывает положение фонового изображения к определенной позиции. Картинка остается на месте, в то время, как окно, из которого она видна, прокручивается. Создается впечатление, что картинка находится позади всего сайта. Для того, чтобы заменить этот эффект на противоположный, указываем background-attachment: scroll.
Знакомство с 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 является примером того, как можно использовать параллакс для добавления различных эффектов на страницу сайта, например движение иконок по разным траекториям, их увеличение и уменьшение по мере скроллинга сайта.
Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.
Параллакс-скроллинг — это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.
Параллакс-эффект на чистом CSS
В этой статье показано, как с помощью CSS-трансформаций, перспективы и небольших хитростей с масштабированием сделать параллакс-эффект на чистом CSS.
Параллакс чаще всего делается на JavaScript, и почти всегда он реализован плохо: отлавливается событие прокрутка, изменения в DOM вносятся напрямую в обработчике и вызываются лишние перерасчёты и перерисовки. Всё это происходит асинхронно с потоковым рендерингом браузера, в результате чего некоторые кадры пропускаются и эффект выглядит прерывистым. Впрочем, это не так уж страшно — requestAnimationFrame и отложенное обновление DOM позволяют управлять внешним видом сайтов с параллакс-эффектом. Но что если вы могли бы совсем не зависеть от JavaScript?
Перенос параллакс-эффекта на CSS избавит вас от упомянутых проблем и позволит браузеру положиться на аппаратное ускорение — почти всё будет обрабатываться компоновщиком. В результате вы получите согласованную частоту кадров и гладкую прокрутку страницы. Кроме того, можно сочетать этот эффект с другими CSS-приёмами, такими как медиавыражения и поддержка CSS-свойств. Как насчёт отзывчивого параллакс-эффекта?
Теория
Прежде чем говорить о принципе работы, давайте выполним базовую разметку:
А вот основные стили:
Коррекция глубины
Поскольку параллакс-эффект создаётся при помощи 3D-трансформаций, сдвиг элемента по оси Z имеет побочный эффект: по мере того, как он приближается к вьюпорту или отодвигается от него, его реальный размер меняется. Чтобы компенсировать это, мы должны применить трансформацию scale() к этому элементу — так он будет отображаться в оригинальном размере:
Управление скоростью движения слоя
Скорость движения слоя определяется сочетанием значений перспективы и перемещения по оси Z. Элементы с отрицательным значением translateZ прокручиваются медленнее, чем с положительным. Чем дальше это значение от 0, тем более выраженным получится параллакс-эффект (то есть при translateZ(-10px) прокрутка происходит медленнее, чем при translateZ(-1px) ).
Разделы страницы с параллакс-эффектом
Предыдущие примеры демонстрировали основные приёмы, используя очень простой контент, но страницы большинства сайтов состоят из отдельных блоков-разделов, к которым можно применять разные эффекты. Вот как это делается.
Вот CSS-стили для группового элемента:
Не существует чётких правил для решения проблемы с позиционированием слоёв — в разных проектах может быть разная реализация. Гораздо проще устранить неполадки в слоях, если понимать, как работает параллакс-эффект — чтобы увидеть картину яснее можно применить трансформацию к групповым элементам:
Посмотрите на следующий пример — обратите внимание на опцию debug!