Учебное пособие по CSS: Создание фона с бесконечной прокруткой Codepen разработан специально для начинающих пользователей
В этой статье я покажу вам, как создать эффект бесконечной прокрутки, используя изображение в качестве фона. Для начала вам потребуется подключение к CSS и некоторое понимание селекторов. Мы будем использовать 2 класса и ключевые кадры для целей анимации.
Вам понадобится:
- Редактор кода, я использую codepen
- Изображение, я нашел его через Google
Это окончательный результат:
HTML
Начнем с HTML. Я буду использовать 2 класса.
<div class="container">
<div class="infinite-scrolling"></div>
</div>
Код HTML включает элемент div с классом container, который содержит другой элемент div с infinite-scrolling. Это обычная структура, используемая в веб-разработке для создания элемента-контейнера, содержащего другие элементы.
CSS
А теперь давайте сотворим немного волшебства!
Я определю container, а затем infinite-scrolling.
.container {
overflow: hidden;
}
Код CSS устанавливает для свойства overflow элемента div контейнера значение hidden, что означает, что любое содержимое, выходящее за пределы размеров контейнера, будет скрыто от просмотра.
.infinite-scrolling {
background: url("https://static.vecteezy.com/system/resources/previews/001/928/973/original/rural-nature-road-scene-free-vector.jpg") repeat-x;
height: 645px;
width: 5760px; /* The image width times 3 */
}
Класс с infinite-scrolling устанавливает фон элемента div на изображение, расположенное по URL-адресу, указанному в свойстве background. В этом случае изображение повторяется по горизонтали (repeat-x), чтобы создать эффект бесконечно прокручивающегося фона!
Свойство height класса с infinite-scrolling установлено на 645px, что определяет высоту фона прокрутки. Свойство width установлено равным 5760px, то есть ширине изображения, умноженной на 3, так что изображение повторяется три раза по горизонтали. (Итак, размер изображения, которое я выбрал, составляет 1920x645.)
Если вы не уверены, что понимаете приведенный выше блок кода, продолжайте читать этот раздел, иначе вы можете перейти к АНИМАЦИИ.
Свойство width класса .infinite-scrolling установлено равным 5760px, что в три раза превышает ширину фонового изображения. Это сделано для создания эффекта бесконечно прокручивающегося фона, который плавно повторяется.
Когда фоновое изображение повторяется с использованием значения repeat-x свойства background-repeat, изображение повторяется по горизонтали, чтобы заполнить ширину элемента контейнера. Установив ширину элемента .infinite-scrolling в три раза больше ширины фонового изображения, он гарантирует, что в любой момент времени на экране всегда будут видны три копии фонового изображения.
Когда фоновое изображение начинает прокручиваться справа налево, первая копия изображения исчезает с левого края экрана, а четвертая копия изображения становится видимой с правого края экрана, создавая иллюзию бесконечно прокручивающегося фона. Без установки width в три раза больше ширины фонового изображения эффект прокрутки не будет бесшовным, поскольку между концом первого изображения и началом второго изображения будет разрыв.
ANIMATION
И самое интересное! Добавим изучение анимации и саму анимацию. Нам нужно добавить еще одну строку в предыдущий класс CSS. Вот как это будет выглядеть.
.infinite-scrolling {
background: url("https://static.vecteezy.com/system/resources/previews/001/928/973/original/rural-nature-road-scene-free-vector.jpg") repeat-x;
height: 645px;
width: 5760px; /* The image width times 3 */
animation: slide 60s linear infinite;
}
Свойство animation класса с infinite-scrolling задает анимацию, называемую slide, которая длится 60 секунд (60s), воспроизводится линейно и повторяется бесконечно (infinite).
Далее нам нужно установить infinite.
@keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1920px, 0, 0); /* The image width */
}
}
Правило @keyframes определяет анимацию slide, которая указывает, как фоновое изображение должно перемещаться по экрану.
- Ключевой кадр
0%устанавливает начальное состояние анимации, то есть изображение не переведено (translate3d(0, 0, 0)). - Ключевой кадр
100%задает конечное состояние анимации, то есть изображение смещается на-1920pxпо оси X (translate3d(-1920px, 0, 0)), что эквивалентно ширине изображения. Это заставляет фоновое изображение перемещаться по экрану справа налево, создавая эффект бесконечной прокрутки фона.
Ты все еще здесь? Поздравляем, вы сделали это! У вас должно получиться что-то похожее:
Подведем итог
В статье объясняется, как создать эффект бесконечной прокрутки, используя изображение в качестве фона веб-страницы. Он использует CSS для установки свойств фона и анимации, а также правило @keyframes для определения анимации слайдов. Если установить ширину элемента прокрутки в три раза больше ширины изображения, эффект прокрутки будет бесшовным. Так же вы модете узнать как анимировать градиентный текст в CSS.
