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) к “Бесконечный анимированный фон с эффектом параллакса”
Тема
Прекрасная работа(нет)
Denis Creative
Обоснуй