Бесконечный анимированный фон с эффектом параллакса
31 марта 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.
Изменение внешнего вида чекбоксов и радио-кнопок с помощью CSS
Изменение внешнего вида для чекбокса с помощью CSS HTML для чекбокса или радио-кнопок CSS для…
Бесконечный фон с автопрокруткой
Вариант 1 — с помощью JS меняем позицию фонового рисунка Вариант 2 — без JS…
Как получить параметр из URL страницы
Как получить нужный параметр из адреса страницы? Итак, у нас есть рекламная кампания, и при…
Плавный скроллинг по странице к нужному элементу с использованием плагина PageScroll2id
В предыдущей статье Плавный скролл по странице к нужному ID (Scroll to id) рассматривал простой…
4 комментария
Ответить
Прекрасная работа(нет)
Обоснуй
А мне нравится
Идея супер
Спасибо, простой, понятный и интересный эффект, понимая логику, можно сделать любую анимацию.