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

HTML
31.03.2019

Бесконечный анимированный фон с эффектом параллакса создан на основе варианта 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.0

Рекомендую к прочтению:

Комментарии (2) к “Бесконечный анимированный фон с эффектом параллакса”

Оставить комментарий