30.03.2019
Вариант 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('https://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('https://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('https://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