Анимация персонажа прыгающей девочки
1,00
р.
На просторах интернета нашел гифку прыгающей девочки:
Возник вопрос,- как реализовать эту анимацию с помощью CSS или SVG?
Понятно, что нужно нарисовать спрайт, состоящий из отдельных кадров и заставить их поочередно перемещаться в окне равным по ширине одному кадру.
Ответ
Рисуем или находим готовый спрайт:
Ширина спрайта - 640px Ширина одного кадра будет задана - 160px Спрайт добавляется в качестве фона и будет дискретно, по кадру перемещаться в окне равному по ширине и высоте одному кадру: width: 160px и height: 276px команда анимации перемещения: animation: run 0.5s steps(4) infinite Осталось подобрать подходящий музыкальный фрагмент: "Boney M - Happy Song"
Update 18.03.2019 г.
Chrome запретил автоматический запуск mp3 поэтому добавил аудиоплейер.
Добавлена фоновая картинка дворика.
Update 24.09.2020 г.
Доработан спрайт png Фон стал прозрачный Подарена девочке скакалка Запуск муз. трека - кнопка Play
Лучше смотреть в полноэкранном режиме
.house { width:100vw height:100vh background-image:url(https://i.sstatic.net/0f4Hg.jpg) background-size:cover
} .girl { animation: run 0.5s steps(4) infinite -webkit-animation: run 0.5s steps(4) infinite background: url(https://i.sstatic.net/2D4RP.png) 0 100% background-repeat: no-repeat position:absolute bottom:0% right:50% width: 160px height: 276px }
@keyframes run { from { background-position: 0px } to { background-position: -612px } }
.play-audio { width:10% height:10% position:absolute bottom:5% }
var Hsong = new Audio() Hsong.src = 'https:/vg-art.ru/files/Hsong.mp3'
function play() { Hsong.play() }
Возник вопрос,- как реализовать эту анимацию с помощью CSS или SVG?
Понятно, что нужно нарисовать спрайт, состоящий из отдельных кадров и заставить их поочередно перемещаться в окне равным по ширине одному кадру.
Ответ
Рисуем или находим готовый спрайт:
Ширина спрайта - 640px Ширина одного кадра будет задана - 160px Спрайт добавляется в качестве фона и будет дискретно, по кадру перемещаться в окне равному по ширине и высоте одному кадру: width: 160px и height: 276px команда анимации перемещения: animation: run 0.5s steps(4) infinite Осталось подобрать подходящий музыкальный фрагмент: "Boney M - Happy Song"
Update 18.03.2019 г.
Chrome запретил автоматический запуск mp3 поэтому добавил аудиоплейер.
Добавлена фоновая картинка дворика.
Update 24.09.2020 г.
Доработан спрайт png Фон стал прозрачный Подарена девочке скакалка Запуск муз. трека - кнопка Play
Лучше смотреть в полноэкранном режиме
.house { width:100vw height:100vh background-image:url(https://i.sstatic.net/0f4Hg.jpg) background-size:cover
} .girl { animation: run 0.5s steps(4) infinite -webkit-animation: run 0.5s steps(4) infinite background: url(https://i.sstatic.net/2D4RP.png) 0 100% background-repeat: no-repeat position:absolute bottom:0% right:50% width: 160px height: 276px }
@keyframes run { from { background-position: 0px } to { background-position: -612px } }
.play-audio { width:10% height:10% position:absolute bottom:5% }
Play
var Hsong = new Audio() Hsong.src = 'https:/vg-art.ru/files/Hsong.mp3'
function play() { Hsong.play() }
