17 потрясающих примеров сайтов с горизонтальным скроллингом
Интуитивно понятная навигация — один из ключевых элементов веб-дизайна. То, как мы переходим от одного раздела сайта к другому, и как мы просматриваем контент, может сильно повлиять на наш пользовательский опыт.
В большинстве случаев владельцы веб-сайтов хотят перестраховаться, поэтому они используют проверенную вертикальную навигацию, к которой мы все привыкли. Однако горизонтальный скроллинг может выглядеть намного интереснее, чем его вертикальный аналог.
Макет с боковой прокруткой — привлекательный и практичный выбор, особенно для сайтов-портфолио, каталогов, карт и т. д… Открывать проекты, исследовать города и посещать онлайн-галереи гораздо интереснее благодаря горизонтальному скроллингу. Если все сделано правильно, горизонтальная прокрутка может сделать веб-сайт более привлекательным, увлекательным и запоминающимся, что прекрасно иллюстрируют веб-сайты в нашем списке. Вот несколько уникальных примеров, которые представляют собой идеальный синтез яркого контента и четкой горизонтальной навигации:
Square
Веб-сайт Squareподарит вам незабываемые впечатления.
Это онлайн-платформа, где люди могут выставлять свои работы, и она выполнена очень необычно. С самого начала вас приглашают исследовать сайт с Let’s Rock! Это кнопка, при нажатии на которую открывается врата веб-империи, где вас приветствуют контрастные цвета, популярные анимированные GIF-файлы, изображения в стиле 90-хи синтезаторные мелодии. И все это происходит еще до того, как вы получите доступ к основному контенту.
Чтобы увидеть работы художников, сначала нужно перетащить мышью квадрат, пока он не достигнет финишной черты, обозначенной красной точкой. Когда вы катитесь по квадрату, появляются известные иллюстрированные персонажи, которые составляют вам компанию, такие как Супер Марио, Дарт Вейдер, Эрик Картман, Бендер из Футурамы и т. д… Только после того, как вы завершите эту мини-игру, вы сможете увидеть избранные проекты.
На главной странице вы увидите слово Square,написанное огромными заглавными буквами на экране, и, в зависимости от того, как вы перемещаете указатель мыши, буквы будут наклоняться в том же направлении.
Это действие также влияет на то, как вы перемещаетесь по сайту. Если вы переместите курсор в любом направлении, ваше плавание во вселенной Square начнется. Вы можете выбрать, хотите ли вы исследовать его по горизонтали, вертикали или даже случайным образом.
Home Société
Home Société — это бренд, который производит роскошную мебель для дома и открытых пространств. Их веб-сайт был разработан известным агентством Locomotive, поэтому неудивительно, что он выглядит таким креативным и интересным от самого первого до последнего экрана. Это одностраничная страница с гладкой горизонтальной прокруткой слева направо. Весь сайт по сути прост, но увлекателен плавными анимационными эффектами и привлекательными витринами работ компании. Основная навигация четкая и всегда видимая, она расположена в левой части экрана, поэтому вы всегда можете перейти прямо к наиболее интересному разделу. Когда вы дойдете до конца горизонтальной прокручиваемой домашней страницы, вас встречает полноэкранный раздел с большой типографикой.
D. Potfer Studio
D. Potfer Studio — французская консалтинговая и коммуникационная студия, специализирующаяся на искусстве жизни, культуре, еде и напитках. Их работы представлены в карусельной галерее с горизонтальной прокруткой. Изображения выглядят очень мягкими, мечтательными и прекрасно сочетаются с тонкой, четкой типографикой. Графика также великолепно анимирована, что делает приключение с прокруткой еще более увлекательным.
Kwok Yin Mak
Сайт Kwok Yin Mak — прекрасный оазис минимализма, который, несомненно, производит сильное впечатление на посетителей. Это еще один потрясающий пример одностраничного веб-сайта с горизонтальной прокруткой, который в данном случае работает в обоих направлениях. Как только сайт загрузится, вы можете выбрать прокрутку влево или вправо. Основная навигация скрыта в нижнем левом углу экрана. Но при наведении указателя мыши на О себе, Работаи Гостевая книга, стрелка укажет вам, в каком направлении прокручивать, чтобы добраться до этих разделов.
Prevint
Prevint — это программа предотвращения межличностного насилия, цель которой — повысить осведомленность о различных типах насилия, которым люди чаще всего подвергаются. Разработчики этого сайта выбрали горизонтальную навигацию, чтобы познакомить посетителей с тем, чем занимается их организация, и поделиться тремя спектрами, которые могут быть полезны людям, подвергающимся насилию. Этот веб-сайт является отличным примером того, как работает горизонтальный скроллинг, когда вы хотите представить некоторые общие идеи своим пользователям, и при этом вам не обязательно придерживаться его на всем сайте. Фактически, здесь горизонтальная навигация исчезает в пользу эффекта прокрутки повествования, когда посетители нажимают, чтобы узнать больше о любом из спектров.
Canals
Canals — очаровательный проект, созданный с целью рассказать историю знаменитых каналов Амстердама. Этот увлекательный веб-сайт напоминает журнал, и благодаря горизонтальной навигации мы ощущаем, что держим в руках настоящий журнал и листаем его страницы. Великолепные изображения, эффект параллакса, смелая типографика и яркие цвета мгновенно перенесут вас прямо на берег этих исторических каналов. Главное меню отображается в левой части экрана. По мере прокрутки цвет меню будет меняться в зависимости от оттенка фона слайда, на который вы смотрите.
Qode Interactive Catalog
Интерактивный каталог Qodeсоздан с целью продемонстрировать оригинальный подход к современному веб-дизайну. Каталог представляет собой тщательно подобранную подборку нескольких творческих тем, каждая из которых обладает особыми эстетическими качествами, вдохновленными различными формами искусства.
В проекте реализован горизонтальный скроллинг, чтобы вызвать эффект прогулки по галерее и просмотра произведений искусства. Когда вы наводите курсор на название каждой из представленных тем, вы можете мельком увидеть ее дизайн. И нажав на заголовок, вы можете начать изучение страницы проекта темы.
Каталог QI получил несколько наград, в том числе « Сайт дня».признание Awwwards, награда « Веб-сайт дня» от CSSDA и награда Webpicksот Communication Arts.
Christie Tang
Кристи Танг — дизайнер продуктов с замечательным сайтом-портфолио. Горизонтальная навигация позволяет нам исследовать ее последние работы, которые элегантно перемещаются из правой в левую часть экрана. Когда вы дойдете до седьмого проекта, цвет фона изменится с белого на черный, а навигация перейдет с горизонтальной на вертикальную. С каждым новым свитком вы попадаете прямо в глубины творческого мира Кристи, где представлены примеры ее мастерства и разносторонности. Главное меню всегда видно: оно находится в верхней части экрана.
Peak’n Film
За Peak’n Filmстоит Том Гарсин, французский фотограф и видеомейкер. Этот удивительный веб-сайт представляет собой увлекательную демонстрацию захватывающих произведений Тома. Все просто и минималистично, что позволяет его творчеству привлекать внимание. Вверху страницы есть индикатор выполнения, показывающий, как далеко вы продвинулись и сколько его изображений осталось увидеть. Горизонтальный скроллинг гладкий, работает волшебно в обоих направлениях и идеально дополняет портфолио Тома. Весь проект поразителен, отсюда и все награды, которые он получил на FWA, Awwwardsи CSS Design Awards.
Gosha Khidzhakadze
Гоша Хиджакадзе — разработчик с незатейливым веб-сайтом, который очень интересно исследовать.
Gingko
Сайт Gingkoтакже является отличным примером горизонтальной навигации в действии. С каждым экраном вы все больше погружаетесь в манящий мир ландшафтной архитектуры Карин Гокс. Все эффекты анимации ненавязчивы и плавны, но горизонтальная гармония немного нарушена в разделе, где отображаются работы Карин — вот где вертикальная навигация берет бразды правления, пусть даже на мгновение.
Emanuele Milella
Эмануэле Милелла — креативный директор и интерактивный дизайнер с отличным сайтом-портфолио.
Страницы покрыты песчаной зернистой текстурой, которая придает сайту атмосферу ретро. В разделе « Работы» появляется эффект горизонтальной прокрутки. Вы можете отслеживать, сколько проектов вы просмотрели, следя за массивными жирными цифрами, отображаемыми рядом с каждым проектом, или проверяя индикатор выполнения, расположенный под изображениями. Когда вы наводите указатель мыши на изображение, графика начинает следовать за движением курсора и поэтому искажается, хотя и не сильно. Это просто забавный элемент, который демонстрирует внимание Эмануэля к деталям.
Myles Nguyen
Содержание веб-сайта Майлза Нгуена, кажется, беспрерывно шевелится. В буквальном смысле. Эффект волнистости распространяется на весь сайт, поэтому выбор горизонтальной навигации имеет смысл. С каждым поворотом колеса мышки пользователи чувствуют, что они покоряют волны, которые приводят их прямо к примерам работ Майлза. Чтобы сделать эту в основном монохромную витрину еще более запоминающейся, Майлз добавил в содержание немного юмора, еще больше продемонстрировав свою интересную личность.
Parsons Branding
Parsons Branding — студия стратегии и дизайна бренда из Кейптауна. На их веб-сайте вы можете выбирать между бесконечной каруселью и полной сеткой проекта. Если вы выберете первое (которое установлено по умолчанию), вы сможете просматривать проекты студии, используя горизонтальную прокрутку. Как только вы найдете проект, о котором хотите узнать больше, нажмите на него, чтобы открыть кейс. И когда вы дойдете до конца исследования, загрузится еще одно, посвященное другому проекту, и так далее, поддерживая идею непрерывности, которая вездесуща на этом сайте.
Studio Björk
Веб-сайт Studio Björk — еще один яркий пример горизонтальной прокрутки, которая используется на каждой странице сайта. Этот сайт довольно минималистичный, в основном черно-белый, а более яркие цвета видны только на выставленных работах. Экран разделен на несколько частей, каждая из которых соответствует одному проекту. Под каждой картинкой есть несколько основных деталей о работе, о которой идет речь.
Ciao Bella
Чао Беллабыл создан Netflix в честь Найроби, одного из главных героев популярного шоу La Casa de Papel. Сайт заполнен фотографиями, видео, письмами и аудиоконтентом, которые люди со всего мира отправляют своему любимому персонажу. Контент отображается на всем экране, и вы можете перемещаться по нему, перетаскивая курсор в любом направлении. Когда вы найдете что-то, что хотите посмотреть, прочитать или послушать, просто нажмите. Затем вы можете перетащить указатель мыши по горизонтали, чтобы изучить контент, представленный в той же строке, и узнать, что еще фанаты и актеры сериала сказали о Найроби.
Vogue España
Интернет-издание Vogue Españaо моде 80-х представляет собой одностраничный журнал, в котором освещаются все основные модные тенденции эпохи синти-попа. Вы можете перемещаться по графическому и текстовому контенту 80-х годов с помощью горизонтальной навигации, и именно этот эффект придает всему веб-сайту особый внешний вид.
Горизонтальная прокрутка — это эффект, который может сделать просмотр страниц более увлекательным и приятным. Главное — хорошо спланировать, упростить использование, организовать контент и обеспечить постоянную видимость основной навигации. Важно, чтобы все было просто и понятно, чтобы не запутать посетителей. Но это не значит, что вам не следует экспериментировать с выбором шрифтов, цветов и захватывающих анимационных эффектов. Не будем забывать об эффекте параллакса, который так эффективно использовался на нескольких сайтах из нашего списка. Дело в том, что элементы, которые вы могли бы добавить на вертикальный сайт, могут так же хорошо работать и на горизонтальном аналоге. Не ограничивайте себя только потому, что вы выбрали менее популярный тип навигации. Сделайте свой веб-сайт эстетически приятным, добавьте привлекательный и информативный контент и, прежде всего, убедитесь, что ваш проект приносит пользу вашим пользователям.
Источник
Оставьте скроллинг сайта в покое — Дизайн на vc.
ruПростая инструкция, которая поможет избавиться от ошибок при разработке нового, супермодного и контринтуитивного скроллинга. Примеры плохой прокрутки на сайтах топовых студий России.
6019 просмотров
Скроллинг — простая и отзывчивая часть многих интерфейсов, но почему-то дизайнеры думают, что над этой функцией можно издеваться. Я всегда испытываю чувство легкой ненависти к ребятами, которые мудрят со стандартной функциональностью скролла — прокруткой: спрячут, покажут, анимируют, закрепят, сделают сверху — ужас какой-то.
Содержимое страницы должно идти легко, без анимированных проблем. К сожалению, время сейчас модное, зимой ходят с подворотами, а интерфейсы делают контринтуитивными.
Интерфейс должен быть интуитивно понятен, иметь обратную связь, быстро схватываться при беглом взгляде и не путать пользователя. Там множество всяких нюансов, но я буду говорить только об обратной связи. Я терпеть не могу любой интерфейс, который плохо отзывается на мои действия.
Думаю, каждого пользователя раздражает сайт или приложение, которые тормозят или работают не так, как представляется. Особенно это касается скроллинга.
Не усложняйте
CreativePeople
У первого примера ход скроллинга сначала слишком малый, а после — стандартный. Скроллингом мы переходим с главной на внутреннюю страницу, а обратно уже не попасть — так делать нельзя. Если я пришел сюда через одну функцию, не заставляйте меня возвращаться через другую.
Не удаляйте, будет хуже
У AIC просто очень плохой сайт:
Ну и спецэффекты, Aic.
Медленные и «интересненькие» слайдеры должны были умереть в 2012 году. Бесконечно долго ждать загрузки невозможно. У слайдера на главной очень много лишней анимации. Скроллинг вообще отсутствует, поведение страницы неочевидно. Один из худших сайтов.
Покажите хоть что-нибудь
Спецпроект Avito
Скроллинг нельзя скрывать, а если уж скрываете — дайте четкую обратную связь.
На примере выше вообще непонятно, как двигать содержимое страницы. Анимация не подсказывает, куда я иду и что меня ждет.
Это спецпроект Avito, который стал интересен как пример плохого сторителлинга. Из-за плохого скролла я даже не заметил, что это история какой-то там камеры. Делайте нормальную функциональность, чтобы людям было не только интересно, но и удобно читать.
Упрощайте
Пример хорошей прокрутки, но сомнительной навигации.
Hungry Boys
Ребята из Hungry Boys спрятали скроллинг, но сделали функциональность интуитивно отзывчивой. Это очень хороший пример «нестандартного» скроллинга — анимация приятная и быстрая.
Усложняйте, если умеете
Вот пример того, как можно сделать скроллинг и вообще сёрфинг по сайту интересным.
Старая версия сайта студии Олега Чулакова
В студии Чулакова сделали «сложно», но хорошо. Гулять по сайту приятно и понятно. Однако анимация сильно обращает на себя внимание, а это первый признак плохого скроллинга.
Сейчас они вообще все упростили до стандартной функциональности — молодцы.
Хороший скроллинг не обращает на себя внимание.
Пользователь не должен задумываться над тем, как просматривать содержимое страницы, как прокручивать страницу. У нас в интернете и так полным-полно проблем с интерфейсами. Давайте оставим в покое стандартную функцию любого браузера?
Может, стоит обратить внимание на навигацию, или представление информации, подумать о верстке, интерфейсных проблемах сайта. Скролл — не главная проблема, которую срочно надо решить. Вернее, проблемы со скроллами уже давно решили, не создавайте новых.
Перед тем как придумывать очередной контринтуитивный скролл, задайте себе пару вопросов:
- Зачем я это делаю?
- Для кого?
- Какую задачу будет решать?
- Не хочу ли показать, что я классный?
Если адекватных ответов в пользу нового и модного скролла нет — забейте на свои грязные желания.
Решите другие вопросы.
У меня все.
лучших веб-сайтов прокрутки | Вдохновение веб-дизайна
лучших веб-сайтов прокрутки | Вдохновение для веб-дизайнаВЕБ-САЙТ
CTRL SHIFT! подкаст
ВЕБ-САЙТ
МАРНОН
ГОЛОСУЙТЕ СЕЙЧАСВЕБ-САЙТ
Д’ЯВОЛ
ГОЛОСУЙТЕ СЕЙЧАСВЕБ-САЙТ
Зал Нулевых Ограничений
ВЕБ-САЙТ
Семья Вира
ВЕБ-САЙТ
Веб-поток в 2022 году
ВЕБ-САЙТ
КАЦУАКИ УЦУНОМИЯ — ПОРТФЕЛЬ
ВЕБ-САЙТ
Уивр
ВЕБ-САЙТ
ДНК Проектен
ВЕБ-САЙТ
Питание + Голос
ВЕБ-САЙТ
Мотив Партнерс
ВЕБ-САЙТ
Событие Outcrowd: переключение на ИТ
ВЕБ-САЙТ
Бумажник ADV2
ВЕБ-САЙТ
Бергос СЛЕДУЮЩИЙ
ВЕБ-САЙТ
Александр Яременко – Фолиант
jpg"},"slug":"italamp","title":"Italamp","createdAt":1672914183,"tags":["Architecture","Business & Corporate","Animation","Responsive Design","Scrolling","Data Visualization","Interaction Design","UI design"],"type":"submission"}»>ВЕБ-САЙТ
Италамп
ГОЛОСУЙТЕ СЕЙЧАС
png"},"slug":"tealive","title":"Tealive","createdAt":1672820709,"tags":["Food & Drink","Animation","Colorful","Scrolling","Transitions","Microinteractions"],"type":"submission"}»>ВЕБ-САЙТ
Чирок
ГОЛОСУЙТЕ СЕЙЧАС
jpg"},"slug":"readymag-round-up-2022","title":"Readymag round-up 2022","createdAt":1672735380,"tags":["Promotional","Web & Interactive","Animation","Colorful","Scrolling","Experimental","Microinteractions"],"type":"submission"}»>ВЕБ-САЙТ
Обзор Readymag 2022
ГОЛОСУЙТЕ СЕЙЧАС
jpg"},"slug":"the-checkout-2022","title":"The Checkout 2022","createdAt":1672398846,"tags":["Other","Promotional","Web & Interactive","Animation","Retro","Scrolling","Single page","Data Visualization","Interaction Design"],"type":"submission"}»>ВЕБ-САЙТ
Касса 2022
png"},"slug":"writesonic-ai-writing-tool","title":"Writesonic — AI Writing Tool","createdAt":1672313208,"tags":["Technology","Web & Interactive","Animation","Colorful","Icons","Scrolling","Transitions","Header Design","Startups"],"type":"submission"}»>ВЕБ-САЙТ
Writesonic — Инструмент для письма с искусственным интеллектом
jpg"},"slug":"vie-de-compost","title":"Vie de compost","createdAt":1672224415,"tags":["Culture & Education","Scrolling","Single page","Storytelling","Social responsibility"],"type":"submission"}»>ВЕБ-САЙТ
Компост
jpg"},"slug":"meaningful-design-studio","title":"Meaningful Design Studio","createdAt":1672139307,"tags":["Design Agencies","Technology","Web & Interactive","Scrolling","Copy design","Microinteractions"],"type":"submission"}»>ВЕБ-САЙТ
Студия значимого дизайна
jpg"},"slug":"help-the-crew-against-torture","title":"HELP THE CREW AGAINST TORTURE","createdAt":1672139276,"tags":["Interaction Design","Storytelling","Illustration","Scrolling","Graphic design","Web & Interactive","Art & Illustration","Social responsibility","UI design"],"type":"submission"}»>ВЕБ-САЙТ
ПОМОГИТЕ ЭКИПАЖУ ПРОТИВ ПЫТОК
png"},"slug":"11-varas","title":"11 Varas","createdAt":1672055618,"tags":["Business & Corporate","Culture & Education","Film & TV","Scrolling","Storytelling","Gestures \/ Interaction"],"type":"submission"}»>ВЕБ-САЙТ
11 Варас
png"},"slug":"bioage","title":"BioAge","createdAt":1672055591,"tags":["Data Visualization","Interaction Design","Business & Corporate","UI design","Technology","Web & Interactive","Animation","Graphic design","Scrolling"],"type":"submission"}»>ВЕБ-САЙТ
БиоЭйдж
jpg"},"slug":"web-auto","title":"Web.Auto","createdAt":1672055567,"tags":["Big Background Images","Clean","Scrolling","3D","Photo & Video","Microinteractions","Business & Corporate","Technology"],"type":"submission"}»>ВЕБ-САЙТ
Веб.Авто
png"},"slug":"kpr","title":"KPR","createdAt":1672012800,"tags":["Art & Illustration","Web & Interactive","Animation","Colorful","Scrolling","Experimental","Illustration","Storytelling","Interaction Design"],"type":"submission"}»>ВЕБ-САЙТ
КПР
jpg"},"slug":"flashform","title":"Flashform","createdAt":1671753600,"tags":["Technology","Web & Interactive","Animation","Scrolling","Typography","Transitions","Storytelling","Filters and Effects","Startups"],"type":"submission"}»>ВЕБ-САЙТ
Флэш-форма
jpg"},"slug":"attract-group","title":"Attract Group","createdAt":1671618480,"tags":["Design Agencies","Web & Interactive","Animation","Scrolling","3D","Interaction Design","Business & Corporate"],"type":"submission"}»>ВЕБ-САЙТ
Группа привлечения
png"},"slug":"home-space","title":"Home + Space","createdAt":1671618464,"tags":["Scrolling","Gestures \/ Interaction","Architecture","Design Agencies","Web & Interactive","Animation","Clean","Minimal"],"type":"submission"}»>ВЕБ-САЙТ
Дом + Космос
png"},"slug":"reblocs","title":"Reblocs","createdAt":1671528184,"tags":["Minimal","Scrolling","Illustration","Responsive","Microinteractions","Business & Corporate","Startups","Other","Clean"],"type":"submission"}»>ВЕБ-САЙТ
Реблоки
13 идей для веб-сайта с горизонтальной прокруткой для вашего следующего проекта
идеи
29 апреля 2022 г.
Words by Jeff Cardello
Ваш браузер не поддерживает это видеоГотовы привнести новое измерение в свой веб-опыт? Проявите творческий подход с помощью горизонтальной прокрутки.
Большинство веб-сайтов предлагают навигацию с вертикальной прокруткой сверху вниз — это то, к чему мы привыкли и даже не задумываемся, когда перемещаемся по веб-странице вниз.
Но вертикальная прокрутка — не единственный способ структурировать веб-сайт.
Веб-сайты с горизонтальной прокруткой – это простой способ добавить новое движение и визуальные перерывы в ваш контент, что делает их особенно отличным выбором для длинных статей.
Мы собрали несколько изобретательных идей для веб-сайтов с горизонтальной прокруткой, чтобы продемонстрировать универсальность этой простой техники веб-дизайна и возможности того, что вы можете создать в Vev.
Что такое сайт с горизонтальной прокруткой?
Горизонтальная прокрутка — это метод навигации для просмотра веб-контента. Вместо того, чтобы перемещаться по странице веб-сайта вертикально сверху вниз, веб-сайты с горизонтальной прокруткой проводят читателей слева направо — волшебным образом текст и визуальные эффекты перемещаются вбок.
Веб-сайты с горизонтальной прокруткой настолько интересны, потому что они предлагают свежий и нетрадиционный пользовательский интерфейс. Вместо того, чтобы перемещаться по веб-сайту на автопилоте, внимание ваших читателей остается на содержании перед ними — они продолжают прокручивать слева направо, чтобы открыть все больше и больше.
[изображение/графика, относящаяся к вышеизложенному]
Когда вы даете своей аудитории что-то, чего они не ожидают, это может иметь большое значение для привлечения их внимания.
Как использовать горизонтальную прокрутку на вашем сайте
Горизонтальная прокрутка открывает множество творческих возможностей. Его можно использовать для дизайна всего веб-сайта, но также можно использовать в небольших штрихах для демонстрации изображений или другого контента, на который вы хотите, чтобы люди обратили внимание. Vev предлагает готовые разделы с горизонтальной прокруткой, которые вы можете вставить в любой из своих дизайнов.
Мы рекомендуем поэкспериментировать с горизонтальной прокруткой всего на нескольких разделах, чтобы поэкспериментировать с возможностями. Вот несколько способов, как вы можете использовать его для достижения наилучшего эффекта:
Рассказывание историй Горизонтальная прокрутка, одна из немногих техник «прокрутки», идеально подходит для визуального повествования.
Мы привыкли читать книги, и двигаться слева направо кажется естественным. Если вы детализируете последовательность событий, особенно в формате временной шкалы, горизонтальная прокрутка является интуитивно понятным способом представления этой информации.
Горизонтальные разделы мгновенно создают ощущение движения на вашем сайте. Добавление небольшого разнообразия в то, как представлен контент, избавляет вас от монотонного статичного взаимодействия с пользователем.
СтруктураГоризонтальная прокрутка облегчает чтение длинного контента. Вместо одной длинной прокрутки горизонтальные разделы — это динамический способ группировать факты, сообщать о последовательности событий, показывать связанные изображения или выделять контент, на который вы хотите обратить особое внимание.
[изображение/графика, относящиеся к вышеприведенному]
Примеры веб-сайтов с горизонтальной прокруткой
Теперь, когда мы знаем немного больше о том, как использовать горизонтальную прокрутку, давайте посмотрим на изобретательные способы, которыми веб-дизайнеры применяют ее на практике.
Эти примеры веб-сайтов с горизонтальной прокруткой демонстрируют возможности перемещения вещей в боковом направлении.
Audento Digital
Что хорошо в сайтах с горизонтальной прокруткой, так это то, что они уникальны. Мы не видели их повсюду, и когда мы сталкиваемся с одним из них, мы не можем не заметить. Audento Digital использует подход с горизонтальной прокруткой, который производит огромное впечатление в тот момент, когда вы попадаете на него.
Этот веб-сайт раскрывает свой контент вместе с множеством эффектов наведения и других микровзаимодействий. Это не дизайн, который просто прокручивается. Скорее, он наполнен действием и движением, когда вы двигаетесь слева направо.
Искусство покупать автомобиль
Горизонтальная прокрутка подходит не только для длинных веб-редакций. Этот пример веб-сайта с горизонтальной прокруткой, разработанный с помощью Vev, использует его для продвижения уникальной кампании по продаже оцененных произведений искусства для автомобилей Polestar.
Большая часть этого дизайна имеет вертикальную навигацию, но они используют горизонтальную прокрутку для фрагментов фотографий. Просматривая эту галерею, вы сможете продемонстрировать красоту и изысканность этих автомобилей. Этот раздел с горизонтальной прокруткой не только повторяет ощущение премиум-класса этих дорогих автомобилей, но и обеспечивает приятное разнообразие в навигации по этой целевой странице.
Ваш браузер не поддерживает это видеоLA Artbox
LA Artbox — это галерея и пространство для творчества, ориентированное на сообщество. Они наполняют этот дизайн веб-сайта с горизонтальной прокруткой большими полосами ярких цветов, живой анимацией и захватывающими эффектами наведения. У него модный и нетрадиционный вид, а горизонтальная прокрутка открывает это цифровое пространство так, как это невозможно с традиционной раскладкой.
Ваш браузер не поддерживает это видеоMirrows
Мы уже говорили о Mirrows раньше, и мы рады снова поднять их, поскольку мы большие поклонники того, что они сделали со своим веб-сайтом, разработанным Вевом.
Этот идеальный пример веб-сайта с горизонтальной прокруткой предлагает завораживающий пользовательский опыт, наполненный визуальными эффектами и креативной типографикой. Геометрические узоры вращаются, текст прокручивается, а анимированные визуальные эффекты танцуют в пространстве. Этот дизайн был бы слишком сложным для навигации в вертикальном пространстве, а горизонтальная прокрутка предлагает идеальную платформу для его причудливой чувствительности.
Лаборатория IAD 2021
При переходе на этот веб-сайт для мероприятия по дизайну Лаборатория IAD 2021 помещает перед вами ленты текста, которые изгибаются и трансформируются, когда вы наводите на них курсор. Этого начального экрана достаточно, чтобы сделать этот веб-сайт тем, который вы захотите проверить, но здесь происходит гораздо больше, что привлекает внимание и воображение.
Эффекты прокрутки параллакса обычно характерны для вертикально выровненных веб-сайтов, но здесь они используются горизонтально.
Если вы не знакомы, параллаксная прокрутка берет изображения и текст и заставляет их двигаться с разной скоростью, создавая иллюзию глубины. Этот дизайн с боковой прокруткой никогда не кажется плоским и статичным, с различными визуальными эффектами параллакса, которые придают ему ощущение объемности.
Falcon Heavy
Это то, что мы собрали, играя в Vev, взяв карусель с ручным переходом на оригинальном сайте SpaceX Falcon Heavy и превратив ее в бесшовную горизонтальную прокрутку, чтобы продемонстрировать различные компоненты ракеты. Когда вы демонстрируете что-то с четкой последовательностью событий или сложными элементами, как этот, горизонтальная прокрутка — отличный способ показать, что происходит на каждом этапе.
Ваш браузер не поддерживает это видеоSweet Little Things Shoppe
Благодаря яркой цветовой палитре, текстуре бумаги и параллаксной прокрутке, магазин Sweet Little Things Shoppe отлично передает индивидуальность своей пекарни.
На каждом экране есть что-то, что появляется на экране, ослепляя наши глаза и вызывая у нас желание узнать больше об их восхитительной выпечке.
Christo 1910 Стельки
Этот пример веб-сайта с горизонтальной прокруткой от Christo 1910 — это радостный пользовательский опыт, полный огромных цветных квадратов, гигантского шрифта и движения.
Прокручивая его горизонтальное пространство, текст смещается, а затем останавливается в статичном положении. Мультяшное облако гуляет в нижней правой части экрана. Поскольку этот веб-сайт посвящен стелькам для обуви Christo 1910, темы движения и ходьбы так хорошо выражены в этой горизонтальной прогулке по их продуктам.
Ваш браузер не поддерживает это видеоChaletbau Matti
Chaletbau Matti, швейцарская столярная компания, имеет дизайн, столь же богатый визуальными эффектами, как и история.
Небольшое расстояние вниз от вершины приводит вас к разделу прорыва, который перемещает вас горизонтально по временной шкале, обозначающей историю Chaletbau Matti.
Это умный способ использования горизонтальной прокрутки, и он отлично работает, рассказывая историю своей компании.
Устойчивое развитие ПРООН в 2022 году
Веб-дизайн позволяет рассказывать истории способами, которые просто невозможны с традиционной печатью. План устойчивого развития на 2022 год Программы развития Организации Объединенных Наций сообщает о своих стремлениях с помощью панелей с горизонтальной прокруткой, которые являются одновременно художественными и информативными.
Такие штрихи, как органические текстуры, анимированные рыбы и нежная цветовая палитра, соединяют его с миром природы. Вместо того, чтобы эта информация была представлена в холодном и стерильном виде, теплые иллюстрации вовлекают нас прямо в содержание. Это отличный пример, показывающий, насколько хорошо работает горизонтальная прокрутка при отображении временной шкалы событий.
Ваш браузер не поддерживает это видеоRevere Insight
Revere Insight удивляет нас красивым веб-сайтом, разработанным с помощью Vev, полным темных фонов и светящихся цветов.
Нет ничего, что казалось бы устаревшим, с общим эстетическим ощущением высоких технологий и дальновидности. Этот дизайн также отклоняется от традиции с несколькими разделами горизонтальной прокрутки, которые помогают лучше сообщить, кто они как агентство и как они помогают своим клиентам.
Маленькие уколы
Еще один пример дизайна, который вы создаете с помощью конструктора веб-сайтов без кода Vev. Этот вымышленный веб-сайт завода использует горизонтальный раздел для выделения отзывов клиентов. Внедрение таких разделов на ваши сайты идеально, если вы хотите представить группу тематических пунктов в захватывающем, визуально отличном виде — в этом случае убедитесь, что потенциальные клиенты не пропустят добрые слова, которые говорят люди.
Ваш браузер не поддерживает это видеоSomeFolk
SomeFolk смешивает контент с вертикальной прокруткой и разделы с горизонтальной прокруткой на веб-сайте своего агентства.
Демонстрация проделанной вами работы — одна из важных целей веб-сайта агентства./cdn.vox-cdn.com/uploads/chorus_asset/file/19339065/Scrolling_Hero_Still.0.jpg)
Большую часть времени мы видим избранные проекты, расположенные в статической сетке. Здесь они прокручиваются горизонтально на небольшом расстоянии вниз от вершины. Эта галерея эффективно заставляет нас сосредоточиться на их работе, а не быстро прокручивать ее. Использование горизонтальной прокрутки для демонстрации блоков связанного контента, например избранных проектов, — эффективный способ убедиться, что люди не пропустят его.
Создание веб-сайта с горизонтальной прокруткой
Мы создали Vev , чтобы помочь креативщикам экспериментировать с передовыми методами, такими как горизонтальная прокрутка, без каких-либо технических ограничений. Ниже эксперт Vev Льюис рассказывает, как легко начать работу с нашим предварительно закодированным элементом горизонтальной прокрутки. Создайте бесплатную учетную запись, чтобы попробовать это на себе!
Создать бесплатную учетную запись
Ваш браузер не поддерживает это видеоВаш браузер не поддерживает это видеоИтоги года
Моменты, люди и идеи, которые сделали наш 2022 год.