Як створити динамічне портфоліо з допомогою CSS Scrolling Snap Points

12

Від автора: існує така проблема, як прокрутка сторінки. На сайтах з великим повноекранним дизайном сторінки виставлені вертикально в стопку і поділені по секціях. Кожна секція повинна займати весь екран браузера, але вкрай легко прокрутити сторінку на середину між двох секцій і тим самим викинути всю інтерактивність геть. Дана проблема також властива дрібним елементів UI. Ми хочемо, щоб при наближенні до секції відбувалася автоматична докрутка. Розглянемо питання створення динамічного портфоліо з допомогою CSS.

Зазвичай цю проблему вирішують за допомогою JavaScript (зазвичай з допомогою фреймворку типу JQuery), але тепер такий же функціонал з’явився і в CSS під назвою Scrolling Snap Points (робочий проект).

Концепція

Скажімо, у нас є серія зображень, розташований вертикально всередині контейнера. Контейнер це тег figure, який обертається у div:

Як створити динамічне портфоліо з допомогою CSS Scrolling Snap Points
Як створити динамічне портфоліо з допомогою CSS Scrolling Snap Points
Як створити динамічне портфоліо з допомогою CSS Scrolling Snap Points
Як створити динамічне портфоліо з допомогою CSS Scrolling Snap Points

Атрибут alt залишено порожнім для економії місця; в робочому коді даний атрибут повинен бути заповнений. Для збереження співвідношення сторін зовнішній DIV підігнаний за розміром під одне зображення з допомогою стандартної техніки позиціонування relative і absolute:

#scrollcontainer {
font-size: 0;
position: relative;
padding-top: 66%;
}
#scrollcontainer figure {
margin: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}

Висота тега figure підганяється під висоту контейнера, а зображення будуть однаково відображатися за межами блоку, так як за замовчуванням на веб-сторінках контент не ховається, навіть якщо він вилазить за межі контейнера. Щоб це змінити, ми повинні встановити властивість overflow для тега figure:

#scrollcontainer figure {
overflow: auto;
}

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

CSS Scrolling Snap Points

Спочатку ми повинні задати властивість scroll-snap-type для контейнера:

#scrollcontainer figure
scroll-snap-type: mandatory;
}

Значення mandatory це так зване «точне прилипання», коли під час прокручування або свайпа до контейнера прилипає найближчим із зображень. Є також значення proximity – приблизне прилипання, прилипання спрацює тільки в тому випадку, якщо ми будемо знаходитися близько до точки прилипання (на момент написання статті значення proximity поки що не підтримується у більшості браузерів).

Далі необхідно задати значення властивості scroll-snap-points. У нашому прикладі зображення зібрані в колонку, тому ми скористаємося властивістю scroll-snap-points-y з повторюваним значенням 100% — повторювана висота контейнера.

#scrollcontainer figure
scroll-snap-points-y: 100%;
}

Координати і напрямки

Нам також потрібно додати ще дві властивості: scroll-snap-coordinate і scroll-snap-destination. Перше застосовується до елементів, до яких ми хочемо «приклеїти» зображення під час прокручування. Друга властивість застосовується до найближчого дочірніми елементу. У нашому випадку код буде такою:

#scrollcontainer figure {
scroll-snap-destination: 50% 50%;
}
#scrollcontainer img {
scroll-snap-coordinate: 50% 50%;
}

По суті ці два значення направляють кожне зображення до певної точці всередині контейнера: центр кожного зображення прилипає точно до центру контейнера. Також є й інші способи: зробити прокручування горизонтальній, а не вертикальною (потрібно буде замінити scroll-snap-points-y на scroll-snap-points-x;), діагональна прокрутка або прокрутка зображень різного розміру. Про цих варіантах я розповім в наступній статті.

На жаль, на даний момент Safari по-іншому інтерпретує дані значення, тому потрібно додати вендорний префікс –webkit-:

#scrollcontainer figure {
-webkit-scroll-snap-destination: 100% 100%;
}
#scrollcontainer img {
-webkit-scroll-snap-coordinate: 50% 50%;
}

Підтримка, префікси і полифилы

В сучасних браузерах CSS Snap Points підтримується досить добре: повна підтримка Firefox, Safari є деякі обмеження (в десктопної версії і iOS). Однак до загального здивування Microsoft підтримує CSS Scroll Snap Points починаючи з IE10 з префіксом –ms. IE11 і Edge підтримують API на всіх екранах (в IE10 підтримуються тільки сенсорні екрани).

Для браузерів, які не підтримують API, я рекомендую scrollsnap-polyfill автора Clemens Krack, так як у даного полифила немає залежностей крім як polyfill.js. Для руху полифил використовує requestAnimationFrame, а в точках прилипання є маленький ефект підстрибування.