Содержание

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 — это программа предотвращения межличностного насилия, цель которой — повысить осведомленность о различных типах насилия, которым люди чаще всего подвергаются. Разработчики этого сайта выбрали горизонтальную навигацию, чтобы познакомить посетителей с тем, чем занимается их организация, и поделиться тремя спектрами, которые могут быть полезны людям, подвергающимся насилию. Этот веб-сайт является отличным примером того, как работает горизонтальный скроллинг, когда вы хотите представить некоторые общие идеи своим пользователям, и при этом вам не обязательно придерживаться его на всем сайте. Фактически, здесь горизонтальная навигация исчезает в пользу эффекта прокрутки повествования, когда посетители нажимают, чтобы узнать больше о любом из спектров. Веб-сайт Prevint был неоднократно награжден и выигрывал награды CSS Design Awards, Awwwards, и The FWA.


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

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

Источник

 

лучшие практики — CMS Magazine

В июле 2014 года в интернете уже насчитывалось 996 миллионов сайтов. Часть из них составляет прямую конкуренцию вашему ресурсу: пытается выйти на рынок или увеличить имеющуюся долю за ваш счёт. Они пытаются привлечь тех же пользователей, что и вы. Или, что еще хуже, они пытаются откусить кусок от вашего пирога или пользовательской базы. Разумеется, точное количество конкурентов зависит от направления деятельности, целевой аудитории, масштаба компании ­— регионального, национального или международного — и многих других факторов.

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

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

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

Как горизонтальный скроллинг помогает привлечь внимание

Горизонтальный скроллинг (он же горизонтальная навигация) всегда был предметом для споров веб-дизайнеров и довольно долго считался провальным ходом. Как бы то ни было, он появился ещё на заре интернета и иногда становится трендом — причём настолько мощным, что какое-то время (правда, недолго) считается самым популярным и современным решением.

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

Один из самых известных сайтов с горизонтальным скроллингом после редизайна — MySpace

Спросите себя: действительно ли мне нужен горизонтальный скроллинг?

Прочитав этот вопрос в статье о лучших практиках горизонтальной прокрутки вы, должно быть, удивитесь. Тем не менее, вопрос вполне оправдан. Учитывая спорное отношение к горизонтальному скроллингу со стороны дизайнеров и UX-специалистов, стоит всерьёз задуматься о том, нет ли других способов привлечь к себе внимание. Согласно исследованию UX-гуру Якоба Нильсена, информацию, скрытую за боковыми «полями» страницы, находит только 1% пользователей. С другой стороны, правильный подход к горизонтальному скроллингу может сделать пользовательский опыт интересным. Рассмотрим несколько примеров выразительного сочетания горизонтальной прокрутки с параллакс-эффектом. В конце концов, эта статья посвящена именно тому, как, используя горизонталь, добиться отличного UX.

Правильный горизонтальный скроллинг: художник С.Л. Холлоуэй (C.L. Holloway) использует его, чтобы имитировать прогулку по картинной галерее с его работами

Когда горизонтальный скроллинг — лучшее решение c точки зрения UX

По мнению Демиена Риса (Damian Rees), есть 4 случая, когда горизонтальная прокрутка делает пользовательский опыт лучше:

  1. На сайте много картинок (например, сайт о фотографии или сайт-портфолио)
  2. Сайт содержит визуальный контент крупного формата, который не воспринимается быстро (например, карта)
  3. Структура ресурса представляет собой несколько разделов или слайдов в приложении
  4. Крупный каталог товаров, где должно быть удобно просматривать различные категории
Reverse Buro — отличный пример сайта-портфолио с горизонтальным скроллингом

Тщательное планирование

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

Горизонтальная навигация

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

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

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

Основная навигация

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

Сайт фотографа Алекса Фуэраса (Alex Fueras Photography) — отличный пример простой основной навигации в боковом меню и футере, которая обеспечивает быстрый доступ ко всем страницам.

Используйте подсказки

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

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

Чтобы показать пользователям, что сайт скроллится горизонтально, HereDesign использует простые стрелки.

Не пренебрегайте контентом

При работе над горизонтальным сайтом дизайн нередко превращается в самоцель. Чаще всего такая угроза существует на трендовых сайтах, богатых визуальным контентом. Не стоит забывать о настоящей цели сайта, которая только в очень редких случаях звучит как «чтобы пользователи просто смотрели все эти крутые картинки». Убедитесь, что на сайте присутствует информация о бизнесе, продуктах и услугах, контактная информация, формы заказа и т.д.

Помните: горизонтальная ориентация сайта не делает его контент менее значимым, чем контент вертикальных сайтов. Если вы хотите, чтобы пользователи снова и снова возвращались на ресурс, позаботьтесь окачестве контента.

 

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

Программирование

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

Здесь существует несколько подходов.Вот отличный урок, из которого вы узнаете, как создать отличный и функциональный сайт с помощью базовых элементов HTML и CSS. Это только один способ, кроме него существуют и другие.

Последнее предупреждение (Да, ещё одно!)

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

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

Если вы по-прежнему уверены, что на вашем сайте горизонтальный скроллинг придётся очень кстати — вперёд! Гавное — всегда думайте о пользователях. Сайт должен быть не просто красивым, но и удобным — чтобы люди могли быстро найти нужную им информацию и захотели приходить за ней снова и снова.

Скроллинги бывают разные. Мало придумать отличную идею, важно еще ее эффектно воплотить в жизнь.

Ищете команду, способную не только выдавать высококлассный креатив, но и качественно его реализовывать? Обязательно воспользуйтесь рейтингом креативности веб-студий.

Во-первых, он независимый и объективный.

Во-вторых, вы сможете сразу изучить карточки или сайты его участников.

В-третьих, помимо общего зачета, в рейтинге креативности разработчиков сайтов было сформировано несколько подрейтингов относительно количества побед в каждом из 6 конкурсов: «Рейтинг Рунета», «Золотой сайт», Webby Awards, CSS Design Awards, Awwwards, а также FWA.

Оригинал: http://usabilitygeek.com/horizontal-scrolling-user-experience-best-practices/

Горизонтальный скролл становится модным. Разберемся в этом

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


Оригинальное название публикации: “Иск против горизонтального скролла”…

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

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

Избравшие «стезю» горизонтальной прокрутки, рассуждают с позиции собственного выбора. А организации, которые предпочли данный метод, провозглашают свои сайты произведением искусства.


(http://www.guillaumejuvenet.com/)

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

Почему некоторые используют горизонтальный скролл

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

Ставка на мобильные устройства может быть не такой удачной идеей

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

Основная причина этого уже была высказана выше. Люди не знают о том, что можно просматривать контент, просто прокручивая его как-то по-другому.

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

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

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

Продуктивное использование вертикального пространства для контентной области

В вертикальном макете, весь контент вне зависимости от степени его важности, идёт друг за другом. Ключевую информацию можно выделить только оформлением, а не позиционированием на странице. Единственное что может дизайнер — разместить ключевую информацию в начале страницы.

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

Когда стоит использовать горизонтальный скроллинг, если вы это точно хотите

(

http://qandhlondon.com/

)

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

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

Проблема юзабилити


(

http://movingislands.com/en

)

Хотя множеству пользователей сегодня знакомо и даже привычно горизонтальное пролистывание (когда меняется всё наполнение страницы), горизонтальную прокрутку (с плавной подгрузкой контента) многие по-прежнему осуждают. Она продолжает получать отрицательные отзывы от многих пользователей, и поэтому применять ее следует с осторожностью. Ее, как правило, используют, чтобы проявить индивидуальность, например, заявить о торговой марке. Но даже при таком использовании, многим людям это непривычно.

Пользователи игнорируют блоки сайтов с горизонтальной прокруткой

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

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


(http://www.lorenzobocchi.com/)

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

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

Как же правильно?


(

http://www.themobileplaybook.com/en-us/#/overview

)

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

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

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

Что следует принимать во внимание


(

http://www.richard-hill.org.uk/

)

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

В аналоговых клавиатурах легче манипулировать клавишами «вверх/вниз», чем «вправо/влево». А вот на тачпаде добавление новых жестов будет более удобным при реализации горизонтального скролла.

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

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

В заключение


(

http://www.archi-graphi.fr/

)

Раз горизонтальная прокрутка пришлась кстати на мобильных устройствах с тачскринами, это не значит, что она будет столь же популярной на десктопах. Не стоит «выходить за рамки» только для того, чтобы выделиться из толпы, но пробуйте, если действительно верите в такой подход. Однако даже в этом случае не упускайте из внимания комфорт пользователей, ибо это вы зависите от них, а не наоборот.

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

Переводчик: Аня, тестировщик Mockup editor SletchBuilder

Горизонтальный скроллинг: дизайнерская «фишка» или важный элемент UX

  1. Главная
    2. /
  2. Блог
    3. /
  3. Горизонтальный скроллинг: дизайнерская «фишка» или важный элемент UX

Скроллинг — не только колёсико мыши. В более широком смысле это понятие обозначает, что содержимое информации находится в движении по вертикали или горизонтали.

Неважно, о какой форме информации идёт речь — тексте или изображении. На содержании информации скроллинг никоим образом не сказывается, но он является очень важным элементом UX. Эта аббревиатура с английских слов «User eXperience» может быть расшифрована как «Опыт взаимодействия». Речь идёт о том, что чувствует человек в том или ином случае, какой, например, у него UX, если он нечаянно наступил в лужу, какой UX , если он просматривает сайт с горизонтальным скроллингом.

Стоит ли использовать горизонтальный скроллинг на сайте?

Проблемы UX рассматриваются специалистами ИТ-технологий очень пристально. Речь идёт об успешности сайта, а сайты не делаются понапрасну. По статистике на июнь 2014 года в интернете было 996 млн.сайтов, и вряд ли найдётся хоть один, у которого нет конкурентов. Стало быть, кроме SEO-продвижения, создателю сайта надо всеми силами сделать своё детище «из ряда вон». А это непросто.Тут-то дизайнер и вспоминает про горизонтальный скроллинг. Таких сайтов немного, и значит есть шанс что сайт запомнится или привлечёт большее внимание. Но возможно и обратное. Большинство пользователей привыкли переходить со страницы на страницу с помощью мыши или стрелок на клаве, а двигать ползунок хочется не каждому. Поэтому большинство специалистов UX относится к горизонтальной прокрутке сайта с большой осторожностью, если не сказать — негативно.

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

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

 

Почитать о нас можно тут Узнать какие мы предоставляем услуги здесь

изучаем виды скроллинга и признаки доступного сайта — Джино • Журнал

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

4 типа скроллинга (и их предназначение)

Оригинал: The 4 Scrolling Types (and When to Use Them)

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

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

Прокрутка страниц слева направо используется гораздо реже, чем сверху вниз — и, возможно, зря. Такой способ просмотра подходит для сайтов с большим количеством фото и видео или с представлением контента в виде слайд-шоу. Однако если речь идёт о страницах, где преобладает текст, то горизонтального скроллинга лучше избегать.

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

Длинный скроллинг

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

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

Бесконечный скроллинг

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

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


При параллакс-скроллинге сайт как будто разбивается на несколько слоёв

Параллакс-скроллинг

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

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

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

Как сделать сайт понятнее и доступнее

Оригинал: How to Add Accessibility to Your Website

Люди принадлежат к разным культурам, говорят на разных языках, по-своему воспринимают мир и имеют свои ограничения по здоровью. Чтобы вашим сайтом могли воспользоваться 100% вашей потенциальной аудитории, сделайте его доступнее для разных пользователей, вне зависимости от их особенностей.

Согласно Положению о доступности веб-контента, выделяются четыре принципа доступности сайта. Чтобы соответствовать им, сайт должен быть…

…доступным для восприятия.

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

…доступным для использования.

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

К этому же пункту относится и тема капчи. Не все пользователи имеют возможность рассмотреть искажённые символы на экране и вписать их в поле ввода. В связи с этим появились аудиокапчи и проверки формата reCAPTCHA.


Такую капчу проходить гораздо удобнее

…понятным.

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

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

…адаптированным к разному ПО.

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

Некоторые советы по повышению доступности сайта уже прозвучали, добавим к ним ещё несколько:

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

overflow-x | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+9.5+3.0+1.5+2.1+2.0+

Краткая информация

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
Процентная записьНеприменима
Ссылка на спецификациюhttp://www.w3.org/TR/css3-box/#overflow-x

Версии CSS

Описание

Свойство overflow-x управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещается и выходит за область справа или слева от блока.

Синтаксис

overflow-x: auto | hidden | scroll | visible

Значения

visible
Отображается все содержание элемента, даже за пределами установленной ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляется горизонтальная полоса прокрутки.
auto
В зависимости от браузера, в основном, горизонтальная полоса прокрутки добавляется только при необходимости.

Пример

HTML5CSS 2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow-x</title>
  <style>
   .layer {
    overflow-x: scroll; /* Добавляем полосу прокрутки */
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
    white-space: nowrap; /* Запрещаем перенос строк */
   } 
  </style>
 </head>
 <body> 
  <div>
   <h3>Duis te feugifacilisi</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow-x

Объектная модель

[window.]document.getElementById(«elementID»).style.overflowX

Горизонтальный веб-сайт / однострочная таблица



В настоящее время я создаю сайт для размещения своего арт-портфолио. Для моей страницы портфолио я использую таблицу с одной строкой и хотел бы, чтобы в ней было бесконечное количество разделов столбцов в этой одной строке. К сожалению, я получаю только 4 фотографии в строке, а 5-я автоматически выталкивается ниже, как будто она пытается начать новую строку. Я не совсем уверен, как это исправить. У меня нет определенного количества фотографий, чтобы поместить их в таблицу, я буду добавлять все больше и больше, так что не может быть никакого реального ограничения на количество img, которые я хотел бы вставить в таблицу. Любая помощь будет очень признательна.

Спасибо, Стивен К.

jquery html css webpage infinite
Поделиться Источник user2980793     11 ноября 2013 в 21:31

2 ответа


1

в css

ul.infinte{
white-space: nowrap;
overflow-x: auto;
}
ul.infinte li{
display: inline-block;
}

в html

<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
...
<li><img src="image999.jpg" /></li>
<ul>

Это должно держать ваши изображения в одном ряду. Не нужно использовать таблицу, вместо этого используйте ul>li, это проще.

Поделиться pictoru     11 ноября 2013 в 21:40


0

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

Возможно, лучше всего было бы иметь сервер изображений.

Поделиться PeonProgrammer     11 ноября 2013 в 21:39

Похожие вопросы:


одна страница горизонтальный сайт не центрированный по размеру

Я разрабатываю свой первый одностраничный горизонтальный сайт с использованием jQuery и плагина scrollTo. Сайт имеет 3 экрана и начинает центрироваться (показывая средний экран). Чтобы достичь…


Горизонтальный ListView

Возможный Дубликат : Как я могу сделать горизонтальный ListView в Android? Я использовал вертикальный ListView много раз, но для определенных требований я хочу реализовать горизонтальный ListView,…


Таблица неправильно отображает мой сайт wordpress?

В настоящее время я работаю на своем веб-сайте, где у меня есть таблица, и она отображается неправильно. Тексты отключены на несколько пикселей. Вот ссылка на сайт http://bit. ly/xMaBXR


Prettyphoto загружается в начале страницы горизонтальный 1 страничный сайт

В настоящее время я внедряю PrettyPhoto в горизонтальный 1-страничный веб-сайт: http://www.basenharald.nl/3d (нажмите foto & video для раздела, о котором я говорю) В каком-то смысле сценарий…


как дать горизонтальный и вертикальный заголовок фиксированным, но данные должны двигаться

Я попытался разработать таблицу с фиксированным заголовком( т. е. заголовок должен содержать-вертикальный и горизонтальный путь ). таблица должна быть прокручиваемой таблица должна иметь…


Полноэкранный адаптивный горизонтальный сайт

Я пытаюсь найти лучший метод для того, чтобы создать горизонтальный веб-сайт, полноэкранный и, если возможно, отзывчивый, минимальной ширины для планшетов. Дело в том, что мне нужна также…


Media запросов не работают (горизонтальный сайт)

Я делаю этот горизонтальный сайт, и я использую 2 экрана: один 1920×1080, один 1600×900. Это мой css, я хочу, чтобы для экранов меньше 1650px ширина элемента была 65%,, а для больших экранов 71%….


Viewport trigger css анимация (горизонтальный веб-сайт)

Я пытаюсь сделать горизонтальный сенсорный дружественный сайт, используя swiper.js … Я сделал несколько очень простых анимаций css, и я хотел бы запускать эти анимации каждый раз, когда они…


Многоязычный веб-сайт: одна таблица или несколько таблиц?

Я создаю многоязычный веб-сайт в PHP. Сначала я рассматривал возможность использования файла JSON с такой структурой, как { TEXT_CODE: { LANG_CODE: TEXT, LANG_CODE: TEXT } } Но затем, поскольку…


Горизонтальный дизайн прокрутки для веб-сайта

Я учусь кодировать свой путь через HTML и CSS. Сейчас я пытаюсь создать шаблон для веб-сайта (как часть моего учебного процесса). Я хочу создать веб-сайт, который прокручивается только…

удивительных примеров веб-сайтов с горизонтальной прокруткой

Вы когда-нибудь задумывались о том, что веб-сайты с горизонтальной прокруткой будут иметь место?

С каждым годом создается все больше и больше сайтов. Каждый борется за внимание зрителей.

Что отличает веб-сайт от других и привлекает больше посетителей? Все сводится к веб-дизайну.

Дизайн веб-сайта определяет, останется ли посетитель или уйдет.

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

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

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

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

Горизонтальный макет может помочь представить содержимое изображения лучше, чем вертикальный макет. Это также улучшает взаимодействие с пользователем.

Следующие типы веб-сайтов хорошо смотрятся с горизонтальной прокруткой:

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

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

    При создании сайта с горизонтальной прокруткой необходимо дополнительное планирование. Это потому, что дизайнеры менее знакомы с этим стилем навигации.

    Помните об этих моментах при проектировании горизонтального участка:

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

    Добавьте индикаторы, сообщающие пользователям, что страница прокручивается в сторону. Индикаторы включают стрелки или показывают часть изображения, так что посетителю нужно прокрутить, чтобы увидеть остальные

    • Используйте эффекты параллакса, которые делают работу более удобной.
    • Пользователи не хотят использовать горизонтальную полосу прокрутки. Большинство людей используют колесико мыши или клавиши со стрелками.

    Для наилучшего взаимодействия с пользователем горизонтальные веб-сайты должны задействовать эти механизмы

    Удивительные примеры горизонтальных веб-сайтов

    Home Société

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

    Это хороший пример сочетания изображений и письменного контента на горизонтальном веб-сайте.

    Портфолио Евгении Дюранте

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

    Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода

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

    Балерина

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

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

    Эльфлеттериг

    Elfletterig использует преимущества горизонтальной прокрутки для отображения множества изображений своих проектов.Эти изображения намного лучше подходят для горизонтального веб-сайта, чем для вертикального.

    Alex Flueras Фотография

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

    Пользователи могут использовать горизонтальную полосу прокрутки или клавиши со стрелками на клавиатуре для прокрутки.

    Шесть носков Студия

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

    Великие армяне

    Великие армяне — это галерея ста армян, изменивших мир.

    Веб-сайт использует горизонтальную и вертикальную прокрутку, чтобы направить посетителей в путешествие. Кнопка «вернуться к началу» полезна для тех, кто не хочет снова пролистывать весь контент.

    Группа Немезиды

    Веб-сайт Nemesis — отличный пример организованного и чистого горизонтального веб-сайта.Он использует крупную типографику и пробелы таким образом, чтобы это было приятно для глаз.

    Еще одна особенность, достойная подражания, — это меню, которое всегда отображается вверху страницы.

    Студия Д. Потфера

    Этот сайт-портфолио использует горизонтальный дизайн для отображения поразительного графического содержания.

    Deepondé

    Этот сайт приветствует посетителей видео. Используя колесо мыши, посетители могут прокручивать товары на сайте.

    Zand.tech

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

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

    Джейсон Лав

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

    Виртуальная выставка SSDC2020

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

    Меценат Студия

    Maecenas Studio сочетает в себе вертикальную и горизонтальную прокрутку. Он представляет свои проекты так, как будто посетитель перелистывает страницы книги.

    Bbb.cat

    Художники приветствовали открытие студии созданием плакатов.Пользователи могут просматривать плакаты на этой веб-странице.

    Вообан

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

    Квок Инь Мак

    Квок Инь Мак рассказывает историю своей работы в области графического дизайна. Сайт организован, но содержит много информации.

    Принципы типографики

    Этот веб-сайт посвящен типографике и подчеркивает принципы шрифтов с примерами.

    Газнор

    Gasnor использует горизонтальный ползунок на своем вертикальном сайте для отображения данных. Этот ползунок помогает передать идею движения вперед во времени и увеличивает вес сообщения.

    Museo de la desinformación

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

    Точки превращаются в галочки после того, как пользователь заходит в этот раздел.

    Peak’n Film

    Peak’n Film — классический пример использования горизонтального веб-сайта. Макет позволяет посетителям сосредоточить все свое внимание на потрясающих изображениях.

    Belward Tree Films

    Belward Tree Films наилучшим образом использует экранную площадь для отображения фотографий и видео.

    Участок Стаса Яручина

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

    Buildinamsterdam

    Этот веб-сайт с горизонтальной прокруткой отличается яркими цветами изображения, эффектами параллакса и стрелкой навигации.

    Spiritus

    Spiritus сохраняет чистый и простой вид, который привлекает посетителей. Он имеет постоянное навигационное меню и включает интерактивные элементы.

    Цифровая выставка Foam Talent

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

    Грохот

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

    Кристи Тан

    Веб-страница портфолио Кристи Танг позволяет пользователям быстро просматривать ее последние проекты. После седьмого проекта прокрутка переключается с горизонтальной на вертикальную.

    Мы стреляем по бутылкам

    Эта британская группа специализируется на фотографировании бутылок.Эта короткая веб-страница демонстрирует их работы.

    Studio — BA®

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

    Завершение мыслей об этих примерах веб-сайтов с горизонтальной прокруткой

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

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

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

    Почему бы не проверить свои творческие способности и не попробовать веб-сайт с горизонтальной прокруткой?

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

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

    И это еще не все.

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

    Витрина 30+ сайтов с горизонтальной прокруткой

    Любите их или ненавидите, веб-сайты с горизонтальной прокруткой s разбросаны по сети, и есть несколько фантастических примеров.В отличие от традиционного макета веб-сайта, который прокручивается вверх и вниз, горизонтальные веб-сайты переворачивают элементы и прокручиваются слева направо. Иногда они дополнены Javascript , чтобы предложить еще более богатый пользовательский интерфейс , например эффекты автоматической прокрутки. Ознакомьтесь с этой коллекцией из 30 вдохновляющих примеров и следуйте инструкциям, полным блестящих руководств, которые дают представление о теории и практике создания собственного горизонтального сайта.

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

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

    Это креативный веб-сайт Джейсона Лава с горизонтальной прокруткой. Он представляет историю с двумя концовками с множеством иллюстраций по пути

    У

    Magpie-studio есть интересный способ представления контента своим читателям.У них есть одностраничный веб-сайт, состоящий из горизонтальных изображений, которые скользят, когда вы нажимаете на них.

    Zand использует на своем веб-сайте анимацию и горизонтальную прокрутку. Это команда UX, которая любит дизайн и сосредоточена на поиске лучших решений для своих клиентов.

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

    Этот горизонтальный веб-сайт посвящен творчеству современного иллюстратора Фредерико Бабина.Вы можете пролистать галерею впечатляющих произведений искусства, слушая тщательно подобранный саундтрек.

    Этот веб-сайт имеет минималистичный, но уникальный дизайн. Они сосредоточены на предоставлении ключевой информации о себе и своей работе.

    Этот горизонтальный веб-сайт работает как портфолио агентства дизайна и разработки и отличается креативным и уникальным дизайном.

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

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

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

    Magic Realism также использует горизонтальный веб-сайт, на котором они размещают контент в красивом минималистском стиле, похожем на галерею изображений.

    Neu-e — это горизонтальный веб-сайт, который побуждает своих читателей делать что-то из обычной коробки. Результаты очень хорошие, и каждый объект размещен на своей странице.

    Zupadupa — это веб-агентство из Клуж, Румыния. У них есть веб-сайт с горизонтальной прокруткой и минималистским дизайном.

    Hipstamatic использует на своем веб-сайте как вертикальную, так и горизонтальную навигацию. У них есть творческий способ публикации контента, особенно с помощью анимации, изображений и типографики.

    Горизонтальный путь, как следует из их названия, — это проект, целью которого является демонстрация списка горизонтальных веб-сайтов, подобных их собственному.

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

    Этот веб-сайт имеет горизонтальную компоновку, в которой для прокрутки галереи фотографий, сделанных Алексом Флюрасом, используются клавиши навигации.

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

    Цель

    LoveBento — продемонстрировать на своем горизонтально прокручиваемом веб-сайте некоторые из самых любимых вещей в мире, например музыкальные альбомы.

    25 лет Интернета — это история Интернета, начиная с первого предложения в 1989 году и до наших дней с использованием горизонтальной компоновки и интерактивного способа представления контента.

    Честерское зоологическое общество делится своей историей, начиная с 1930 года и до наших дней, используя горизонтальную прокрутку на своей странице.

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

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

    Этот веб-сайт ориентирован на представление архитектурных проектов из Франции на веб-сайте с горизонтальной прокруткой. Изображения представлены в виде сетки, которая очень часто используется в портфолио.

    И последнее, но не менее важное: веб-сайт Дина Окли — еще один пример удобного использования горизонтальной прокрутки.

    БОНУС

    : Как создать свой собственный веб-сайт с горизонтальной прокруткой

    Хотите построить собственный горизонтальный участок? Ознакомьтесь с этими удобными статьями и руководствами.Каждый из них предлагает советы экспертов по используемым методам кодирования и лучшим практикам при выборе горизонтального пути.

    Этот первый пример может оказаться действительно полезным, если вы планируете создать горизонтальную страницу. Из этого видео вы узнаете, как сделать страницу с плавной горизонтальной прокруткой с помощью Bootstrap и некоторой магии jQuery.

    Из этой статьи вы узнаете много новых методов создания веб-сайтов с вертикальной и горизонтальной прокруткой с помощью fullPage.js.

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

    Это еще один полезный урок от w3schools, который научит программировать и создавать горизонтальное прокручиваемое меню с помощью CSS.

    15 горизонтальных площадок и аргументы в пользу их создания

    Интерес к прокрутке действительно изменился с тех пор, как мы могли использовать цветные полосы прокрутки в Internet Explorer много лет назад.

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

    А как их винить? Это нормально. Это то, что ожидалось. И зачастую это проще всего реализовать.

    Но где любовь к сайтам с горизонтальной прокруткой? Не многие люди создают их, в основном из-за трудностей в разработке и идеи, что горизонтальные веб-сайты менее функциональны.Аргумент против горизонтальной прокрутки звучит примерно так: «Зачем изобретать велосипед?» Но должны ли мы дать возможность горизонтальной прокрутки?

    Когда и почему?

    Горизонтальная прокрутка должна иметь шанс по двум основным причинам: (1) наше увлечение адаптивным дизайном и (2) горизонтальные сайты имеют место и цель, как и сайты с прокруткой.

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

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

    Обратное бюро

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

    Гэвин Каслтон

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

    Бартл Богл Хегарти

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

    Йенс Леманн

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

    Джеймс Джойс

    В отличие от сайта Reverse Buro, мы не видим каждую часть работы отдельно на каждом экране. Однако я думаю, что это работает для Джеймса Джойса и его проектов, потому что все они очень похожи. У нас есть шанс по-настоящему увидеть и насладиться его стилем.

    Здесь Дизайн

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

    К. Л. Холлоуэй

    Это одно из наиболее очевидных применений горизонтальной прокрутки, которое я когда-либо видел. Это довольно умно, потому что этот человек художник и живописец, который, вероятно, бывал в разных музейных экспонатах. Почему бы не сделать это в Интернете? Это на самом деле дает лучшее представление о том, чем занимается Холлоуэй и как он хочет, чтобы его видели. Мне очень нравится этот сайт.

    WWF

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

    Уровень блока

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

    Горячая точка

    Hot Dot — компания, занимающаяся веб-производством, которая заявляет, что она чрезвычайно новаторская. С такими смелыми заявлениями лучше надеяться, что у них есть веб-сайт, подтверждающий это. К счастью, есть. Теперь мы привыкли к сайтам с параллаксной прокруткой, которые прокручиваются вниз, но на этот раз мы получаем сайт с параллаксом, который прокручивается слева направо. Он так же интересен, если не больше, чем его предшественник, и имеет очень новаторский вид.

    Rezo Zero Interactive

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

    В поисках идеальной поп-музыки

    Если вы любите черно-белую фотографию и сюжетные линии в веб-дизайне, этот сайт для вас.Quest for the Perfect Pop в основном посвящен звуку, который издает ваше пиво, когда вы открываете его. Этот сайт — ода этому, создавая очень интересную сюжетную линию, которая скоро будет доступна.

    Нервал

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

    Myspace

    Некоторые из нас достаточно взрослые, чтобы помнить «Myspace Tom» и аргументы, которые мы вели с нашими друзьями по поводу того, что они не входят в наши 8 или 16 лучших. Myspace решил вернуться, но решил замусорить страницы блестками и с него падают плюшевые мишки, а вместо этого у нас очень чистый и отзывчивый дизайн, который прокручивается слева направо. В то время как другие социальные сети развиваются вверх и вниз, Myspace делает что-то другое, создавая горизонтальную навигацию.

    Giellesse

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

    Заключение

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

    Вы создали сайт с горизонтальной прокруткой? Вы предпочитаете горизонтальную прокрутку, вертикальную или вообще не прокручиваете? Дайте нам знать об этом в комментариях.

    Как это сделать хорошо

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

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

    Вертикальная прокрутка работает нормально … но как насчет ее аналога по оси X, горизонтальной прокрутки ? Вы могли подумать о добавлении этой более редкой функции на свой сайт.Но является ли метод горизонтальной прокрутки интуитивно понятным или даже полезным? Это лучше вертикальной прокрутки? И как это может обогатить ваш UX?

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

    Что такое горизонтальная прокрутка?

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

    Другими словами, колесо прокрутки заставляет страницу перемещаться по экрану горизонтально, а не вертикально. Вот пример вертикальной прокрутки на сайте фотографа:

    Источник изображения

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

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

    Недостатки горизонтальной прокрутки

    Мнения о горизонтальной прокрутке неоднозначны как среди веб-дизайнеров, так и среди веб-пользователей. Даже я сам не очень этим увлекаюсь по нескольким причинам:

    Это противоречит ожиданиям пользователей.

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

    Это нормально — время от времени нарушать правила дизайна, чтобы добавить визуального чутья и изюминки. Но игнорирование этой конкретной конвенции без четкой цели смутит и расстроит посетителей больше, чем увлечет. И многие просто подумают, что ваша страница / элемент страницы сломан.

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

    Имеет высокую стоимость взаимодействия.

    С точки зрения UX, стоимость взаимодействия — это количество усилий, которые требуется пользователю для выполнения действия, такого как взаимодействие с элементом страницы.Стоимость взаимодействия состоит из (1) того, насколько усердно мы должны думать о задаче, и (2) физических усилий, необходимых для выполнения задачи.

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

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

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

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

    Его легко упустить или проигнорировать.

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

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

    Это создает проблемы для доступности.

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

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

    Когда работает горизонтальная прокрутка

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

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

    Чтобы скрыть вторичное содержимое

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

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

    Для отображения предложений по категориям

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

    сайтов электронной торговли используют этот метод для разделения своего каталога на типы товаров. Стриминговые платформы делают то же самое со своими фильмами и сериалами. Посмотрите, как Netflix интегрирует горизонтальную прокрутку в свой пользовательский интерфейс:

    Источник изображения

    Также обратите внимание, что в этом примере предлагается альтернатива прокрутки — кнопки со стрелками.

    Для навигации по большому изображению или визуальному элементу

    Иногда один элемент может быть слишком большим для вашей страницы, и вы хотите уместить его в меньший элемент окна. Карты, изображения с большим количеством деталей и растянутые визуализации, такие как временные шкалы, — все это представляет собой проблему дизайна. Чтобы помочь пользователям ориентироваться и исследовать большую 2D-плоскость, рассмотрите возможность использования горизонтальной прокрутки.

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

    Рекомендации по горизонтальной навигации

    1. Избегайте горизонтальной прокрутки на полных веб-страницах.
    2. Включить другие методы взаимодействия.
    3. Создавайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
    4. Сделайте горизонтальную прокрутку визуально заметной.

    Итак, вы думаете, что горизонтальная навигация имеет место на вашем сайте? Вот несколько рекомендаций, о которых следует помнить:

    1. Избегайте горизонтальной прокрутки на полных веб-страницах.

    Горизонтальная прокрутка никогда не должна заменять вертикальную прокрутку на всей веб-странице. Нарушение этого правила оттолкнет большинство пользователей.

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

    Источник изображения

    В этом примере пользователь выполняет прокрутку вниз.Появление СМИ справа поначалу неожиданно, но вы быстро понимаете, что происходит.

    2. Включите другие методы взаимодействия.

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

    Источник изображения

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

    3. Создайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.

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

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

    4. Сделайте горизонтальную прокрутку визуально заметной.

    Обязательно минимизируйте вероятность того, что посетители пропустят ваш контент, сигнализируя о возможности горизонтальной прокрутки.

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

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

    Источник изображения

    Наконец, можно использовать текст с инструкциями, например «Прокрутите, чтобы узнать больше». Попробуйте все эти реализации при создании прототипов и тестировании.

    Как создавать контейнеры с горизонтальной прокруткой в ​​HTML и CSS

    Когда элемент HTML — скажем,

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

    Чтобы включить горизонтальную прокрутку, мы можем использовать свойство CSS overflow-x .

    Если присвоить значение scroll свойству overflow-x элемента-контейнера, браузер скроет содержимое, выходящее за границы горизонтального переполнения, и сделает его доступным с помощью горизонтальной прокрутки. Чтобы это работало, необходимо указать ширину как элемента контейнера, так и дочернего элемента (элемента в контейнере).

    Давайте разберем этот метод более подробно ниже.

    Шаг 1. Используйте HTML для создания контейнера.

    В этом примере я создал контейнерный элемент

    шириной 500 пикселей. Внутри этого контейнера
    находится дочерний элемент

    с установленной шириной 1000 пикселей. Поскольку ширина

    превышает ширину

    , текст выливается за край справа от контейнера.

    Вот HTML-код моего примера, как показано выше:

      
      
      
      
      
     
     
     
     (Ваш текст находится здесь.Кроме того, вы можете размещать другие элементы в этом родительском div.

    Шаг 2: Используйте CSS, чтобы указать заданную ширину для контейнера и применить поведение прокрутки.

    Настройка overflow-x: прокрутка до контейнера

    отображает внутри него полосу прокрутки.

    Вот соответствующий код CSS для моего примера:

      
     div {
     background-color: lightblue; 
     граница: сплошной черный 1px; 
     высота: 100 пикселей; 
     ширина: 500 пикселей; 
     переполнение-x: прокрутка; 
    } 
     p {
     ширина: 1000 пикселей; 
     поле: 10 пикселей; 
    }

    Хотите дополнить причудливый элемент горизонтальной прокрутки? CSS Tricks, Codeburst и UX Collective — все они предлагают подробные руководства, на которые вы можете ссылаться для создания пользовательских контейнеров.

    Как отключить горизонтальную прокрутку

    Если вы не установите ширину дочернего элемента в его родительском

    , содержимое дочернего элемента будет перенесено на следующую строку, избегая переполнения. Вы также можете установить для свойства overflow-x значение hidden , что предотвращает перенос дочернего содержимого в его контейнер, но отключает боковую прокрутку.

      
     div {overflow-x: hidden; }

    Другое решение — установить ширины дочерних элементов на 100% .Это указывает дочернему содержимому перейти к следующей строке, чтобы избежать обрезки краем контейнера, независимо от ширины контейнера.

      
     p {ширина: 100%; }

    Боковая прокрутка

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

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

    Примечание редактора: этот пост был первоначально опубликован в сентябре 2020 года и был обновлен для полноты.

    Использование горизонтального дизайна для веб-сайтов

    Ник Робсон

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

    И именно этим стал горизонтальный дизайн: уникальный и модный. Теперь это то, что ассоциируется с веб-сайтами, которые хотят почувствовать индивидуальность, оригинальность и современный стиль. Это означает, что это стиль, который дизайнеры должны учитывать при рассмотрении вариантов веб-сайта, которые могут выиграть от такого дизайна.

    Почему вы должны его использовать?

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

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

    Выполнение горизонтальных проектных работ

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

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

    • Интуитивное меню. Некоторые веб-сайты с горизонтальной прокруткой полностью отказались от меню, и все можно найти, если просто прокрутить достаточно далеко. В этом есть положительный аспект: пользователи должны видеть практически все, но их внимание не всегда длится так долго. Важно иметь легко видимое меню, которое может быстро направить их к нужной информации. Это особенно важно для постоянных посетителей, которые могут иметь в виду конкретную страницу, на которую они хотят быстро и легко перейти.Этот сайт от Handmade Interaction демонстрирует отличное расположение меню и страниц. Меню приведет вас прямо к информации, и каждая страница пронумерована. Не только это, но и полоса прокрутки внизу все еще включена, что хорошо, потому что прокрутка на этом может быть немного лучше.

    • Внимание! Основная причина, по которой используется горизонтальный дизайн, заключается в том, чтобы привлечь внимание пользователя и сразу вызвать ощущение чего-то отличного от обычного.Это не тот дизайн, который подходит для приглушенных корпоративных веб-страниц. Он должен иметь блики, и большинство горизонтальных участков делают это. Они имеют тенденцию быть красочными или, с другой стороны, иногда не имеют почти любого цвета, но в художественной манере. Они также часто внедряют некоторые из последних достижений веб-дизайна (если вы хотите быть в курсе последних достижений, серия Flippin ’Awesome« Best of »- отличный ресурс для информирования дизайнеров и программистов). В любом случае, их просмотр немедленно оказывает влияние, а если все сделано правильно, у пользователя возникает желание глубже изучить то, что может предложить сайт.Lucuma Audiovisual имеет незамысловатый дизайн, который сразу привлекает внимание пользователя и производит впечатление, но при этом прост в использовании и обеспечивает быстрый доступ к необходимой информации.

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

    Заключение

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

    Брайан Ринальди — основатель Flippin ’Awesome. Брайан работает менеджером по контенту разработчиков в Telerik (хотя этот сайт не связан с его работодателем), сосредоточенный на том, чтобы команда по связям с разработчиками создавала первоклассный контент для сообщества веб-разработчиков.Ранее Брайан сосредоточился на публикации материалов для разработчиков HTML, CSS и JavaScript для Adobe Developer Connection в Adobe.

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

    Вы можете прочитать архив блога Брайана с более чем 9-летним контентом на сайте remotesynthesis.com (он все еще публикует сообщения, но нечасто). Вы можете найти полный список прошлых публикаций и презентаций Брайана.Следите за сообщениями Брайана в Twitter @remotesynth.

    Пятнадцать веб-сайтов с использованием горизонтальной прокрутки

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

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

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

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

    Эрик Йохансон имеет соответствующий слоган: «Этот сайт — тормоз».

    Портфолио Стефана Букко

    Бэнкси

    Рикардо Арсе

    Голоса Бека

    Дин Окли

    Фрэнк Джакоббе

    Коробочный дудл

    Обмен стенами

    Pixel Lounge

    Паоло Боккарди

    ругательства

    Front End Design Conference — Конференция закончилась, но на сайте есть информация и загрузки о том, что произошло, и по-прежнему используется горизонтальная прокрутка.

    По поводу уловок CSS Крис Койер (Chris Coyier) написал хороший учебник, объясняющий, как создать веб-сайт с горизонтальной прокруткой с помощью CSS.

    Что вы думаете о горизонтальной прокрутке? Лучше всего сохранить его для творческих сайтов, или мы увидим больше на обычных сайтах?

    40 лучших сайтов с горизонтальной прокруткой

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

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

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

    Но как насчет удобства использования?

    Посмотрим правде в глаза. Удобство использования — чрезвычайно важная часть веб-дизайна, а горизонтальные веб-сайты пока не очень удобны для пользователя. Однако удобство использования — не самая важная часть уравнения. Те, кто превыше всего ставит юзабилити, часто минимизируют «дизайнерскую» часть веб-дизайна.Да, вы можете создать очень стилизованный и удобный веб-сайт, но где футуристическое и творческое мышление внутри вертикального прямоугольника? Будущее — горизонтальный прямоугольник. Не будем забывать, что в Интернете было время, когда JPEG не приветствовался в веб-дизайне, потому что это приводило к замедлению загрузки. Передовые технологии, создание дизайнеров и адаптация пользователей Однажды то же самое произойдет с горизонтальными веб-сайтами.

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

    1. Фотография Алекса Флюераса

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

    2. Бартл Богл Хегарти

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

    3. Морковный творческий

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

    4. Чарли Джентл

    Если вам нравится боке, вам понравится, как этот сайт делает его многомерным. Сайт простой, но красивый.

    5. Кэндис Холлоуэй

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

    6. C’N’C Costume National

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

    7. Дин Окли

    Какой список был бы полным без этой записи? Dean Oakley — это практически синоним горизонтальной прокрутки.

    8.Дастин Кертис

    Немного болезненный, но тем не менее убедительный горизонтальный веб-сайт Дастина Кертиса, вероятно, раскрывает немного больше, чем вы когда-либо хотели знать о нем.

    9. Выход 10 Реклама

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

    10. Эльфлеттериг

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

    11. Фотография Эоло Перфидо

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

    12. Эрик Йоханссон

    И что-то совершенно другое, вот симпатичный веб-сайт Эрика Йоханссона с собственной полосой прокрутки внизу страницы.Мне нравится использование бликов.

    13. Faub

    Faub — это другой тип веб-сайта, похожий на Exit 10 из No. 9 место. Что выделяет Faub, так это необычная навигация. Вероятно, наименее используемый веб-сайт в этом списке, но также и наиболее необычный: пользователи должны перетаскивать страницу, чтобы просмотреть содержимое… какой там небольшой контент.

    14. Фрэнк Джакоббе

    Прокручивается не только весь веб-сайт, но и строка меню. Он имеет огромное количество белого пространства и эффективную навигацию.

    15. Конференция по Front End Design

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

    16. Фотография Паоло Боккарди

    Искусство на сайте Паоло Боккарди пронумеровано, что упрощает навигацию. В навигации также можно просмотреть каждую фотографию перед нажатием.

    17. Графическая терапия

    Нет полосы прокрутки, но есть приглашение перетащить экран влево или вправо.Кто может устоять перед плавным перетаскиванием, которое Graphic Therapy предлагает своим пользователям?

    18. Гэвин Каслтон

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

    19. Отель «Оксфорд»

    В этом отеле есть сайт с плавной прокруткой.Никакая тряска не прекращается и не начинается. Элегантный и чистый.

    20. Интерактивная работа ручной работы / Джейсон Лав

    Этот дизайн дает вам возможность идти влево или вправо с самого начала. Куда вы пойдете в первую очередь? Для новичков в горизонтальной сфере дизайнер Джейсон Лав дает понять, как пользоваться сайтом, с его умно нарисованной от руки стрелкой.

    21. Хасримы

    Удивительно насыщенный контентом, Хасрими предлагает много возможностей для жанра, который обычно имеет скудный контент.

    22. Les Hautes-Mynes Du Thillot

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

    23. Здесь Дизайн

    Here Design отличается более медленной, но очень плавной прокруткой между изображениями. Вы можете не только перемещаться со стрелками, но и выбирать числа.

    24. Контрабанда

    Contraband — фоторепортаж с потрясающими изображениями и умным всплывающим информационным окном.Пользователь может прокручивать в своем собственном темпе или выбирать автоматическую прокрутку.

    25. Ладио

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

    26. Ломотек Полимерс

    Lomotek имеет стабильную навигацию, которая иногда мешает контенту, однако всегда полезно иметь доступное меню навигации.

    27.ЛюбовьBento

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

    28. Lucuma

    Цвета на Lucuma великолепны. Навигация вне этого мира. Вы обнаружите, что прокручиваете назад и вперед, чтобы снова увидеть переходы.

    29. Люк Ларсен

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

    30. Студия Сорока

    Буква дня — «М.» Кто знал, что в мире существует столько разных типов госпожи? Помимо Ms, обязательно просмотрите выбранные проекты, чтобы узнать о каком-либо действительном действии прокрутки.

    31. Сделай вид

    Этот сайт для всех, кто не понимает намеков. Ни при каких обстоятельствах пользователи, которые посещают Make Pretend, знают, что прокручивают вправо.К сожалению, отсутствие видимой полосы прокрутки может озадачить некоторых людей.

    32. Джеймс Стоун / Mime Artist

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

    33. Питер Пирсон

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

    34. Ричард Арран Пейзажная фотография

    Этот сайт хорошо передает ощущение художественной галереи. Изображения легко кликабельны для крупного плана.

    35. Рики Кокс

    Ricky Cox имеет несколько раздвижных окон на одном вертикальном веб-сайте. Это редко встречающаяся комбинация, и здесь она работает благодаря плавной ручной прокрутке и продуманному дизайну.

    36. SectionSeven Inc.

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

    37. Тайлер Финк | Sursly

    Переход из Дома совершенно потрясающий. Стоит проверить это, чтобы увидеть невероятный переход.

    38. Стефан Тартелин

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

    39. Tinkainteractive

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

    40. Тщеславие Клэр

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

    .

    No related posts.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *