Сайт

Горизонтальный сайт: Крутые сайты с горизонтальной прокруткой

15.01.2018

Содержание

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

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

 

 


toto.co.jp


mortierbrigade.com 


london-skyline.com


yearinreview.hshtags.com


patrickleuchter.com


browndesigninc.com


getelliot.com


adveris.fr


wildnatureinkazan.ru


informissionweekly.com


bulldogstudio.es


christianlahoude.com


andersdrage.com 


qandhlondon.com


allaboutdavid.fr


arizziwine.it 


archi-graphi.fr


purplecherry.com


digisfera.pt


guillaumejuvenet.com 

Автор подборки — Дежурка

Смотрите также:

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

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

Screen Shot 2015-04-14 at 14.08.38


Строгий и минималистичный сайт-портфолио дизайнера из Италии, область компетенций которого простирается от работы с jQuery и брендирования до проектирования взаимодействия и рекламы. В 2014 году площадка удостоилась звания «Сайта дня» по версии CSS Winner и Awwwards. Прокрутка возможна посредством управления с клавиатуры.

Screen Shot 2015-04-14 at 14.08.47
Самые популярные хэштеги 2014 года — от #ICantBreathe до #Sochi2014 — собраны здесь и иллюстрированы различными художниками. Сайт является производным Hshtags.com. Скроллинг осуществляется с помощью перетаскивания специального ползунка.

Screen Shot 2015-04-14 at 14.08.55
Московская консалтинговая компания, действующая на территории СНГ в области охраны здоровья и труда. Основное тело сайта выполнено в технике аккордеона: каждый раздел, соответствующий одной из четырёх основных услуг организации, реагирует на движение курсора.

Screen Shot 2015-04-14 at 14.09.07
Ресурс для интересующихся самостоятельными путешествиями по Австралии. Интерактивная карта, функционирующая здесь, позволяет наметить оптимальный маршрут движения, заблаговременно подыскать места для ночлега, питания и восхищения достопримечательностями континента. «Сайт дня» в сентябре прошлого года на Awwwards.ru.

Screen Shot 2015-04-14 at 14.09.08
Весьма живописный сайт небольшой московской компании, занимающейся интернет-маркетингом. Переход между разделами организован посредством стрелок по бокам страницы, уточняющая информация доступна при этом уже по вертикальной оси.

Screen Shot 2015-04-14 at 14.09.30


Сайт-портфолио фотографа, режиссёра, сооснователя и креативного директора Studio White Сирила Массона. На площадке представлено множество прекрасных снимков знаменитостей, а также фотографий, сделанных для Nike, Perrier, ID Parfums и других именитых организаций.

Screen Shot 2015-04-14 at 14.09.37
В это непросто поверить, но за крайне экстравагантным дизайном в данном случае скрывается производитель замороженных овощей из Хорватии. И горизонтальная прокрутка здесь — лишь капля в океане креативности: тут вам и анимация, и неформальные фотографии сотрудников в качестве фона, наглядные примеры «до» и «после», и многое другое.

Screen Shot 2015-04-14 at 14.09.48
Ещё один сайт-визитка — на этот раз от 21-летнего французского программиста Гийома Жевуне. Для навигации по площадке юноша предлагает пользователю взять под управление маленького робота, который, передвигаясь по горизонтальной плоскости, знакомит нас с личностью и деловыми качествами его создателя. Выглядит необычно, забавно и непринуждённо.

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


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

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

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

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


(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

25 фантастических сайтов с горизонтальной прокруткой

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

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

Oh My Gift

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Year in Hashtags

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Q&H London

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

LORENZO BOCCHI

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Louis Ansa

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Exelum

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Roadtrips – South Australia

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Moving Islands

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Daydream Designs

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Mahuna & Mahuna

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Travel Alberta Trip Planner

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Costume National Scents

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Lois Jeans Autumn-Winter 2013

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Cyril Masson Portfolio v2

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

House on the Krasina

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Quatro Folhas

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Ichance

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Guillaume JUVENET

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Heart of Arctic

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

WWF

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

We Make Games

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Akita

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

25 Years of the Internet

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

ATL

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

Zack Batsaikhan

25 Фантастические горизонтальной прокрутки сайтов, которые вы полюбите

 

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

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

 with google 

___________________________________________________________

mariana onate

___________________________________________________________

food story

 dassel und wagner

square space

 lacoste 

nerval 

designem braced

gudang home

hot dot

lois jeans

julie lavergne

czk.fr

 wood work 

 verdi.com.br 

 ichance.ru

Автор подборки — Дежурка

 

лучшие практики — 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/

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

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

janko at warp speed

 

______________________________

theme trust

______________________________

kinhr

______________________________

designed to move

______________________________

engage interactive

______________________________

metro twit

______________________________

fhoke

______________________________

weare hanno

______________________________

eighty 3creative

______________________________

loren zoverzini

______________________________

milk and pixels

______________________________

by association only

______________________________

square space

______________________________

play groundinc

______________________________

seed spot

______________________________

cileos

______________________________

yourkarma

______________________________

manos crafted

______________________________

always creative

______________________________

weare grand

______________________________

use hook

______________________________

work by mark

______________________________

bright byte

______________________________

kiawah island

______________________________

hum creative

______________________________

theory design

______________________________

substrakt

______________________________

 

Автор — Chris Spooner

Перевод: Дежурка.

 

 

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

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

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

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

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

Gelateria-Amande-I-Gelateri Horizontal scrolling website examples to use as inspiration Gelateria-Amande-I-Gelateri Horizontal scrolling website examples to use as inspiration

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

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

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

Получи 300+ бесплатных в вашем почтовом ящике!

Подпишитесь на нашу рассылку и получите 300+ дизайнерских ресурсов в течение первых 5 минут в качестве подписчика.

Спасибо!

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

Conti-Ducco Horizontal scrolling website examples to use as inspiration Conti-Ducco Horizontal scrolling website examples to use as inspiration

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

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

Вы уверены, что хотите использовать горизонтальную прокрутку?

Grand-Image Horizontal scrolling website examples to use as inspiration Grand-Image Horizontal scrolling website examples to use as inspiration

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

FireShot-Capture-2334-Glo Horizontal scrolling website examples to use as inspiration FireShot-Capture-2334-Glo Horizontal scrolling website examples to use as inspiration

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

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

Studio-Björk Horizontal scrolling website examples to use as inspiration Studio-Björk Horizontal scrolling website examples to use as inspiration

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

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

Screenshot002 Horizontal scrolling website examples to use as inspiration Screenshot002 Horizontal scrolling website examples to use as inspiration

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

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

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

Benoît-Nihant-Chocolatier Horizontal scrolling website examples to use as inspiration Benoît-Nihant-Chocolatier Horizontal scrolling website examples to use as inspiration

Реклама

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

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

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

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

Screenshot-3-1 Horizontal scrolling website examples to use as inspiration Screenshot-3-1 Horizontal scrolling website examples to use as inspiration

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

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

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

Проблема управления с боковой прокруткой

When-To-Travel-Weather Horizontal scrolling website examples to use as inspiration When-To-Travel-Weather Horizontal scrolling website examples to use as inspiration

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

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

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

Norebro Horizontal scrolling website examples to use as inspiration Norebro Horizontal scrolling website examples to use as inspiration

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

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

Советы и хитрости для хорошей горизонтальной прокрутки Дизайн сайта

Squares_ Horizontal scrolling website examples to use as inspiration Squares_ Horizontal scrolling website examples to use as inspiration

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

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

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

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

Archetype-Wine Horizontal scrolling website examples to use as inspiration Archetype-Wine Horizontal scrolling website examples to use as inspiration

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

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

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

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

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

Базовая навигация

How-much-does-a-designer-co Horizontal scrolling website examples to use as inspiration How-much-does-a-designer-co Horizontal scrolling website examples to use as inspiration

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

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

использовать этикетки

Charles-and-Ray-Eames Horizontal scrolling website examples to use as inspiration Charles-and-Ray-Eames Horizontal scrolling website examples to use as inspiration

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

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

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

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

Installer-of-alarm-systems- Horizontal scrolling website examples to use as inspiration Installer-of-alarm-systems- Horizontal scrolling website examples to use as inspiration

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

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

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

Кодирование

Vœux-2018 Horizontal scrolling website examples to use as inspiration Vœux-2018 Horizontal scrolling website examples to use as inspiration

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

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

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

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

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

Неограниченное количество загрузок : более 1 000 000 шрифтов, шаблоны InDesign, действия в Photoshop, макеты и ресурсы для дизайна с помощью logo
,

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

Если бы веб-страницы были сделаны из дерева, то зерно было бы вверх и вниз. Вертикальный это естественный поток веб-макета. Когда элементы страницы достигают правого края окна браузера и переходят, поток по умолчанию «оборачивает» этот элемент на следующую строку. Чем больше контента на странице, тем выше она становится, а не шире. Почему это? Потому что это имеет смысл. Наши глаза привыкли читать довольно короткие строки текста, поэтому, если бы мы увидели абзац текста одной длинной прямой строкой, было бы больно читать.Для удобства чтения абзацы должны иметь разрывы строк (отсюда и термин «блоки» текста). Мы уверены, что не хотим сами жестко кодировать разрывы строк в разметке. Очевидно, нам не нужно, браузер делает это для нас. Таким образом, вертикальное расширение.

Этот естественный поток привел к соглашениям в макете веб-страницы и даже в самом оборудовании. Обратите внимание, сколько компьютерных мышей (мышей?) Имеют специальный скроллер исключительно для вертикальной прокрутки. Но веб-страницы оснащены вертикальной и горизонтальной полосами прокрутки, верно? Если мы несем ответственность за наш веб-макет, мы можем идти «вразрез» и создавать веб-страницы, которые используют в основном горизонтальную прокрутку и даже могут расширяться по горизонтали, когда мы добавляем больше контента.Возможно, легкий удар по «юзабилити», но это может быть крутой творческий штрих!

Лучший способ сделать это

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

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

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

  • Установите очень широкую статическую ширину. Возможно, «быстрый и грязный» способ начать горизонтальную компоновку — это просто установить действительно большую статическую ширину на самом элементе тела. Скажем, 10000px. Попробуйте и вы, вы обязательно получите горизонтальную полосу прокрутки. Хотя это работает, это немного негибко. Веб
.

Горизонтальный путь — SXSW Winner

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

На страницах «Печать и иллюстрации», «Анимация» и «Альбом для рисования» на веб-сайте Tartelin раздел div , содержащий заголовок и меню, размещен с левой стороны горизонтальной прокруткой div с переполнением : авто . (Таким образом, первый раздел, похоже, использует позицию : фиксированное свойство )

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

Soulwax / 2manydjs

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

Japi Honoo

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

Les Hautes-Mynes

Веб-сайт Les Hautes-Mynes du Thillot является хорошим примером того, как туристическая брошюра может передаваться в Интернете с использованием горизонтальной разметки.
Разделы шириной 460 пикселей размещаются рядом друг с другом с помощью CSS float ing и содержат слева пять ссылок для прокрутки страниц в javascript; те же ссылки отвечают в меню сверху, автоматически размещаемом в центре области просмотра.

Evanescence

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

Стефан Букко

Мощность изображений: в портфолио Стефана Букко структура html + css состоит только из одного div с абсолютной позицией, длинной (32702px) ширины и фиксированной (558px) высоты, куда вставляются все теги img , связанные к нескольким произведениям искусства, которые, как обычно, отображаются рядом.

Небольшое (по длине и размеру шрифта) описание включено внизу каждой картинки.

Tulipe (CZG)

Шестая запись из CZG, Tulipe, может помочь снова показать важное отличие от горизонтального до вертикального дизайна: иногда делит , которые находятся на одинаковом расстоянии от вершины области просмотра и содержат текст с тем же размером шрифта, но различное количество не может иметь одинаковую ширину. Это может вызвать проблемы с визуализацией: в этом случае столбец «Требования» настолько высок, что пользователи с разрешением ниже, чем обычное разрешение 1024 × 768 пикселей, вынуждены выполнять вертикальную прокрутку для просмотра всего содержимого раздела.

Koniec

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

Freeware / Делавэр

«Freeware / Delaware», цифровой дом японской группы «musics_designs» Delaware, имеет номера ((2001-> 2006), которые можно назвать одним из патриархов горизонтальной прокрутки.Особенно на своих страницах «vision», он отображает десять или более квадратов, размером 500 × 500 px, помещая рядом всех с простым заголовком (со схемой # ‘num’ / ‘title’ / ‘date’) на право.

Уруку

Флэш-сайт Provincia petrolifera de Urucu состоит из девяти разделов, которые можно прокручивать с помощью меню в правом нижнем углу фильма и с двумя стрелками, которые ведут к предыдущей и следующей. В каждом разделе текстовое содержимое отображается примерно в 360 × 250 пробелов (с вертикальной полосой прокрутки слева), под заголовком подраздела и справа от заголовка раздела, который имеет несколько ссылок для переключения на различные подразделы.

,

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

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

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

Weblogement van het Elfletterig genootschap horizontally scrolling websites

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

Horizontal scrolling humor by Handmade Interactive

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

Magpie Studio horizontally scrolling websites

У

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

Zand Studio horizontally scrolling websites

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

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

Archidirectors horizontally scrolling websites

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

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

posta

Build in Amsterdamn horizontally scrolling websites

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

Identity Print

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

STUDIO NEWWORK

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

See the horizontally scrolling website

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

Magic Realism scrolling website

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

the boxdoodle project scrolling website

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

zupadupa - web design & web development scrolling website

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

Hipstamatic - Camera scrolling website

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

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

Movement of Data

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

Vitamins Kids

See the horizontally scrolling website

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

Brooks

WWF scrolling website

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

See the horizontally scrolling website

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

25 Years of The Internet - Onyx scrolling website

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

Me You and the Zoo - Chester Zoo History scrolling website

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

Lucuma

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

hasrimy.com scrolling website

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

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

See the horizontally scrolling website

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

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

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

Smooth horizontal scrolling - YouTube

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

Vertical and Horizontal Scrolling with fullPage.js

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

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

How To Create a Horizontal Scrolling Menu

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

,

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

Ваш адрес email не будет опубликован.