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


Содержание

Практическое руководство: реализуем горизонтальную прокрутку секции на Flexbox

В этой статье мы рассмотрим решение повседневной задачи: как создать горизонтально прокручиваемую секцию сайта? Если вкратце, ответ — Flexbox.

Давайте разберёмся с этим более детально.

Каркас

Взгляните на эту разметку. Это простой блок section с несколькими вложенными div :

Стили

Плохой дизайн никто не любит, поэтому давайте сделаем страничку более опрятной:

Сперва мы явно задаём ширину и высоту корневых элементов равной 100% . Затем мы определяем цвет фона, убираем отступ у body и центрируем вложенный в него элемент.

Для наглядности применим стили к этому элементу :

С первым свойством всё понятно, второе указывает секции всё время занимать 100% ширины родительского элемента, а третье гарантирует, что высота секции всегда будет не менее 200px . Вот, что получилось на данном этапе:

Поместим все блоки card—content в секцию card и снова займёмся стилями. Сперва сделаем card flex-контейнером:

Затем займёмся .card—content :

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

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

Исправим это так:

И теперь прокручивается только секция:

Прячем полосу прокрутки

Красоты ради можно спрятать полосу прокрутки. Для webkit-браузеров (Chrome и Safari) есть очень простой способ:

Согласитесь, так страничка выглядит лучше.

Способы применения

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

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

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

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

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

25 примеров дизайна сайтов веб-студий для вашего вдохновения

PSD-макет художественной рамки

Dotted Paper: скачиваемая «бумага» для разработки прототипов

Дизайн сайтов электронных магазинов в качестве примеров: более 30 профессио .

22 впечатляющих веб-сайта полноэкранной развёртки в качестве любопытных при .


Amazium: CSS-каркас для сайтов гибкой конфигурации

Современные тенденции в веб-дизайне 2011-2012

20 примеров потрясающих веб-сайтов со скользящей горизонтальной и вертикаль .

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

30 отличных примеров меню горизонтальной и вертикальной развёртки

  • 26.10 | 18:00 —

Топ UX тренды для банкинга в 2020 году

Армированный скотч — назначение и характеристики

2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

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

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

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

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

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

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

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

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

http://www.thehorizontalway.com/
http://deanoakley.com/
http://www.hasrimy.com/
http://www.lovebento.com.au/
http://www.peter-pearson.com/

А теперь приступим к непосредственному описанию как ее осуществить.

Вариант 1. Тема сайта с горизонтальной прокруткой.

Если вы используете поддомены, то данный вариант вам подойдет.

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

Скачать тему horizontal-way можно по следующей ссылке (к сожалению не нашел другого варианта):
www.wpfree.ru/download-manager.php? > В данной теме стоят 4 ссылки на сайт www.wpfree.ru (это легко увидеть если воспользоваться плагином для wordpress с названием TAC), причем одна из них закодирована – это тоже можно исправить.

Как ее установить?

После закачки у вас появиться файл архива horizontal-way.zip.


Далее вам нужно зайти в панель управления сайта на wordpress, выбрать в левом меню пункт “Внешний вид” и в нем подпункт “Темы оформления”, после выбрать закладку “Установка тем оформления” и подзакладку “Загрузить файл”, нажав на кнопку “Обзор” выбрать скаченный файл horizontal-way.zip, установить и активизировать тему.

Данная тема будет выглядеть следующим образом:

Однако после доработки можно создать достаточно красивый сайт, например сайт http://www.thehorizontalway.com/ – сконструирован как раз на основе данной темы.

Вариант 2. Можно добавить горизонтальную прокрутку для сайта с помощью javascript.

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

Признайтесь это не удобно.

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

После того как вы скачали javascript, вам необходимо его подключить, вставив между тэгами head следующий код:

нарисовать все, например в графическом редакторе Photoshop (читайте следующую статью: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-wickedly-cool-horizontally-oriented-website-design/ )
– создать широкую таблицу, с большим количеством столбцов.
– разбить контент на множество колонок (здесь тоже можно использовать javascript)

Далее подключаем javascript в теге head:

Далее создаем табличку.
Я создал таблицу с 2 строчками и 10 колонками.

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

Колонки будут использовать по следующему принципу колонка с 300px это основные блоки, а колонки с 50px – это промежутки между информационными блоками.

Теперь осталось наполнить колонки с информационными блоками (причем производить их наполнение легче в Adobe Dreamweaver) и сохранить html файл.

Цукерберг рекомендует:  Прогноз погоды на PHP

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

Горизонтальная прокрутка на чистом CSS

Дата публикации: 2020-12-15

От автора: статья нашего гостя, Питера Бизменса. Питер – front-end разработчик на сайте Audience, где он любит писать стили на SCSS. Сегодня он нам покажет то, что я называю честным CSS трюком. Весь веб имеет вертикальное строение. Вы читаете сайт, как обычную книгу: слева направо, сверху вниз. Но иногда хочется уйти от вертикальности и сделать что-то сумасшедшее: сделать горизонтальный список. Или еще безумнее, горизонтальный сайт!

Было бы неплохо, если бы мы могли делать вот так:

К сожалению, такого не будет. Такого даже в планах нет в CSS.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Это очень плохо, потому что в компании, в которой я работаю, это бы очень пригодилось. Мы делаем очень много презентаций, а презентация – это довольно горизонтальная штука. Обычно соотношение сторон у слайдов составляет 4:3 или 16:9. Из-за этого у нас возникает постоянная проблема с горизонтальными слайдами и вертикальными веб-технологиями. Под «мы» я имею в виду себя. Но что я люблю, так это трудности.

Другой вариант использования

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

Способ без JavaScript

Все мы знаем, что на JS существует масса способ сделать горизонтальную прокрутку. Некоторые примеры есть на CSS-Tricks. Мне стало интересно, можно ли воплотить эту идею на чистом CSS. Решение оказалось очень простым:

создаем контейнер с элементами;

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


поворачиваем элементы внутри контейнера обратно на свое место.

Шаг 1) создаем контейнер

Создайте блок div с множеством дочерних элементов.

В нашем примере прокручиваемый контейнер будет 300px шириной, в нем будет 8 элементов 100х100px. Размеры произвольные, можно задать любые.

Высота контейнера станет шириной и наоборот. Ниже «ширина» контейнера будет составлять 300px:

И дочерние элементы:

Шаг 2) поворачиваем контейнер

Теперь нужно повернуть контейнер на -90 градусов при помощи CSS свойства transform. Мы получили горизонтальный скроллер.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Шаг 3) возвращаем дочерние элементы обратно на свое место

Так как же вернуть элементы на свое место? Поверните его обратно при помощи CSS свойства transform.

Шаг 4) фиксированное позиционирование

Смотрится все неплохо, но есть пара проблем.

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

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

Еще одно демо с прямоугольными дочерними элементами:

Совместимость

Я проверил совместимость на доступных мне устройствах.

Десктоп

Так как стилизация скроллбаров пока что работает только в Webkit/Blink браузерах, в Firefox и IE показывается обычный серый скроллбар. Это можно поправить с помощью JS и прятать их вообще, но это тема для другого урока.

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

Мобильные устройства

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

С iOS же наоборот, все не так гладко. Браузер ведет себя так, будто контейнер не поворачивали вовсе. Поэтому для прокрутки нужно использовать свайпы вверх и вниз, что довольно странно. Overflow: hidden не решает проблему.

Заключение

По данным сайта Can I Use трансформации в CSS сейчас поддерживаются у 93%+ пользователей (на момент написания статьи, ноябрь 2020). Тут проблемы возникнуть не должно.

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

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


Автор: Pieter Biesemans

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Горизонтальная прокрутка фото

14.05.2020, 00:40

Горизонтальная прокрутка
Добрый день. У меня следующая проблема. Есть разметка

Горизонтальная прокрутка
Можно ли поставить overаflow только для горизонтальной прокрутки?

Горизонтальная прокрутка
Как создать эффект который есть на сайте google. При уменьшении размера окна браузера, по.

Горизонтальная прокрутка мышью
Делал горизонтальную прокрутку основываясь на этой статье.

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

Блог о дизайне и веб-мастеринге
Полезные ресурсы для разработчиков и дизайнеров
Статьи о движке WordPress и сервисе Twitter

Лучшие статьи категории «Веб-сайты»

Подписка

  • Статьи (500+)
  • Twitter (2350+)
  • Google Plus (150+)
  • E-mail подписка
  • Реклама
  • О блоге и команде

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

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

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

Страницы с длинной прокруткой

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

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

ЗАПОМИНАЮЩИЙСЯ ВИЗУАЛЬНЫЙ РЯД


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

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

Цукерберг рекомендует:  7 правил быстрой верстки

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

УВЕЛИЧЕНИЕ КОНВЕРСИИ

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

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

  • количество просмотров
  • время, проведенное на сайте
  • частота посещений сайта
  • взаимодействие пользователя с элементами на дисплее
  • количество отказов
  • уровень конверсии

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

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

РАЗМЕТКА СТРАНИЦЫ С ДЛИННЫМ СКРОЛЛИНГОМ

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

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

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

БУДУЩЕЕ ЗА ДЛИННЫМ СКРОЛЛИНГОМ?

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

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

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

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

Специалисты Nielsen Norman Group (NNG), изучая проблему веб-юзабилити, отметили любопытный феномен, наблюдающийся в течение нескольких последних лет: горизонтальная прокрутка остается проблемой для пользователей настольных компьютеров. Даже с широким внедрением мобильных устройств, где жесты используются для просмотра веб-контента методом скольжения пальца (свайпинг, от англ. swipe), пользователи десктопов в большинстве не приемлют горизонтальную прокрутку web-страниц.

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

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

Доминирующим стандартом для перемещения по длинным лендингам или «портянкам» у пользователей настольных компьютеров является традиционный скроллинг (прокрутка по вертикали).

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

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

Совместимость (адаптивность) страницы с различными типа устройств

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

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

Однако владельцы ПК, не привыкшие к горизонтальной прокрутке, зачастую не имеют понятия, что какую-то часть содержимого страницы они могут обнаружить с помощью свайпинга на большом мониторе. Поскольку люди взаимодействуют с мобильными и настольными устройствами абсолютно по-разному — отметим, что поведенческие паттерны для обоих случаев «прошиваются» буквально на уровне рефлексов пользователей! — то универсальный подход типа «один размер подходит всем» (one-size-fits-all) может привести к неприятным последствиям.


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

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

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

Просмотр несущественного содержимого

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

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

Сохранение вертикального пространства экрана

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

Hulu.com: дизайн сайта предусматривает как вертикальный, так и горизонтальный скроллинг

Демонстрация характерного дизайна

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

Цукерберг рекомендует:  10 TED-выступлений, которые должен посмотреть каждый

Если же ваш бизнес относится к какой-либо широко распространенной категории (то, что называется английским термином «mainstream»), то применение свайпинга для вас может стать роковой ошибкой.

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

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

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

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

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

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

Здесь мы имеем дело с частным случаем «закона вождения» (steering law), гласящего, что время, необходимое пользователю для перемещения указывающего устройства (слайдера, в нашем случае) через условный тоннель, зависит от длины и ширины тоннеля: чем он уже и длиннее, тем больше времени это займет у пользователя.

Из чего следует вывод: использование горизонтальной полосы прокрутки имеет так называемую «высокую стоимость взаимодействия» (high interaction cost), что отталкивает пользователей от завершения действия. Как заявил один из участников экспериментов по применению горизонтального скроллинга: «Мне кажется, что на прокрутку у меня ушла целая вечность!».

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

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

Тепловая карта сеанса айтрекинга на Apple.com: пользователи не обращают внимания на стрелки прокрутки, а значит, не видят дополнительного контента

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

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

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

USAToday.com: пользователи не пользуются стрелками горизонтального скроллинга, потому что не знают, что откроется при нажатии

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

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


1. Не позволяйте «свайпить» первичную навигацию

Если вы не хотите совсем убрать горизонтальную прокрутку html, то, по крайней мере, не заставляйте посетителей непременно «свайпить» ваш контент: некоторые захотят, но многие — нет. Разрешите альтернативные способы навигации: позвольте пользователям перемещаться и с помощью меню. Меню сообщит, что есть на сайте и поможет найти необходимую информацию. Посетители полагаются на первичную навигацию, чтобы углубиться в веб-ресурс или перемещаться по категориям. Без глобальной навигации им сложнее искать дополнительный контент.

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

2. Не заставляйте пользователей гадать, сколько еще контента осталось

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

Amazon.com: нумерация страниц наглядно показывает, сколько еще вариантов офферов осталось посмотреть

3. Создайте очевидные, всегда видимые сигналы для свайпинга

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

Netflix.com: в обычном состоянии нет визуальных подсказок, указывающих, что доступно больше контента (вверху). Стрелки для горизонтального скроллинга появляются только при наведении курсора мыши (внизу).

Вывод

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

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

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

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

С помощью стандартной прокрутки и пары улучшений.

Для начала сверстаем горизонтальное меню:

Теперь поместим меню в блок с ограниченной шириной и горизонтальной прокруткой:

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

Добавим немного косметики в виде «забеления» по краям с помощью маски:

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

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

Как создать div блок с прокруткой?

В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow.

О полезном свойстве overflow

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

overflow-x — отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y — отвечает за отображением содержания блочного элемента по вертикали.

Код CSS

Свойства и значения overflow

visible — отображается все содержание элемента, даже за пределами установленной ширины.
hidden — отображается только область внутри элемента, остальное скрыто.
scroll — принудительно добавляется горизонтальная (y) или горизонтальная (x) полоса прокрутки.
auto — автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.

Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности

Код CSS

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

Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.

Код HTML и CSS

Пример div блока с прокруткой

Код HTML и CSS

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

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

Спасибо за внимание! Надеюсь статья была полезна!

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих