Что такое параллакс-скроллинг


параллакс

О прокрутке параллакс впервые заговорили в 2011 и он сразу получил широкое распространение и стал популярен среди веб-дизайнеров. Тренды веб-дизайна приходили, уходили, менялись и эволюционировали, но параллакс всегда оставался востребованным эффектом.


С возникновением и широким распространением HTML и CSS стало гораздо проще создавать более интересные и запоминающиеся элементы для оформления интернет-страниц, в том числе и лендингов.


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


Что такое параллакс эффект?


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


Для получения параллакс-эффекта нужно три компонента:

  • Фон или объект на заднем плане, который движется медленнее;

  • Элемент на переднем плане, двигающийся быстрее;объект, который движется быстрее;

  • Действие, которое запускает движение — например, скролл или перемещение курсора.

Мы собрали 10 примеров сайтов, созданных на Wix, с использованием параллакс эффекта, чтобы вы наглядно увидели как он работает и насколько эффектно выглядит.


Примеры параллакс-эффекта


01. Mild Design


Эмили Де Гросбуа — художник из Монреаля и основатель Mild Design. Сайт ее портфолио поражает взгляд посетителей впечатляющим приёмом: она использовала серия сложных полноэкранных изображений, которые сменяют друг друга подобно раскрывающемуся свитку. Благодаря использованию параллакса переход от одного изображения к другому становится более плавным, между ними создается логическая связь и получается законченный визуальный рассказ.


Горизонтальный параллакс


02. Nolan Omura


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

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


Параллакс эффект с изображениями морских глубин и фридайвера


03. Chris Covert


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


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


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


Параллакс эффект на современном черно-красном сайте

04. Ivy Chen


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


Параллакс эффект на сайте с иллюстрациями в мягкой розовой гамме

05. Industrial Jewellery


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


Параллакс эффект на сайте с аксессуарами

06. Barco Sorriso


Яркие иллюстрации и общая палитра сайта создают веселое и гостеприимное настроение для этого сайта некоммерческой организации. Синяя часть — океан — плавно меняется на лес и напоминает мультики или видеогры.


Параллакс эффект с детской иллюстрацией

07. Karlie Kloss


Этот элегантный и минималистичный веб-сайт является идеальным портфолио для супермодели Карли Клосс. Цветовая схема веб-сайта состоит из спокойных и чистых цветов, таких как белый, серый и черный, а большое количество негативного пространства создает ощущение воздуха и легкости.


Параллакс эффект сайта Карли Клосс

08. Hana Knizova


Живущая в Лондоне фотограф Хана создала сайт, где представила свои работы в виде ленты сменяющих друг друга изображений — с помощью эффекта параллакс. В то же время изображения работают как меню веб-сайта, создавая уникальную систему навигации, где каждое изображение ведет к отдельной внутренней странице.


Фотографии на главной странице это введение в различные проекты Ханы. Они показывают направления, в которых работа фотограф — от репортажной съемки до фотосессий будущих родителей.


Параллакс эффект на сайте фотографа

09. Protea


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


Параллакс эффект на сайте ресторана

10. Frankie Ratford


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


Параллакс эффект на сайте графического дизайнера в ярких цветах

Команда Wix ❤️






ru03n.png