Анимация персонажа с использованием svg совместно с параллаксом фона

#html #css #css3 #svg #анимация

Есть задача анимировать растровый спрайт, используя анимацию smil svg, идущего человека
совместно с анимацией (параллаксом) фона. 

Картинка спрайта: 

 

Картинки фона гор, травы взяты с сайта: - http://rachelnabors.com/
Сейчас затрудняюсь сказать, кто автор рисунков, так как встречал подобное на многих
сайтах. Буду благодарен тому, кто укажет адрес правообладателя. 

картинка части горного фона  

 

    

Ответы

Ответ 1

Анимация идущего человека


Спрайт имеет размеры width="624" height="450"
Будем анимировать первую строку из трех, поэтому минимальная
высота окна просмотра -150px
В строке 6 позиций, ширина одной позиции 624 / 6 = 104px   Итого
габариты просмотрового окна, через который будет протягиваться
спрайт - 104x150px
 Именно такие размеры зададим - viewBox = "0 0 104 150", чтобы    умещалась ровно
одна позиция спрайта.
Спрайт добавляем с помощью тега 




.bg {
 position:relative 
  left:40%;
  bottom:10%;
 }

.cont {
position:absolute;
bottom:3%;
left:40%;
z-index: 3;
} 


	 
 



  

Анимация параллакса фона

Фон состоит из двух background травы, из пяти контуров гор.
По законам физического восприятия, чем дальше предмет, тем он должен медленнее перемещаться.     

Поэтому трава на переднем плане перемещается с наибольшей скоростью, второй фон травы
медленнее и горы вдали имеют самую маленькую скорость перемещения.     

Реализация анимация перемещения, однотипна для всех элементов:  

Интересней смотреть в полноэкранном режиме 

.foreground {
  animation: parallax_fg linear 30s infinite both;
  background:  url(https://i.stack.imgur.com/gc1NS.png) 0 100% repeat-x;
  z-index: 4;
}
@keyframes parallax_fg {  
  0% { background-position: 3584px 100%;} 
  100% {background-position: 0 100%; } 
}




.bg {
 
 width: 230px;
  height: 636px;
  left:40%;
  bottom:0;
  position:relative;
 }

.cont {
position:absolute;
bottom:-35%;
left:40%;
z-index: 3;
} 
.foreground, .midground, .background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  translate3d(0,0,0); 
}
.foreground {
  animation: parallax_fg linear 30s infinite both;
  background:  url(https://i.stack.imgur.com/gc1NS.png) 0 100% repeat-x;
  z-index: 4;
  pointer-events: none;
}
@keyframes parallax_fg {  
  0% { background-position: 3584px 100%;} 
  100% {background-position: 0 100%; } 
}
.midground {
  animation: parallax_mg linear 60s infinite;
  background:  url(https://i.stack.imgur.com/BFO4j.png) 0 100% repeat-x;
  z-index: 2;
  pointer-events: none;
}
@keyframes parallax_mg {  
  0% { background-position: 3000px 100%;} 
  100% {background-position: 0 100%; } 
}
.background {
  background-image:
    url(https://i.stack.imgur.com/nH0A3.png),
    url(https://i.stack.imgur.com/BYelb.png),
    url(https://i.stack.imgur.com/bqP3B.png),
    url(https://i.stack.imgur.com/pnQHp.png),
    url(https://i.stack.imgur.com/s5GYi.png);
  background-repeat: repeat-x;
  background-position: 0 100%;
  z-index: 1;
  pointer-events: none;
  animation: parallax_bg linear 180s infinite;
  
}
@keyframes parallax_bg {
  100% { background-position-x: 1200px, 1600px, 1800px, 2000px, 2400px;}
}
body {
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
    #d2d2d2 url(https://i.stack.imgur.com/0WuXS.png);
}
.play_audio {

position:absolute;
top:0%;
left:0%;
}
 
 
 
 
 
 
 
 
 
 

 


  
 
 
   
  	




Update 06.04.2019

Добавлен аудиоплейер, так как Chrome перестал воспроизводить файлы *.mp3 в режиме
автоматического запуска.

Во время анимации звучит трек - Come Together из альбома Abbey Road группы Beatles