» »

Горизонтальная прокрутка Scroll Snap Points

Горизонтальная прокрутка Scroll Snap Points

В статье познакомимся в функцией CSS Scroll Snap, которая позволяет веб мастеру создавать контролируемую прокрутку, где будет представлены изображение. Также она будет идти в горизонтальном положение, где кликом можно перевести картинки, как на слайдере. Это отличное решение под разные материалы, где нужно представить несколько изображений, что при помощи этой функций можно сделать более компактнее и безусловно смотреться будет сильнее, в отличение от других форматах.

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

Принцип работы, где после установки будет в такой форме выглядеть, что можно в самом материале прописать.

Динамическая прокрутка Scroll Snap Points

Приступаем к установке:

HTML

Код
<div class="ketentlacros">
  <img src="http://zornet.ru/ABVUN/sarunolas/Sarukipan/itl.jpg">
  <img src="http://zornet.ru/ABVUN/sarunolas/Sarukipan/Esan.jpg">
  <img src="http://zornet.ru/ABVUN/sarunolas/Sarukipan/zaml5.jpg">
  <img src="http://zornet.ru/ABVUN/sarunolas/Sarukipan/q0W.jpg">
</div>

CSS

Код
.ketentlacros {
  width: 475px;
  margin: 0 auto;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  font-size: 0;
}

Представлена demo страница, где подключена горизонтальная прокрутка.

С подключением класса mandatoryScrollSnapping, что оставил на демонстраций, выводит совершенно другие изображение.

Демонстрация
05.10.2018 Просмотров: 146 Комментарий: (2)

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

Материал разместил

Комментарий: 2
avatar
ZarecL 06.10.2018 19:131
0
Почему только только для Интернет-магазина подойдет, и на другие тематические сайты можно поставить/
Kosten
Kosten 06.10.2018 19:242
0
Так и не подчеркивал. что материал идет чисто под одну тематику, так как его можно увидеть и на магазине. что и на простом софте, где как пример идет блок, и как и сем он прокачан.
avatar