Cursor monster

by ivar vandenbosch

HTML

<script src="http://fonts.googleapis.com/css?family=Jolly+Lodger"></script>
<!--
    author: @simurai
    info: http://simurai.com/post/4719656959/cursor-monster
-->

	<header>
      <h2>Make sure your sound is ON!</h2>
	</header>    
        
	<div id="wrapper" class="barfing">
		
		<div id="monster">
			<div class="eye"><div class="lid"></div></div>
			<div class="eye"><div class="lid"></div></div>
			<div id="mouth"></div>
		</div>
				
	</div>
	
	
	<!-- Footer --------------------------------------- -->
    
    <div id="footer">
            
        <h1>Feed the Cursor Monster</h1>
                 
        </div>
      
	<!--Audio-->
	<audio id="audio-ohh" preload="preload"><source src="http://monster.simurai.com/audio/ohh.ogg" /><source src="http://monster.simurai.com/audio/ohh.mp3" /><source src="http://monster.simurai.com/audio/ohh.wav" /></audio>
	<audio id="audio-snap" preload="preload"><source src="http://monster.simurai.com/audio/snap.ogg" /><source src="http://monster.simurai.com/audio/snap.mp3" /><source src="http://monster.simurai.com/audio/snap.wav" /></audio>

CSS

body { font-family: 'Jolly Lodger', cursive; }
h1 { color: #483D8B;}
h2 { color: #777;}
/* The Cursor Monster by simurai */


/* ---------------------------- wrapper ---------------------------- */

#wrapper {
	z-index: 11;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: -webkit-transform .3s cubic-bezier(.1, 0, 0, 1);
	   -moz-transition:    -moz-transform .3s cubic-bezier(.1, 0, 0, 1);
		 -o-transition: 	 -o-transform .3s cubic-bezier(.1, 0, 0, 1);
			transition: 		transform .3s cubic-bezier(.1, 0, 0, 1);
}
#wrapper:after { /* shadow */
	content: "";
	z-index: -1;
	position: absolute;
	width: 100px; height: 100px;
	margin-left: -50px;
	border-radius: 50px;
	
	-webkit-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;
	   -moz-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;
		 -o-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;
			box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;
	
	-webkit-transform: translateY(-160px) scale(1.4, .5);
	   -moz-transform: translate( -50px, -160px) scale(1.2, .5);
		 -o-transform: translateY(-160px) scale(1.4, .5);
			transform: translateY(-160px) scale(1.4, .5);
}

/* ---------------------------- monster ---------------------------- */

#monster {
	z-index: 1;
	position: relative;
	width: 200px;
	height: 240px;
	margin: -120px 0 0 -100px;
	border-radius: 100px 100px 50px 50px / 160px 160px 80px 80px;
	
	text-align: center;
	
	background-color: #DC143C
	
	background-image: -webkit-gradient(radial, 50% 8%, 0, 50% 40%, 120, 
						color-stop( 0, rgba(255,255,255,.8) ),
						color-stop(.8, rgba(255,255,255, 0) ),
						color-stop(.8, rgba(0,0,0, 0) ), 
						color-stop( 1, rgba(0,0,0,.33) )), 
						url(noise.png);
	background-image: -moz-radial-gradient(50% 21% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png);
	background-image:   -o-radial-gradient(50% 21% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%,...

JavaScript

// Cursor Monster by simurai


$(document).ready(function() {	
	
	var status = "sleep";
	var mouthOpen = false;
	var count = 0;
		
	
	// on mouse move
	
	$(document).mousemove(function(e){		
		
		
		var docW = $(window).width();
		var docH = $(window).height();
		
		var diffX = (docW/2) - e.clientX;
		var diffY = (docH/2)-100 - e.clientY;
		
		var dist = distance(docW/2,docH/2, e.clientX, e.clientY);
		var distM = distance(docW/2,(docH/2)+60, e.clientX, e.clientY);
		
		
		if (status == "sleep") {
			
			if(distM < 200) {
				$('#wrapper').removeClass("sleep").addClass("hungry");
				status = "hungry";
				playAudio("audio-ohh");
			}
			
			
		} else if (status == "hungry") {
		
			// eye		
							
			var eye_background = Math.floor( diffX /-30 ) +'px '+ Math.floor( diffY /-30 ) +'px';		
			var eye_translate =	Math.floor(diffX/-50 )+'px, '+ Math.floor(diffY/-100 )+'px';	
			$(".eye").css({ 			"background-position":eye_background, "-webkit-transform":'translate3d('+eye_translate+',0)', 			"-moz-transform":'translate('+eye_translate+')' });
			$(".eye:first-child").css({	"background-position":eye_background, "-webkit-transform":'translate3d('+eye_translate+',0) scale(.6)', "-moz-transform":'translate('+eye_translate+') scale(.6)' });
			
			
			// eye lid
			
			var eye_lid_p = 100+Math.floor( diffY /-20 );
			var eye_lid = '-webkit-gradient(radial, 50% '+ eye_lid_p +'%, 20, 50% '+ eye_lid_p +'%, 50, color-stop(.5, rgba(0,0,0,0)), color-stop(.6, rgba(0,0,0,1)))';
			$(".lid").css({ "-webkit-mask-image":eye_lid });
			
			
			// mouth
			
			if (distM > 200) {
				if(mouthOpen) {
					mouthOpen = false;
					$('#mouth').addClass("out");
					var mouth_height = "20px";
					count = 0;
				}
			} else {				
				var mouth_height = 80 - Math.floor(distM /3)+'px';
				if(!mouthOpen) {
					mouthOpen = true;
					$('#mouth').removeClass("out");
				}
			}
			var mouth_transform = Math.floor(diffX/-80 )+'px, '+ Math.floor(diffY/-80 )+'px';
			$("#mouth").css({...