Бесконечный фон с автопрокруткой
30 марта 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('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-препроцессор, на самом деле, может реально упростить вам работу с…