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