Rich Eitzchaarg - By Keith Jeter

An HTML CSS animated sketch

by Keith Jeter

HTML

<div class="rich_wrap">

<div class="upDown z-10">
  <div class="rich_hair parRot1"></div>
</div>

<div class="upDown z-9">
  <div class="rich_face parRot"></div>
</div>

<div class="upDown z-8">
  <div class="rich_neck"></div>
</div> 

<div class="upDown z-7">
  <div class="rich_bandana parRot"></div>
</div>

<div class="upDown z-10">
  <div class="rich_shell parRot"></div>
</div>

<div class="upDown z-9">
  <div class="rich_l_arm_mid parRot1"></div>
</div>

<div class="upDown z-8">
  <div class="rich_l_arm_lower parRot1"></div>
</div>

<div class="upDown z-7">
  <div class="rich_l_arm_upper parRot"></div>
</div>

<div class="upDown z-6">
  <div class="rich_torso pulse animated infinite"></div>
</div>

<div class="upDown z-5">
  <div class="rich_r_arm_mid parRot1"></div>
</div>

<div class="upDown z-3">
  <div class="rich_r_arm_lower revparRot1"></div>
</div>

<div class="upDown z-4">
  <div class="rich_r_arm_upper revparRot"></div>
</div>

<div class="z-4">
  <div class="rich_legs"></div>
</div>

<div class="z-3">
  <div class="rich_belt revparRot"></div>
</div>
  
</div>

<!--<div class="rich z"></div>-->

CSS

/*-- rich animation --*/

.rich { 
  width: 827px;
  height: 1001px;
  background: url(http://galnova.com/2016/a_rich/a_rich.png) no-repeat;
	opacity: 0.25;
	top: 50px;
	left: 50px;
	position: absolute;
}

.rich_wrap { 
/*   width: 900px;
  height: 1100px; */
  /* border: solid 1px #000; */
    transform: scale(0.65);
 }
  
.rich_hair { 
  width: 35px;
  height: 92px;
  top: 79px;
  left: 222px;
  background: url(http://galnova.com/2016/a_rich/rich_hair.png) no-repeat;
}

.rich_face { 
  width: 190px;
  height: 174px;
  top: 50px;
  left: 184px;
  background: url(http://galnova.com/2016/a_rich/rich_face.png) no-repeat;
}

.rich_neck { 
  width: 147px;
  height: 103px;
  top: 152px;
  left: 155px;
  background: url(http://galnova.com/2016/a_rich/rich_neck.png) no-repeat;
}

.rich_bandana { 
  width: 39px;
  height: 85px;
  top: 106px;
  left: 165px;
  background: url(http://galnova.com/2016/a_rich/rich_bandana.png) no-repeat;
}

.rich_shell { 
  width: 110px;
  height: 87px;
  top: 230px;
  left: 78px;
  background: url(http://galnova.com/2016/a_rich/rich_shell.png) no-repeat;
}

.rich_l_arm_mid { 
  width: 115px;
  height: 88px;
  top: 390px;
  left: 50px;
  background: url(http://galnova.com/2016/a_rich/rich_l_arm_mid.png) no-repeat;
}

.rich_l_arm_lower { 
  width: 98px;
  height: 216px;
  top: 448px;
  left: 74px;
  background: url(http://galnova.com/2016/a_rich/rich_l_arm_lower.png) no-repeat;
}

.rich_l_arm_upper { 
  width: 93px;
  height: 168px;
  top: 253px;
  left: 87px;
  background: url(http://galnova.com/2016/a_rich/rich_l_arm_upper.png) no-repeat;
}

.rich_torso { 
  width: 216px;
  height: 266px;
  top: 223px;
  left: 127px;
  background: url(http://galnova.com/2016/a_rich/rich_torso.png) no-repeat;
}

.rich_r_arm_mid { 
  width: 86px;
  height: 78px;
  top: 390px;
  left: 304px;
  background: url(http://galnova.com/2016/a_rich/rich_r_arm_mid.png) no-repeat;
}

.rich_r_arm_lower { 
  width: 558px;
  height: 583px;
  top: 444px;
  left: 321px;
 ...

JavaScript

666