Для создания бесконечного фона сайта с одной стороны можно использовать CSS свойство background-attachment и CSS псевдоэлементы.
- Сначала определите фоновое изображение, которое вы хотите использовать для фона. Вы можете выбрать любое изображение, которое вам нравится, или создать специальное изображение, предназначенное для бесконечного эффекта фона.
- Далее создайте основной стиль секции, где будете использовать бесконечный фон. Например:
<section class="infinite-background"></section>
- Примените стили для этой секции в CSS файле:
.infinite-background {
background-image: url('путь_к_вашему_изображению');
background-repeat: repeat-x; /* Повторять изображение только по горизонтали */
background-attachment: fixed; /* Фиксировать фон, чтобы он оставался на месте при прокрутке */
height: 100vh; /* Задайте высоту секции, чтобы соответствовать высоте окна просмотра */
}
- Чтобы создать эффект бесконечного фона, добавьте псевдоэлемент :before с отдельными стилями. Это позволит сделать переход между началом и концом фона с использованием плавного градиента.
.infinite-background:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -100%; /* начальное положение псевдоэлемента - за пределами экрана слева */
right: 0;
background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3), transparent); /* градиентный переход от прозрачного к серому с использованием эффекта затухания */
z-index: -1; /* установите меньший z-index, чтобы псевдоэлемент был под основной секцией */
animation: infinite-background-animation 20s linear infinite; /* анимация для создания эффекта плавного перемещения псевдоэлемента */
}
@keyframes infinite-background-animation {
0% {
transform: translateX(0); /* начальная позиция псевдоэлемента */
}
100% {
transform: translateX(100%); /* конечная позиция псевдоэлемента, когда он полностью скрыт */
}
}
Теперь ваша секция должна отображать бесконечный фон, который будет двигаться с одной стороны. Вы можете настроить скорость и стиль анимации по своему усмотрению, играя с параметрами в анимации и градиенте.