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

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

Вперёд!

Продолжаем горизонтальное движение

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

  • Горизонтальный сайт фиксированной длины или бесконечный с аякс-подгрузкой контента. Есть скроллбар, но страница прокручивается колесиком мыши.
  • Листание сайта с помощью навигации, такой как стрелки: здесь два варианта, или прокрутка будет осуществляться на определенный промежуток, или целым "экраном" подобно мобильным устройствам. Например http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
  • Комбинированный метод: горизонтальная прокрутка страницы (поста) колесиком, межстраничная навигация — стрелки. Яркий пример: http://stephensaucier.com/portfolio/

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

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

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

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

Покрутив навигацию было решено для горизонтальной раскладки сделать навигацию вертикальной, тоесть боковой панелью, фактически получается перевернутая версия сайта с вертикальной прокруткой. Очевидно, если ориентация экрана ландшафтная, то навигация может "безболезненно" занять 200 пикселей по ширине, что выглядело бы неуместно при вертикальной ориентации экрана и вертикальной версии страницы. Это сделано чтобы можно было работать со страницей при открытой панели. Лишние движения для постоянного открывания — не та вещь, которую хочется делать раз за разом, при том что на поиск необходимого контента хочется затратить минимум времени. (открытие панели по ховеру рассматривался, но отпал в процессе работы). А что же тогда делать с портретной ориентацией экрана?

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

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

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

Теперь код и реализация

Базовая разметка — по сути имеем набор инлайнових блоков, находящихся в контейнере с white-space: nowrap; Также дефолтный отступ между этими блоками убрано (грязный хак с отрицательным марджином)

    
<body>
	<section class="main">         
		<div class="screen screen-first"></div>
		<div class="screen screen-second"></div>
		<div class="screen screen-third"></div>
		<div class="screen screen-fourth"></div>   
		<div class="screen screen-fifth"></div>
		<div class="screen screen-sixth"></div>
		<div class="screen screen-seventh"></div>  
		<div class="screen screen-eighth"></div>
	</section>
</body>        
	
Базовая разметка

Для размещения контента внутри "экрана" лучше всего использовать контейнер:

    
<div class="screen screen-first">
	<div class="container">                                    
		<!-- Here comes your content -->
	</div>
</div>        
	
Добавляем контейнер

И на этом разметка по существу и завершается. Смотрим стили:

    
body {   
	overflow-y: hidden; /*hide vertical and keep horizontal scrollbar*/
}                  
	.main{
		width: 100%;
		height: 100%;
		white-space: nowrap;
	}          
		.screen{   
			display: inline-block;
			width: 100%;
			height: 100%;
			margin-left:-4px; /*delete vertical spaces between "screens"*/
			vertical-align: middle;
			overflow: hidden;
			white-space: normal;
			line-height: 1.2;
		}      
			.screen-first {
				background: url("../img/1b3E67J.jpg") center center no-repeat;
				background-attachment: fixed;
				-webkit-background-size: cover;
						background-size: cover;
			} /*example of helper class, in this case for background settings*/        
	
Базовые стили

А также фрагмент стилей для носкриптовои и вертикальной раскладок:

    
.no-js body {
	overflow-y: auto; /*show vertical scrollbar*/
}  
	.no-js .main{
		white-space: normal;
	}
		.no-js .screen {
			display: block;
			width: 100%;
			height: auto;
			min-height: 720px;
			margin: 0 auto;
		}      
	
Стили носкрипт и для вертикальной раскладки

Медиазапит на ориентацию экрана:

    
@media (orientation:portrait){
	/* Here comes "no-script" fallback styles */
}      
	
Отслеживаем изменение ориентации экрана
Экран обновления браузера
Экран обновления устаревшего браузера

Как видите реализовать это все просто, яваскипт отслеживающий ориентацию и выключает инверт скролл, а также сам скрипт инверт вы можете найти на гитхабе.
Теперь по совместимости и поддержки браузерами.. На сегодня дело обстоит так — IE9+, Firefox, Chrome, Opera, Safari, Yandex.browser (Except IE9 bug with portrait orientation). Для старших браузеров показываем экран обновления браузера.
При желании можно сделать показ стандартной вертикальной раскладки и добавить полифил, что включит поддержку box-sizing: border-box
В планах модифицировать раскладку добавив адаптивность за счет относительных единиц измерения, добавить слайдовую навигацию и сравнить горизонтальные слайды + вертикальная прокрутка vs вертикальные слайды + горизонтальная прокрутка. А также запилить это все в фреймворк, забавно будет))
Надеюсь данная статья была вам полезна, спасибо за внимание.


Поделиться в соцсетях

Понравился пост? — расскажите о нём своим друзьям