Бесконечный анимированный фон с эффектом параллакса

Бесконечный анимированный фон с эффектом параллакса создан на основе варианта 2 из этой статьи

HTML

<div class="bg background"></div>
<div class="bg midground"></div>
<div class="bg foreground"></div>

CSS

.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: spaceJam 120s linear infinite;
}

.background {
  background: url('https://denis-creative.com/wp-content/uploads/2019/03/background.png');
}

.midground {
  background: url('https://denis-creative.com/wp-content/uploads/2019/03/midground.png');
  animation-duration: 60s;
}

.foreground {
  background: url('https://denis-creative.com/wp-content/uploads/2019/03/foreground.png');
  animation-duration: 30s;
}

@keyframes spaceJam {
  100% {
    background-position: -2500px -500px;
  }
}

Рабочий пример бесконечного анимированного фона с эффектом параллакса

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

Изменение внешнего вида чекбоксов и радио-кнопок с помощью CSS

Изменение внешнего вида для чекбокса с помощью CSS HTML для чекбокса или радио-кнопок CSS для…

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

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

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

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

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

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

4 комментария

Прекрасная работа(нет)

А мне нравится
Идея супер

Спасибо, простой, понятный и интересный эффект, понимая логику, можно сделать любую анимацию.

Ответить