Горизонтальная прокрутка Scroll Snap Points
 | |
| В статье познакомимся в функцией CSS Scroll Snap, которая позволяет веб мастеру создавать контролируемую прокрутку, где будет представлены изображение. Также она будет идти в горизонтальном положение, где кликом можно перевести картинки, как на слайдере. Это отличное решение под разные материалы, где нужно представить несколько изображений, что при помощи этой функций можно сделать более компактнее и безусловно смотреться будет сильнее, в отличение от других форматах. Такой тип прокрутки становится популярный и безусловно естественный способ, где есть возможность прикрепить ее к контенту в сети интернет, а точнее на сайте или блоге. Также можно держать в ней много информации, где по умолчанию первый снимок будет открытый. Есть свои недостатки, они хоть небольшие, но все же нужно про них проговорить. А все в том, что в ней отсутствует точность, так как нужно самостоятельно прокручивать. Принцип работы, где после установки будет в такой форме выглядеть, что можно в самом материале прописать.  Приступаем к установке: 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, что оставил на демонстраций, выводит совершенно другие изображение. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
