Создание слайд-шоу с помощью CSS Scroll Snappin

Создание слайд-шоу с помощью CSS Scroll Snappin

От автора: привязка прокрутки является популярной функцией уже много лет. Она часто используется для создания каруселей и галерей изображений. Когда она реализовано плохо, это дает разочаровывающий опыт пользователя. Термин «хайджекинг прокрутки» часто используется для описания веб-сайтов, которые управляют работой прокрутки с помощью полосы прокрутки по умолчанию. Однако, если все сделано правильно, это может обеспечить хороший пользовательский опыт.

В прошлом разработчикам приходилось прибегать к сложному коду 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-разметки, которая понадобится для слайд-шоу. Это довольно просто.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Затем мы добавляем CSS.

Что здесь интересно, так это свойства 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, что означает, что привязка не произойдет.

Пробуем

Создание макета настенного альбома с помощью CSS Grid

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Учитывая, что мы использовали только несколько строк HTML и CSS, это выглядит довольно здорово. И мы даже не использовали JavaScript.

Давайте просто немного его подчистим и сделаем так, чтобы оно выглядело немного лучше. Я начал с изменения HTML-кода для слайдов, чтобы они выглядели следующим образом.

Далее я внес следующие изменения в CSS.

Затем я добавил еще несколько слайдов с различными изображениями животных и информацией. И вуаля, конечный продукт.

Создание макета настенного альбома с помощью CSS Grid

Посмотрите пен ниже, чтобы увидеть полную реализацию.

Автор: Malcolm Laing

Источник: https://medium.com

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Технология CSS Grid

Руководство по адаптивной верстке

Подробнее

Метки:

Похожие статьи:

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

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

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