От автора: существует такая проблема, как прокрутка страницы. На сайтах с большим полноэкранным дизайном страницы выставлены вертикально в стопку и поделены по секциям. Каждая секция должна занимать весь экран браузера, но крайне легко прокрутить страницу на середину меж двух секций и тем самым выбросить всю интерактивность напрочь. Данная проблема также свойственна более мелким элементам UI. Мы хотим, чтобы при приближении к секции происходила автоматическая докрутка. Рассмотрим вопрос создания динамического портфолио с помощью CSS.
Обычно эту проблему решают с помощью JavaScript (обычно с помощью фреймворка типа JQuery), но теперь такой же функционал появился и в CSS под названием Scrolling Snap Points (рабочий проект).
Концепция
Скажем, у нас есть серия изображений, расположенный вертикально внутри контейнера. Контейнер это тег figure, который оборачивается в div:
|
1 2 3 4 5 6 7 8 |
<div id="scrollcontainer"> <figure> <img src="floating-2x.jpg" alt> <img src="jellyfish-2x.jpg" alt> <img src="silk-2x.jpg" alt> <img src="the-deep-2x.jpg" alt> </figure> </div> |
Атрибут alt оставлен пустым для экономии места; в рабочем коде данный атрибут должен быть заполнен. Для сохранения соотношения сторон внешний DIV подогнан по размеру под одно изображение с помощью стандартной техники позиционирования relative и absolute:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#scrollcontainer { font-size: 0; position: relative; padding-top: 66%; } #scrollcontainer figure { margin: 0; position: absolute; top: 0; width: 100%; height: 100%; } |
Высота тега figure подгоняется под высоту контейнера, а изображения будут все равно отображаться за пределами блока, так как по умолчанию на веб-страницах контент не прячется, даже если он вылезает за предел контейнера. Чтобы это изменить мы должны установить свойство overflow для тега figure:
|
1 2 3 |
#scrollcontainer figure { overflow: auto; } |
Теперь мы можем прокручивать контейнер, но мы также можем и останавливаться в любой точке экрана, в том числе и между двух изображений; нам необходимо сделать так, чтобы по скроллу или свайпу создавалась привязка к ближайшему изображению.
CSS Scrolling Snap Points
Сначала мы должны задать свойство scroll-snap-type для контейнера:
|
1 2 3 |
#scrollcontainer figure scroll-snap-type: mandatory; } |
Значение mandatory это так называемое «точное прилипание», когда во время прокрутки или свайпа к контейнеру прилипает ближайшее из изображений. Есть также значение proximity – приблизительное прилипание, прилипание сработает только в том случае, если мы будем находиться достаточно близко к точке прилипания (на момент написания статьи значение proximity пока что не поддерживается в большинстве браузеров).
Далее необходимо задать значение свойства scroll-snap-points. В нашем примере изображения собраны в колонку, поэтому мы воспользуемся свойством scroll-snap-points-y с повторяющимся значением 100% — повторяющаяся высота контейнера.
|
1 2 3 |
#scrollcontainer figure scroll-snap-points-y: 100%; } |
Координаты и направления
Нам также нужно добавить еще два свойства: scroll-snap-coordinate и scroll-snap-destination. Первое применяется к элементам, к которым мы хотим «приклеить» изображения во время прокрутки. Второе свойство применяется к ближайшему дочерними элементу. В нашем случае код будет такой:
|
1 2 3 4 5 6 |
#scrollcontainer figure { scroll-snap-destination: 50% 50%; } #scrollcontainer img { scroll-snap-coordinate: 50% 50%; } |
По сути эти два значения направляют каждое изображение к определенной точке внутри контейнера: центр каждого изображения прилипает точно к центру контейнера. Также есть и другие способы: сделать прокрутку горизонтальной, а не вертикальной (нужно будет заменить scroll-snap-points-y на scroll-snap-points-x;), диагональная прокрутка или прокрутка изображений разного размера. Об этих вариантах я расскажу в следующей статье.
К сожалению, на данный момент Safari по-другому интерпретирует данные значения, поэтому требуется добавить вендорный префикс –webkit-:
|
1 2 3 4 5 6 |
#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, а в точках прилипания есть маленький эффект подпрыгивания.
Источник: //thenextweb.com/
Редакция: Команда webformyself.
