От автора: привязка прокрутки является популярной функцией уже много лет. Она часто используется для создания каруселей и галерей изображений. Когда она реализовано плохо, это дает разочаровывающий опыт пользователя. Термин «хайджекинг прокрутки» часто используется для описания веб-сайтов, которые управляют работой прокрутки с помощью полосы прокрутки по умолчанию. Однако, если все сделано правильно, это может обеспечить хороший пользовательский опыт.
В прошлом разработчикам приходилось прибегать к сложному коду JavaScript для реализации такого рода поведения. Теперь, благодаря новой функции CSS Scroll Snap, мы можем реализовать это на чистом CSS. Это обеспечивает более производительный и плавный опыт для пользователя.
Могу ли я использовать это?
Посмотрим правде в глаза — при обсуждении новых функций языка CSS, этот вопрос всегда возникает. Scroll Snap полностью реализована в Chrome, Firefox и Safari. Более старая версия спецификации реализована в (не-chromium) Edge и IE 11. Она также поддерживается IOS и мобильным Chrome на Android. Таким образом, поддержка есть, мы, как разработчики, должны начать это использовать.
Почему мы должны делать слайд-шоу на основе веб?
Как веб-разработчики, мы хороши в создании великолепно выглядящих сайтов. У нас нет проблем с позиционированием контента с помощью flexbox и CSS Grid. Так зачем иметь дело с Powerpoint или Keynote, если мы можем сделать это сами, используя HTML и CSS?
Начало
Давайте начнем с создания HTML-разметки, которая понадобится для слайд-шоу. Это довольно просто.
|
1 2 3 4 5 6 7 8 9 |
<html> <body> <div class="slide-container"> <div class="slide"><h1>First slide</h1></div> <div class="slide"><h1>Second slide</h1></div> <div class="slide"><h1>Third slide</h1></div> </div> </body> </html> |
Затем мы добавляем CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
body { padding: 0; margin: 0; font-family: sans-serif; } .slide-container { scroll-snap-type: x mandatory; overflow-x: scroll; display: flex; } .slide { scroll-snap-align: start; min-width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } |
Что здесь интересно, так это свойства scroll-snap-type и scroll-snap-align. Поскольку мы создаем слайд-шоу, мы хотим, чтобы прокрутка была горизонтальной. Вот почему мы используем x, в качестве значения для scroll-snap-type. Другие варианты — y, inline и block. Мы также можем настроить строгость привязки, изменив его значение на none или proximity. Другое изменение, которое мы вносим в slide-container, мы задаем для overflow-x значение scroll.
Для самих слайдов, мы хотим , чтобы они занимали 100% ширины и высоты окна просмотра, поэтому мы устанавливаем для min-width — 100vw, а для height — 100vh. Мы также установили для свойства scroll-snap-align — start. Это задает замыкание в начале элемента. Нам нужно установить это явно, так как значение по умолчанию — none, что означает, что привязка не произойдет.
Пробуем
Учитывая, что мы использовали только несколько строк HTML и CSS, это выглядит довольно здорово. И мы даже не использовали JavaScript.
Давайте просто немного его подчистим и сделаем так, чтобы оно выглядело немного лучше. Я начал с изменения HTML-кода для слайдов, чтобы они выглядели следующим образом.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="slide"> <div class="image-ctn"> <img src="image-path" /> </div> <div class="text-ctn"> <h1>Giant Panda</h1> <p> The giant panda, also known as panda bear or simply panda, is a bear native to south central China. It is easily recognized by the large, distinctive black patches around its eyes, over the ears, and across its round body. </p> </div> </div> |
Далее я внес следующие изменения в CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
img { max-width: 100%; } h1 { font-size: 3rem; }p { font-size: 1.2rem; }.text-ctn { width: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 1em; }.image-ctn { width: 50%; } |
Затем я добавил еще несколько слайдов с различными изображениями животных и информацией. И вуаля, конечный продукт.
Посмотрите пен ниже, чтобы увидеть полную реализацию.
Автор: Malcolm Laing
Источник: //medium.com
Редакция: Команда webformyself.
