Thief

by Marc Malignan

HTML

<header>Based on a <a href="https://dribbble.com/shots/146249-Thief?list=searches&tag=thief&offset=41" target="_blank">Dribble</a> by David M. Smith</header>

<div id="thief">
    <div class="hat"></div>
    <div class="head">
        <div class="nose"></div>
        <div class="eye">
            <div class="pupil"></div>
        </div>
        <div class="ear"></div>
    </div>
    <div class="coat"></div>
</div>

SCSS

/* ----- SASS VARIABLES ----- */
$primary: #111;
$secondary: ivory;
$shadow: #222;

/* ----- MIXINS ----- */
@mixin size($w, $h:null) {
    width: $w;
    @if $h==null { height: $w; }
    @else { height: $h; }
}
@mixin radial-grad($dir, $c1, $c2) {
    background: -webkit-radial-gradient($dir, $c1, $c2);
    background: -moz-radial-gradient($dir, $c1, $c2);
    background: -ms-radial-gradient($dir, $c1, $c2);
    background: radial-gradient($dir, $c1, $c2);
}
@mixin transform-origin($origin) {
	-webkit-transform-origin: $origin;
	-moz-transform-origin: $origin;
	-ms-transform-origin: $origin;
	transform-origin: $origin;
}
@mixin rotate($deg) {
	-webkit-transform: rotate($deg);
	-moz-transform: rotate($deg);
	-ms-transform: rotate($deg);
	transform: rotate($deg);
}
@mixin skew($x, $y) {
	-webkit-transform: skew($x, $y);
	-moz-transform: skew($x, $y);
	-ms-transform: skew($x, $y);
	transform: skew($x, $y);
}
@mixin rotateSkew($deg, $x, $y) {
	-webkit-transform: rotate($deg) skew($x, $y);
	-moz-transform: rotate($deg) skew($x, $y);
	-ms-transform: rotate($deg) skew($x, $y);
	transform: rotate($deg) skew($x, $y);
}
@mixin shadow() {
    box-shadow: 20px 10px 0 $shadow;
}

/* ----- LAYOUT ----- */
html, body {
    height: 100%
}
body {
    margin: 0;
    @include radial-grad(top left, #444, #222);
}
header {
    position: fixed;
    top: 10px;
    width: 100%;
    text-align: center;
    color: #666;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;
    text-shadow: 0 1px 0 $shadow;
}
header a {
    color: slategray;
}

/* ----- THIEF ----- */
#thief {
    position: fixed;
    bottom:0; left:50%;
    margin-left: -120px;
}

#thief .head {
    position: absolute;
    left: 25px; bottom: 65px;
    @include size(210px, 115px);
    background: $primary;
    @include shadow();
}
#thief .nose {
    position: absolute;
    left: 0; bottom: 10px;
    @include size(100px, 50px);
    background: $primary;
    @include transform-origin(bottom...

JavaScript

function waitBlink() {
    var waitTime = Math.floor((Math.random() * 4000) + 500);
    setTimeout(blink, waitTime);
}
function blink() {
    $('#thief .eye')
        .animate({height: '0'}, 150)
        .animate({height: '27px'}, 150);
    waitBlink();
}

function waitLookAround() {
    var waitTime = Math.floor((Math.random() * 4000) + 1000);
    setTimeout(lookAround, waitTime);
}
function lookAround() {
    var pupil = $('#thief .eye .pupil');
    if(pupil.hasClass('left')) {
        pupil.removeClass('left');
        if(Math.random() > 0.5) pupil.addClass('right');
    }
    else if(pupil.hasClass('right')) {
        pupil.removeClass('right');
        if(Math.random() > 0.5) pupil.addClass('left');
    }
    else {
        if(Math.random() > 0.5) pupil.addClass('right');
        else pupil.addClass('left');
    }
    waitLookAround();
}

waitBlink();
waitLookAround();