Roadwalk

by Felis Catus

HTML

<div class="road">

</div>
<div class="walker">

</div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  position: relative;
  font-family: Helvetica;
  perspective: 500px;
  perspective-origin: 50vw 150px;
  overflow: hidden;
}

.road {
  background-image: url('http://2.bp.blogspot.com/-Kx4tssTpAJg/UmpUMX1z6RI/AAAAAAAAE-Y/9tiDqH-NbXU/s1600/Tileable+tarmac+road+asphalt+lines.jpg');
  height: 100vw;
  width: 300px;
  top: -100px;
  left: 40vw;
  position: absolute;
  background-size: 300px;
  background-repeat: no-repeat repeat;
  transform: rotate(90deg) rotateY(-90deg);
}
.walker {
  background-image: url('http://www.freepngimg.com/thumb/captain_america/21402-8-winter-soldier-bucky-image-thumb.png');
  background-repeat: no-repeat;
  position: absolute;
  width: 200px;
  height: 200px;
  top: 300px;
  left: 100px;
  transform: translateZ(30px);
  perspective-origin: -32px 182px;
  perspective: 500px;
  &:after {
    background-image: inherit;
    background-repeat: no-repeat;
    transform: translatez(-43px) rotateX(-72deg);
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: 0 100%;
    filter: brightness(0) blur(5px) opacity(0.5);
    content: '';
  }
}

JavaScript

var depth=30;
setInterval(function moveSoldier(){
	depth = (depth+1)%150;
	$('.walker').css('transform', `translate(500px,0) translateZ(${depth-50}px)`);
}, 60);