JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="start">
START ZOMBIE UP
</button>
<button class="hitupper">
UPPER HIT ZOMBIE
</button>
<div class="zombie">
<div class="zombie-upper">
<div class="zombie-head"></div>
<div class="zombie-torso"></div>
<div class="zombie-arm-left">
<div class="zombie-arm-upper"></div>
<div class="zombie-arm-lower">
<div class="zombie-forearm"></div>
<div class="zombie-hand"></div>
</div>
</div>
<div class="zombie-arm-right">
<div class="zombie-arm-upper"></div>
<div class="zombie-arm-lower">
<div class="zombie-forearm"></div>
<div class="zombie-hand"></div>
</div>
</div>
</div>
<div class="zombie-lower">
<div class="zombie-pelvis"></div>
<div class="zombie-leg-left">
<div class="zombie-leg-upper"></div>
<div class="zombie-leg-lower">
<div class="zombie-shin"></div>
<div class="zombie-foot"></div>
</div>
</div>
<div class="zombie-leg-right">
<div class="zombie-leg-upper"></div>
<div class="zombie-leg-lower">
<div class="zombie-shin"></div>
<div class="zombie-foot"></div>
</div>
</div>
</div>
</div>
CSS
html{
height:100%;
}
body{
height:100%;
margin:0px;
perspective:500px;
background-color:#333;
}
button{
background-color:#333;
color:#ffff00;
padding:12px;
border:none;
outline:none !important;
}
button:hover{
background-color:#111;
cursor:pointer;
}
.zombie{
top:50%;
left:50%;
height:0px;
width:0px;
margin-top:20px;
position:absolute;
transform-style:preserve-3d;
transform:rotateY(0deg) scaleX(.2) scaleY(.2) scaleZ(.2);
filter:brightness(0);
}
.zombie div{
position:absolute;
top:50%;
left:50%;
transform-style:preserve-3d;
}
.zombie .zombie-upper{
transform-origin:50% 100%;
height:0px;
width:0px;
}
.zombie .zombie-lower{
transform-origin:50% 0%;
height:0px;
width:0px;
}
.zombie .zombie-upper .zombie-head{
width:50px;
height:50px;
margin-left:-25px;
margin-top:-25px;
transform:translateY(-125px);
transform-origin:50% 100%;
background-image:url(https://aninoob.com/ANINOOB.api/image.library/characters/zombie/head.png);
}
.zombie .zombie-upper .zombie-torso{
width:40px;
height:100px;
margin-left:-20px;
margin-top:-50px;
background-image:url(https://aninoob.com/ANINOOB.api/image.library/characters/zombie/torso.png);
transform:translateY(-50px);
}
.zombie .zombie-upper .zombie-arm-left{
width:0px;
height:0px;
transform:translateX(-20px) translateY(-95px);
transform-origin:50% 0%;
}
.zombie .zombie-upper .zombie-arm-left .zombie-arm-upper{
width:20px;
height:50px;
margin-left:-10px;
margin-top:-25px;
background-image:url(https://aninoob.com/ANINOOB.api/image.library/characters/zombie/left.arm.upper.png);
transform:translateX(-10px) translateY(25px);
}
.zombie .zombie-upper .zombie-arm-left .zombie-arm-lower{
width:0px;
height:0px;
transform:translateX(-10px) translateY(50px);
transform-origin:50% 0%;
}
.zombie .zombie-upper .zombie-arm-left .zombie-arm-lower .zombie-forearm{
width:20px;
height:40px;
margin-left:-10px;
margin-top:-20px;
...
JavaScript
var z = 0;
var brightness = 0;
var velocity = 0;
var max_velocity = 1;
function render(){
$('.zombie').css('transform','translateZ(' + parseInt(z) + 'px) scaleX(.2) scaleY(.2) scaleZ(.2)');
$('.zombie').css('filter','brightness(' + brightness + ')');
brightness+=.0005;
z+=velocity;
if(velocity < max_velocity){
velocity+=.005;
}
requestAnimationFrame(function(){
render();
});
}
$('button.start').click(function(){
requestAnimationFrame(function(){
$('.zombie').addClass('walking');
$('.zombie').addClass('arms-out');
render();
});
});
$('button.hitupper').click(function(){
if(!$('.zombie').hasClass('hit')){
velocity=0;
$('.zombie').addClass('hit');
setTimeout(function(){
$('.zombie').addClass('hit-upper');
setTimeout(function(){
$('.zombie').removeClass('hit-upper');
setTimeout(function(){
$('.zombie').removeClass('hit');
},500);
},500);
},20);
}
});