11 июня 2020 г.3 мин.
Пост обновлен 17 мар. 2021 г.
О прокрутке параллакс впервые заговорили в 2011 и он сразу получил широкое распространение и стал популярен среди веб-дизайнеров. Тренды веб-дизайна приходили, уходили, менялись и эволюционировали, но параллакс всегда оставался востребованным эффектом.
С возникновением и широким распространением HTML и CSS стало гораздо проще создавать более интересные и запоминающиеся элементы для оформления интернет-страниц, в том числе и лендингов.
При создании веб-сайта, параллакс это отличный способ добавить глубины и динамики к сайту. В сегодняшнем посту мы расскажем о том, то же такое параллакс прокрутка и покажем примеры красивых сайтов с использованием этого эффекта.
Параллакс — это визуальный эффект, при котором фон движется медленнее, чем объект на переднем плане. Таким образом появляется впечатление объема и глубины, сайт оживляется, а пользователь получает более захватывающий опыт при работе с ним.
Для получения параллакс-эффекта нужно три компонента:
Фон или объект на заднем плане, который движется медленнее;
Элемент на переднем плане, двигающийся быстрее;объект, который движется быстрее;
Действие, которое запускает движение — например, скролл или перемещение курсора.
Мы собрали 10 примеров сайтов, созданных на Wix, с использованием параллакс эффекта, чтобы вы наглядно увидели как он работает и насколько эффектно выглядит.
01. Mild Design
Эмили Де Гросбуа — художник из Монреаля и основатель Mild Design. Сайт ее портфолио поражает взгляд посетителей впечатляющим приёмом: она использовала серия сложных полноэкранных изображений, которые сменяют друг друга подобно раскрывающемуся свитку. Благодаря использованию параллакса переход от одного изображения к другому становится более плавным, между ними создается логическая связь и получается законченный визуальный рассказ.
02. Nolan Omura
Нолан Омура — фотограф и видеооператор, который живет на Гавайях и специализируется на подводной фотографии. Посмотрите, как он использовал параллакс — правильное наложение элементов друг на друга создает впечатление, что фотографии живые. Это несомненно добавляет интереса к его потрясающим работам.
Нолан разделил сайт на широкие полосы и использовал каждую для демонстрации своих снимков и видео. Она плавно сменяю друг друга, как будто волны, накатывающие на берег.
03. Chris Covert
Аэрокосмический инженер и дизайнер Крис Коверт создал смелый и запоминающийся сайт-портфолио. Дизайн и интерактивность сайта позволяют показать личность, навыки и опыт работы по-новому — креативно, инновационно и ярко. То, что могло бы быть просто сухим списком из перечислений стало примером того, как должно выглядеть современное CV.
Крис разместил снимок своего распечатанного резюме как самостоятельный массивный элемент в центре экрана. При прокрутке пользователь шаг за шагом открывает его, что создает потрясающий визуальный эффект.
На этом сайте продумано все до мелочей, что еще раз доказывает профессионализм его создателя и его талант. помимо этого посетители и потенциальные работодатели могут загрузить PDF версию резюме.
04. Ivy Chen
Дизайнер и иллюстратор Айви Чен создала уникальный сайт-портфолио с помощью параллакс-эффекта —иллюстрация превращается в изображение и наоборот. Получается магия и посетитель сразу вовлекается в сайт как в игру: что же откроется дальше?
Дизайнер украшений Хила Карни использовала создала интересный эффект с помощью параллакса — в то время как при прокручивании боковые изображения сменяют друг друга, центральное остается на месте. Только в самом конце она уходит, чтобы освободить место тексту и пользователь сразу концентрируется на том, что написано. Именно так и случается полное погружение пользователя в сайт.
06. Barco Sorriso
Яркие иллюстрации и общая палитра сайта создают веселое и гостеприимное настроение для этого сайта некоммерческой организации. Синяя часть — океан — плавно меняется на лес и напоминает мультики или видеогры.
07. Karlie Kloss
Этот элегантный и минималистичный веб-сайт является идеальным портфолио для супермодели Карли Клосс. Цветовая схема веб-сайта состоит из спокойных и чистых цветов, таких как белый, серый и черный, а большое количество негативного пространства создает ощущение воздуха и легкости.
08. Hana Knizova
Живущая в Лондоне фотограф Хана создала сайт, где представила свои работы в виде ленты сменяющих друг друга изображений — с помощью эффекта параллакс. В то же время изображения работают как меню веб-сайта, создавая уникальную систему навигации, где каждое изображение ведет к отдельной внутренней странице.
Фотографии на главной странице это введение в различные проекты Ханы. Они показывают направления, в которых работа фотограф — от репортажной съемки до фотосессий будущих родителей.
09. Protea
Создание сайта для ресторана — сложный процесс, хотя бы потому. что макет и контент должны быть максимально привлекательным, ведь запах и вкус невозможно передать через экран. Владельцы ресторана Protea справились с задачей на отлично — их сайт создан на основе блочного шаблона, который позволяет показать как можно больше изображений блюд, интерьера ресторана и и окружающей его долины Напа.
10. Frankie Ratford
Яркий, живой и игривый сайт сайт графического дизайнера, которая путешествует и работает удаленно из разных точек мира.
Команда Wix ❤️