Бесконечный фон с автопрокруткой

Вариант 1 — с помощью JS меняем позицию фонового рисунка

<div id="bg"></div>
var y = 0;
var body = document.getElementById("bg");

requestAnimationFrame(move);

function move() {
  y++;
  body.style.backgroundPosition = "0px " + y + "px";
  requestAnimationFrame(move);
}
#bg {
  background-image: url('http://denis-creative.com/wp-content/uploads/2019/03/bg-scroll.jpg');
  background-size: 250px 250px; /*только для этого примера*/
  width: 100vw;
  height: 100vh;
}

See the Pen gEVNKy by Denis (@deniscreative) on CodePen.0

Вариант 2 — без JS с помощью CSS-анимации меняем позицию фоновой картинки

<div id="bg"></div>
#bg {
  background-image: url('http://denis-creative.com/wp-content/uploads/2019/03/bg-scroll.jpg');
  background-size: 250px 250px; /*только для этого примера*/
  width: 100vw;
  height: 100vh;
  animation: moveSlideshow 5s linear infinite;
}

@keyframes moveSlideshow {
  100% { 
    background-position: 250px 250px;
  }
}

See the Pen Infinite scrolling background by CSS by Denis (@deniscreative) on CodePen.0

Вариант 3 — Более универсальный и быстрый для производительности способ, с помощью CSS-анимации двигается весь блок внутри родительского контейнера

<div class="container">
  <div id="bg"></div>
</div>
.container {
  position: relative;
  width: 60vw;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}
#bg {
  background-image: url('http://denis-creative.com/wp-content/uploads/2019/03/bg-scroll.jpg');
  background-size: 250px 250px; /*только для этого примера*/
  width: 3000px;
  height: 100vh;
  animation: moveSlideshow 10s linear infinite;
}

@keyframes moveSlideshow {
  0 { 
    transform: translate3d(0, 0, 0);
  }
  100% { 
    transform: translate3d(-1000px, 0, 0);
  }
}

See the Pen Infinite scrolling background by CSS 2 by Denis (@deniscreative) on CodePen.0

Как получить параметр из URL страницы

Как получить нужный параметр из адреса страницы? Итак, у нас есть рекламная кампания, и при…

Плавный скроллинг по странице к нужному элементу с использованием плагина PageScroll2id

В предыдущей статье Плавный скролл по странице к нужному ID (Scroll to id) рассматривал простой…

Как задать тексту фоновый рисунок с помощью CSS-свойства background-clip

Простой пример, как можно задать для текста фоновое изображение с помощью CSS-свойства background-clip. HTML —…

Используем медиа-запросы вместе с LESS

Стандартное использование медиа-запросов в CSS: CSS-препроцессор, на самом деле, может реально упростить вам работу с…

Ответить