HTML
<div class="saitama">
<div class="head">
<div class="head-left"></div>
<div class="head-right"></div>
</div><!-- .head -->
</div><!-- .saitama -->
<audio preload="auto" id="punch">
<source src="https://dl.dropboxusercontent.com/u/2964526/hosting/saitama/punch.mp3" controls></source>
Your browser isn't invited for super fun audio time.
</audio>
CSS
html, body{margin:0;width:100%;height:100%;}
body{
background-image:url(https://dl.dropboxusercontent.com/u/2964526/hosting/saitama/apartment.jpg);
background-size:cover;
overflow:hidden;
cursor:url('https://dl.dropboxusercontent.com/u/2964526/hosting/saitama/fist.png'),default;
}
*, *:after, *:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.saitama{
width: 500px;
height: 291px;
background-image: url(https://dl.dropboxusercontent.com/u/2964526/hosting/saitama/saitama_body.svg);
background-repeat: no-repeat;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto -3px;
}
.head{
width: 240px;
height: 322px;
background-image: url(https://dl.dropboxusercontent.com/u/2964526/hosting/saitama/saitama_head.svg);
background-repeat: no-repeat;
position: absolute;
left: -32px;
right: 0;
margin: auto;
top: -245px;
animation-duration: 0.8s;
animation-fill-mode: both;
transform-origin: bottom center;
}
.head-left{
position: absolute;
width: 50%;
height: 100%;
}
.smack-right .head-left{width:100%;}
.smack-left .head-left{width:0%}
.head-right{
position: absolute;
width: 50%;
height: 100%;
right:0;
}
.smack-right .head-right{width:0%;}
.smack-left .head-right{width:100%;}
.smack-left{
-webkit-animation-name: wobble-left;
animation-name: wobble-left;
}
@keyframes wobble-left {
from {transform: none;}
15% {transform: rotate3d(0, 0, 1, -15deg);}
30% {transform: rotate3d(0, 0, 1, 10deg); }
45% {transform: rotate3d(0, 0, 1, -10deg);}
60% {transform: rotate3d(0, 0, 1, 5deg);}
75% {transform: rotate3d(0, 0, 1, -1deg);}
to {transform: none;}
}
.smack-right{
-webkit-animation-name: wobble-right;
animation-name: wobble-right;
}
@keyframes wobble-right {
from {transform: none;}
15% {transform: rotate3d(0, 0, 1, 15deg);}
30% {transform: rotate3d(0, 0, 1, -10deg); }
45% {transform: rotate3d(0, 0, 1, 10deg);}
60% {transform: rotate3d(0, 0, 1, -5deg);}
75% {transform: rotate3d(0, 0, 1, 1deg);}
to {transform: none;}
}
JAVASCRIPT
var punch = $("#punch")[0];
$(".head-right").hover(function () {
punch.play();
$('.head').addClass("smack-left");
setTimeout(function () {
$('.head').removeClass("smack-left");
}, 800);
});
$(".head-left").hover(function () {
punch.play();
$('.head').addClass("smack-right");
setTimeout(function () {
$('.head').removeClass("smack-right");
}, 800);
});
2 Responses