Создание бесконечного цикла фонового изображения в CSS

В этом посте мы познакомимся с двумя способами создания эффекта бесконечной прокрутки используя фоновые изображения с базовой HTML-разметкой и CSS, в том числе:

изображение с бесконечной горизонтальной прокруткой с использованием анимации для зацикливания изображения;

эффект прокрутки изображения параллакса, создающий иллюзию бесконечной прокрутки изображения.

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

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

Для обоих методов нам нужно изображение в качестве фона. Для первого эффекта в идеале требуется изображение с одинаковыми левой и правой сторонами; изображение для второго эффекта не нуждается в особых спецификациях.

Обе стороны изображения должны быть сплошного цвета, идентичного (или очень близкого) друг к другу. Это позволяет циклу продолжаться незаметно для пользователя, создавая впечатление, что изображение продолжается бесконечно.

Если у вас нет изображения и вы не хотите создавать собственное, я настоятельно рекомендую использовать веб-сайт Unsplash. Unsplash предоставляет изображения в высоком разрешении без лицензионных отчислений, все, что они просят, — это предоставить кредит автору. Вот изображение, которое я буду использовать для этого урока:

Теперь, когда источник изображения выбран, давайте перейдем к созданию эффектов в CSS.

Способ 1: Создание изображения с бесконечной горизонтальной прокруткой

Давайте рассмотрим первый сценарий. Во-первых, нам нужен контейнер для размещения изображения, который должен быть больше, чем само изображение; он может быть больше в два раза или еще больше, если ширина контейнера равномерно делится на ширину изображения, чтобы создать бесшовный эффект.

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

HTML-разметка и базовые стили

Давайте начнем с создания базовой HTML-разметки для нашего прокручиваемого изображения. Как упоминалось ранее, сначала нам нужен контейнер, а затем изображение внутри него:

<div class=”scrolling-image-container”> <div class=”scrolling-image”></div> </div>

123	<div class=”scrolling-image-container”> <div class=”scrolling-image”></div></div>

Теперь, когда наша базовая разметка для прокручиваемого изображения завершена, давайте добавим необходимые стили.

Поскольку изображение должно превышать ширину страницы, чтобы оно зациклилось, мы должны убедиться, что контейнер скрывает переполнение, что мы можем легко сделать, используя следующее:

CSS .scrolling-image-container { overflow: hidden; }

123	.scrolling-image-container {  overflow: hidden;}

Рассмотрев это, мы можем обратить внимание на фактическое изображение. Для этого добавим изображение с помощью свойства background в CSS. Это также позволяет нам легко повторять изображение, используя значение repeat-x для background, когда мы определяем изображение.

После этого мы должны указать ширину и высоту изображения. Высота может быть произвольной и любой, которую вы хотите установить для изображения.

Однако ширина, как упоминалось ранее, должна быть кратна ширине изображения. Поскольку изображение из Unsplash имеет ширину 3840 пикселей, давайте установим div в два раза больше (7680 пикселей):

CSS .scrolling-image { background: url(“./background-image.jpg”) repeat-x; height: 750px; width: 7680px; }

12345

.scrolling-image {  background: url(“./background-image.jpg”) repeat-x;  height: 750px;  width: 7680px;}

Заставить изображение прокручиваться бесконечно

Теперь, когда у нас есть контейнер, скрывающий переполнение, и изображение настроено на повторение внутри контейнера с заданной высотой и шириной, мы можем создать анимацию, которая перемещает повторяющееся изображение внутри контейнера, чтобы создать иллюзию его бесконечности.

Для анимации давайте воспользуемся стандартной анимацией CSS и переместим div с изображением из начальной точки 0 в конечную точку ширины изображения. В этом случае конечная точка анимации должна быть -3840px:

CSS @keyframes slide { 0% { transform: translate(0); } 100% { transform: translate(-3840px); /* The image width */ } }

12345678

@keyframes slide {  0% {    transform: translate(0);  }  100% {    transform: translate(-3840px); /* The image width */  }}

После создания анимации все, что нам нужно — добавить ее в наш div с изображением, используя стандартный синтаксис анимации для CSS:

CSS .scrolling-image { background: url(“./background-image.jpg”) repeat-x; height: 750px; width: 7680px; animation: slide 3s linear infinite; }

123456

.scrolling-image {  background: url(“./background-image.jpg”) repeat-x;  height: 750px;  width: 7680px;  animation: slide 3s linear infinite;}

Мы также определили, что анимация должна длиться 3 секунды, иметь линейную функцию синхронизации и повторяться бесконечно. Это позволяет нам создать эффект бесконечной прокрутки изображения по горизонтали практически без признаков того, что это изображение зацикливается несколько раз.

Ключевой целью этого метода является предоставление зрителю хорошего впечатления от просмотра. Мы делаем это, гарантируя, что стороны изображений выровнены без видимых различий, поэтому зритель не может обнаружить петлю.

Способ 2: создание эффекта бесконечной прокрутки параллакса

Разобравшись с методом анимации CSS, давайте взглянем на другой способ создания эффекта бесконечной прокрутки для фоновых изображений в CSS: эффект параллакса.

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

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

Изображение параллакса — это изображение, которое перемещается внутри контейнера. Как правило, оно перемещается по мере того, как пользователь прокручивает страницу, и никогда не достигает конца изображения, что полезно, поскольку создает иллюзию бесконечности изображения.

Ниже представлен CodePen, содержащий несколько примеров изображений параллакса.

Хотя технически он не бесконечен, поскольку метод обеспечивает прокрутку вверх и вниз по одному и тому же изображению, у пользователя нет возможности добраться до верхней или нижней части изображения (при условии, что мы настроили все правильно). Это, в свою очередь, создает иллюзию бесконечной прокрутки.

Разметка и CSS для прокрутки параллакса

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

Для этого метода нам не нужен контейнер, скрывающий переполнение, как в предыдущем методе, потому что мы не будем переполнять его. Вместо этого мы будем содержать изображение в пределах одного элемента. Давайте начнем с определения div на странице с именем класса, к которому мы позже сможем добавить стили:

<div class=”parallax-image”></div>

1	<div class=”parallax-image”></div>

Теперь в CSS давайте добавим наше изображение, как мы это делали до использования свойства background:

CSS .parallax-image { background: url(“./background-image.jpg”); }

123	.parallax-image {  background: url(“./background-image.jpg”);}

На данный момент у нас есть элемент с установленным фоновым изображением. Но он не отображается на странице. Чтобы это произошло, мы должны определить минимальную высоту элемента; добавим следующее:

CSS .parallax-image { background: url(“./background-image.jpg”); min-height: 600px; }

1234	.parallax-image {  background: url(“./background-image.jpg”);  min-height: 600px;}

Теперь у нас есть изображение, отображаемое на странице, и может возникнуть проблема с изображением, переполняющим контейнер, когда его ширина больше ширины контейнера. Давайте исправим это, используя background-size:

CSS .parallax-image { background: url(“./background-image.jpg”); min-height: 600px; background-size: cover; }

12345

.parallax-image {  background: url(“./background-image.jpg”);  min-height: 600px;  background-size: cover;}

Теперь изображение должно быть ограничено шириной элемента на странице. Чтобы эффект параллакса работал в полную силу, нам нужно изображение, высота которого больше, чем высота элемента, в котором мы его отображаем.

В моем случае изображение, которое я использую, имеет высоту 2160 пикселей, а высота элемента, в котором я его показываю, составляет 600 пикселей, поэтому у меня достаточно места для использования эффект параллакса. Если это не ваш случай, вы можете:

Уменьшить высоту отображаемого элемента, чтобы освободить место за его пределами для прокрутки

Использовать изображение с более высоким разрешением, чтобы обеспечить большую высоту

Отцентрируем наше изображение, используя background-position. И пока мы это делаем, давайте также убедимся, что изображение не повторяется, используя свойство background-repeat:

CSS .parallax-image { background: url(“./background-image.jpg”); min-height: 600px; background-position: center; background-repeat: no-repeat; background-size: cover; }

1234567

.parallax-image {  background: url(“./background-image.jpg”);  min-height: 600px;  background-position: center;  background-repeat: no-repeat;  background-size: cover;}

После всего этого наше изображение должно быть центрировано без повторов, отображая его с использованием полной ширины элемента. Но у нас все еще нет эффекта параллакса. Давайте исправим это, используя свойство background-attachment:

CSS .parallax-image { background: url(“./background-image.jpg”); min-height: 600px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

12345678

.parallax-image {  background: url(“./background-image.jpg”);  min-height: 600px;  background-attachment: fixed;  background-position: center;  background-repeat: no-repeat;  background-size: cover;}

Добавляя свойство background-attachment, мы фиксируем фон, чтобы он не двигался относительно области просмотра. Другими словами, изображение не будет двигаться при прокрутке, что, в свою очередь, создаст эффект параллакса, который нам нужен.

Заключение

У нас есть два метода создания фонового изображения с бесконечной прокруткой с помощью CSS. Ниже приведены оба метода, которые мы создали сегодня:

В этом посте мы рассмотрели два способа создания иллюзии бесконечно прокручивающегося изображения на веб-сайте с помощью различных свойств CSS. Во-первых, это метод с использованием CSS-анимации для зацикливания изображения, а затем мы рассмотрели создание эффекта параллакса с использованием свойств фона.

Нет правильного или неправильного способа создать изображение с бесконечной прокруткой; метод, который вы используете, должен зависеть от желаемого эффекта. Я надеюсь, что вы нашли этот пост полезным.

Автор: Coner Murphy

Источник: webformyself.com