Сайти з горизонтальною прокруткою Частина 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 вертикальні слайди + горизонтальна прокрутка. А також запиляти це все у фреймворк, чудно буде))
Сподіваюсь дана стаття була вам корисна, дякую за увагу.


Поділитись в соцмережах

Сподобався пост? — розкажіть про нього своїм друзям