При эффекте параллакс фон движется медленнее чем передний план

Как сделать параллакс-эффект с помощью 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!

Источник

Знакомство с 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 является примером того, как можно использовать параллакс для добавления различных эффектов на страницу сайта, например движение иконок по разным траекториям, их увеличение и уменьшение по мере скроллинга сайта.

Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.

Параллакс-скроллинг — это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.

Источник

Создаём parallax scrolling эффект с помощью jQuery и CSS

В последнее время, сайты с parallax scrolling эффектом стали появляться повсюду. Я не хотел это пропускать, поэтому я создал демонстрационную страницу с parallax scrolling эффектом с помощью jQuery и CSS.

Даже если вы не знакомы с термином «parallax scrolling», вы наверняка знакомы с техникой. Parallax scrolling — это процесс 2D анимации, который создаёт иллюзию глубины. Анимация передних слоёв быстрее, чем анимация фона. Когда вы наблюдаете за движущимся автомобилем, вам кажется, что объекты расположенные перед автомобилем, движутся быстрее, чем объекты расположенные за автомобилем. Parallax scrolling использует тот же принцип, чтобы заставить зрителя думать, что он наблюдает за 3D сценой.

Демонстрация и загрузка

На моей демонстрационной странице показан один из способов создания вертикального parallax scrolling эффекта.

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

В Safari прокрутка происходит плавно (по крайней мере, у меня на компьютере), но демо должно работать в любом современной браузере.

Disclaimer 1: Так как это всё лишь эксперимент, я не проводил оптимицацию демо для работы на мобильных устройствах.

Disclaimer 2: Навигационное меню, которое используется в демонстрации, подсмотрено на сайте Nike Better World. Если вы планируете использовать аналогичную навигацию на своём сайте, имейте в виду её происхождение.

Как это работает

Статьям и фоновому слою, с помошью CSS назначено фиксированное положение, также им назначено свойство z-index для того, чтобы новые слои появлялись выше фонового слоя. Используется четыре слоя: небольшие облака, большие облака, воздушный шар/изображение пейзажа, слой со статьями.

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

Всего несколько строк кода с использованием jQuery нужно для создания parallax scrolling эффекта. Я был удивлён, насколько это просто.

Слой переднего плана всегда выравниваются по верхней части документа, в то время как движение других слоев регулируется в зависимости от их глубины.
Чем ниже слой, тем медленнее он движется.

Остальной jQuery код используется для управления навигацией. Когда пользователь нажимает навигационную кнопку, страница прокручивается до соответствующей статьи. В случае, если у пользователя отключен JavaScript, в дело вступают «якоря» используемые на ссылках. Они по-прежнему позволяют перемещаться по странице, но уже без анимации.

Источник

Параллакс эффект c помощью CSS и JS

Параллакс эффект — довольно интересное дополнение к стилистике веб-страниц, которое позволяет оживить дизайн сайта. С реализацией новых возможностей CSS3 в браузерах достичь этого эффекта стало достаточно просто. В этой статье мы рассмотрим несколько примеров, как сделать параллакс эффект, используя возможности CSS и JavaScript.

Способы сделать параллакс эффект

Как правило, весь фокус эффекта заключается в перемещении нескольких слоев, фонов этих слоев или иных элементов страницы с разной скоростью, как относительно друг друга, так и относительно неподвижных частей страницы, при этом направление движения этих элементов должно совпадать. Такой нехитрой манипуляцией на двумерной плоскости, мы создаем иллюзию смещения в трехмерном пространстве относительно «отдаленных» объектов, когда наши зрительные центры находят похожие образы перемещений относительно тех, которые мы ранее наблюдали в реальном мире.

Для создания убедительного параллакс эффекта не нужно делать десятки слоев и анимировать их, но достаточно сделать всего 3-4 слоя, где каждый более «отдаленный» от зрителя слой будет двигаться медленней относительно предыдущего на определенное значение.

Если для создания параллакса используются фоновые изображения в блоках с разной вложенностью, то в этом случае удобно использовать свойство background-position для смещения фоновых изображений, но если в эффекте параллакса замешаны абсолютно-позиционируемые слои, то в этом случае придется оперировать свойствами их положения left, top и т.д. Но гораздо удобнее использовать возможности CSS3 и свойство transform, которое позволяет избежать некоторые ненужные расчеты, особенно при масштабировании страницы сайта. К тому же, transform позволяет сделать множество других крутых эффектов совместно с параллаксом, но это уже тема для отдельной статьи. Ну, а пока рассмотрим два примера создания эффекта: с фоновыми изображениями и с блоками.

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

Параллакс фона

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

Давайте рассмотрим всё на конкретном примере горного пейзажа со скачущим всадником.

Параллакс фона. Клик по сцене вызывает эффект фокусировки с размытием.

И так, для этой сцены было создано пять блоков объединенные одним общим контейнером. Каждый из этих блоков содержит класс с CSS свойством, указывающим на свое фоновое изображение. Кроме этого, для каждого блока установлено своё позиционирование фонового изображения.

Картинки фоновых изображений PNG с прозрачными областями, используемых для создания параллакса фонов.

В CSS для основного контейнера должно быть указано позиционирование отличное от static, чтобы можно было одинаково расположить и растянуть внутри него внутренние блоки с изображениями фонов. Для вложенных блоков в основной контейнер (.contain > div) потребуется указать абсолютное позиционирование, чтобы блоки смогли наложиться друг поверх друга. Помимо этого, для этих же блоков нужно указать линейный переход для свойств, которые мы будем изменять с помощью JavaScript достигая эффекта параллакса.

transition: background-position linear;

Затем, каждому отдельному блоку необходимо указать фоновое изображение и координаты абсцисс начального положения фона и постоянного положения ординат, поскольку анимация исключительно горизонтальная и менять мы будем только координаты оси Х.

Перед объявлением и запуском рекурсивной функции нужно установить длительность выполнения CSS-перехода для контейнера, которое унаследуют дочерние блоки.

Завершается этот скрипт отсрочкой рекурсивного вызова следующей итерации данной функции.

Ну и конечно же, запустить выполнение нужно отдельным вызовом функции.

Параллакс по движению мыши

Параллакс по движению мыши. Клик по сцене вызывает эффект фокусировки.

И так, давайте воспроизведем этот пример практически. Как вы уже, вероятно, догадались, для облаков используются div-блоки с изображением. Так же, как и в первом примере параллакса фона, для главного контейнера установлено отличное от static позиционирование для того, чтобы внутренние блоки с облаками можно было свободно разместить в любом месте, используя абсолютное позиционирование. Для эффекта параллакса использовано четыре положения «отдаления» или «глубины», которые обозначены с помощью атрибута data-size в каждом блоке-облаке. Сценарий JavaScript будет считывать этот атрибут и назначать этим блокам соответствующие обозначениям свойства.

Также атрибут data-size используется как селектор, чтобы указать соответствующие размеры блоков для имитации пространственной перспективы.

Далее для каждого блока требуется указать уникальное положение на экране, поэтому для каждого из них прописан стилевой класс с координатами позиционирования.

Как вы можете видеть, JavaScript сценарий параллакса по движению мыши достаточно простой. Прежде всего следует получить объекты, с которыми мы будем работать: контейнер и блоки с облаками.

Затем следует установить «слушатель» на событие движение мыши внутри основного контейнера.

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

Надеюсь, урок был познавательным для вас. Желаю вам удачи!

Источник

• ← При этом следует отметить что
• При юстиниане что было →