От автора: эффект прокручивающегося фонового изображения в CSS не нов. И сегодня же, посетив парочку сайтов, я наткнулся на эффект прокрутки фонового изображения, поэтому я решил, что стоит поделиться с вами как сделать фоновое изображение для сайта на CSS.
Ниже представлен эффект:
Заметьте, что этот способ отличается от слайд шоу или карусели на CSS, где контент поделен на слайды, которые можно остановить. На CodePen есть масса примеров слайдеров и каруселей. За основу в данной методике берется фоновое изображение для элемента, которое зациклено прокручивается по оси Х, создавая эффект бесконечной ленты.
Пишем разметку
Примерно так выглядит структура макета HTML:
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Один элемент занимает всю ширину области просмотра, а другой элемент идет поверх первого. Т.е. в HTML разметке всего два тега: один для фонового изображения, другой – контейнер для этого изображения.
|
1 2 3 |
<div class="wrapper"> <div class="sliding-background"></div> </div> |
Позиционирование элементов
Продолжим и добавим немного стилей для правильного отображения наших тегов.
|
1 2 3 4 5 6 7 8 |
.wrapper { overflow: hidden; } .sliding-background { height: 500px; width: 5076px; } |
По умолчанию .wrapper занимает 100% ширины браузера (блочный элемент), к нему добавляется свойство overflow, которое прячет все, что выходит за границы блока. Представьте инструмент обрезки фотографий, принцип работы такой же. За границами блока может быть все что угодно, но мы этого не увидим.
А теперь возьмемся за наш блок .sliding-background. Для блока устанавливается невообразимая ширина, которая будет больше существующих размеров экрана. В этом и вся фишка: я выбрал произвольную ширину в 5076px.
Создание фонового изображения
Если нам необходимо скроллить изображение, то надо его создать, так ведь? Это наша следующая задача. Помните, чуть выше я упомянул о произвольной ширине блока в 5076px для фонового изображения? Ширина на самом деле произвольная, но не полностью, данное значение отлично делится на 3. Полученное значение хорошо вписывается в минутный цикл. Это значит, что холст для нашего фонового изображения равен 5076/3 или 1692px. По завершению прокрутки изображения, оно начнет повторяться. Повторения составляют три раза в минуту в бесконечном цикле. Математика!
А высота в 500px действительно произвольна. Она может быть любой. По ссылке можно скачать Photoshop шаблон, используемый в демо выше.
Сохраните изображение (не забудьте оптимизировать для веб!). Его мы и будем использовать в качестве фонового изображения в CSS:
|
1 2 3 4 5 |
.sliding-background { background: url("..path/to/image") repeat-x; height: 500px; width: 5076px; } |
Отлично! Мы получили огромное изображение, которое выходит за рамки блока-обертки. Теперь его можно зациклить.
Эффект прокрутки
Заставим эту штуку двигаться. Изображение должно двигаться слева направо по бесконечному циклу, создавая бесшовный эффект зацикленности. Зададим CSS анимацию:
|
1 2 3 4 5 6 7 8 |
@keyframes .slide { 0%{ transform: translate3d(0, 0, 0); } 100%{ transform: translate3d(-1692px, 0, 0); } } |
С помощью свойства transform на старте анимации спозиционируем изображение по левому краю блока-обертки:
К завершению анимации значение свойства transform изменится на противоположное (с левого края на правый), равное значению ширины изображения. От 0% до 100% наше изображение повторится ровно три раза, т.к. в .sliding-background у нас три одинаковых изображения.
Заметьте: Причина, по которой мы вообще используем еще один div, а не анимируем свойство background-position на основном div, в том, что свойство transform намного более производительно. Зациклим анимацию, вызвав наш slide у класса .sliding-background:
|
1 2 3 4 5 6 |
.sliding-background { background: url("..path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; } |
Свойство animation говорит блоку .sliding-background использовать анимацию slide длительностью в одну минуту линейно и зацикленно.
Собираем все вместе
|
1 2 3 |
<div class="wrapper"> <div class="sliding-background"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.wrapper { overflow: hidden; } .sliding-background { background: url("..path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; } @keyframes slide{ 0%{ transform: translate3d(0, 0, 0); } 100%{ transform: translate3d(-1692px, 0, 0); } } |
Автор: Geoff Graham
Источник: //css-tricks.com/
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Редакция: Команда webformyself.
