Как создать динамическое портфолио с помощью CSS Scrolling Snap Points

Как создать динамическое портфолио с помощью CSS Scrolling Snap Points

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

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

Концепция

Скажем, у нас есть серия изображений, расположенный вертикально внутри контейнера. Контейнер это тег figure, который оборачивается в div:

<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:

#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, а в точках прилипания есть маленький эффект подпрыгивания.

Источник: http://thenextweb.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree