Идея состоит в том, чтобы создать вид слайд-шоу без карусели. Другими словами, мы делаем серию изображений слайдом слева направо и повторяем, как только будет достигнут конец изображений. Хитрость в том, что мы используем одно фоновое изображение с CSS-анимацией для (…)
Идея состоит в том, чтобы создать вид слайд-шоу без карусели. Другими словами, мы делаем серию изображений слайдом слева направо и повторяем, как только будет достигнут конец изображений.
Хитрость в том, что мы используем одно фоновое изображение с CSS-анимацией, чтобы перемещать его по экрану и повторять, когда это будет сделано. Это создает иллюзию галереи изображений, когда мы действительно используем одно изображение.
Настройка HTML
Вот план того, как должен быть структурирован наш HTML:
Мы работаем с двумя элементами: тот, который мы вызываем .container, соответствует точной ширине области просмотра, а другой, который мы вызываем .sliding-background, находится за ним .containerи переполняет его. По сути, мы используем .containerкак маску, чтобы скрыть всю ширину, .sliding-backgroundкогда она прокручивается по экрану.
Это означает, что нам нужно создать только два элемента в разметке HTML:
Размещение элементов
Давайте продолжим и добавим немного CSS, который будет правильно позиционировать наши два элемента.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Мы .containerиспользуем overflowсвойство, которое будет скрывать все, что визуально содержится за его пределами. Думайте об этом как об кадре на фотографии. За пределами контейнера могут быть лишние вещи, но контейнер мешает нам их увидеть.
Вот здесь и .sliding-backgroundвступает в игру наш . Установлена какая-то нелепая ширина, которая переполняет большинство окон просмотра. И в этом вся уловка: это должно быть что-то, что переполняет контейнер. В этом случае мы используем произвольно выбранную 5076pxширину, которая должна перекрывать большинство окон просмотра браузера.
Создание фонового изображения
Нам нужно изображение, если мы создаем иллюзию галереи слайд-шоу, верно? Это наш следующий порядок работы.
Помните, как мы упоминали о несколько произвольно выбранной 5076pxширине скользящего фона? Что ж, это произвольно, но намеренно в том смысле, что оно хорошо делится на 3, что соответствует времени для минутного цикла, который появится немного позже. Это означает, что холст для нашего фонового изображения - 5076 / 3или 1692px. В конце концов, наш фон будет повторяться всего три раза за одну минуту в бесконечном цикле. Математика для победы!
500pxВысота действительно произволен. Это может быть все, что вы хотите, при условии, что это также фактический размер файла фонового изображения.
Файл Photoshop, используемый для создания фонового изображения для демонстрации в начале этой главы, доступен для загрузки, если вы ищете отправную точку.
Как только изображение будет сохранено (и оптимизировано!), Вот что мы будем использовать в качестве фонового изображения в CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Большой! Это дает нам огромное изображение, которое переполняет контейнер и теперь может использоваться для прокрутки экрана до бесконечности.
Анимация фона
Хорошо, давай заставим эту штуку двигаться. Мы хотим, чтобы он шел слева направо в цикле, который повторяется снова и снова, чтобы создать цельный эффект, чтобы изображение продолжалось вечно.
Сначала давайте определим анимацию CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Мы используем transformсвойство для размещения левого изображения у левого края контейнера, когда начинается анимация, например:
К тому времени, когда анимация завершится, она изменит положение в отрицательном направлении (слева направо) на величину, которая соответствует точной ширине нашего изображения. И, поскольку .sliding-backgroundширина в три раза превышает фактическое изображение, изображение повторяется трижды от 0% до 100%, прежде чем снова зацикливаться.
Примечание: причина, по которой мы используем дополнительный
background-positionна основном transformдля выполнения движения, что намного эффективнее.
Хорошо, давайте закончим, вызвав нашу slideанимацию в .sliding-backgroundклассе:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationСвойство инструктирует .sliding-backgroundиспользовать slideанимацию и запустить его в течение одной минуты в то время , в линейном, бесконечный цикл.
Собираем все вместе
.container ( 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); ) )