randomor/tinypeeps.css

## tinypeeps.css
.tinypeep.top{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* IE 9 */
    -moz-transform:rotate(180deg); /* Firefox */
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
    -o-transform:rotate(180deg); /* Opera */
    position: fixed;
    top: -40px;
    transition: all 0.3s;
    -moz-transition: all 0.3s; /* Firefox 4 */
    -webkit-transition: all 0.3s; /* Safari and Chrome */
    -o-transition: all 0.3s; /* Opera */
}

.tinypeep.top.out{
    top: -20px;
    transition: all 0.1s;
    -moz-transition: all 0.1s; /* Firefox 4 */
    -webkit-transition: all 0.1s; /* Safari and Chrome */
    -o-transition: all 0.1s; /* Opera */
}
.tinypeep.top.hide{
    top: -80px;
}


## tinypeeps.html
<body>
I heard there are some tinypeeps living around here...
</body>

## tinypeeps.js
     //tinypeeps are peeps who live inside the browser and who like to get out when there is nobody around.
     //see results at: http://jsfiddle.net/ZNHLG/
     var counter = 0;
     var bodyWidth = $("body").width();
     var justMoved = false;
     var update = function(){
         if (justMoved == true){return};
         if (counter < 15) {
             //add more peeps
                //add a random bunch of peeps
                var peepNumber = Math.floor(Math.random()*6);
                var i=0;
                for(i=0; i<peepNumber; i++){
                    var leftPosition = Math.floor(Math.random()*bodyWidth);
                    //modify the picture source here
                    $("<div class='tinypeep top' style='left: "+ leftPosition +"px'><img src='/img/tinypeep.png' alt='Hi!' /></div>").prependTo("body").delay(3000, "myQueue").queue("myQueue", function(){
                        $(this).addClass("out");
                        }).dequeue("myQueue");
                    counter++;
                }
             setTimeout(update, 4000);
         }else{
             //stop adding peeps, maybe do something else fun and more active, since they know we are not there
         }
     }

     setTimeout(update, 5000);

     var timeout;
     $(document).mousemove(function(e){
         if (counter){
             $(".tinypeep").addClass("hide").delay(1000, "myQueue").queue("myQueue", function(){
  $(this).remove()}).dequeue("myQueue");
             counter = 0;
         };
         justMoved = true;
         clearTimeout(timeout);
         timeout = setTimeout(function(){justMoved=false;update();}, 5000);
   });
	.tinypeep.top{
	transform:rotate(180deg);
	-ms-transform:rotate(180deg); /* IE 9 */
	-moz-transform:rotate(180deg); /* Firefox */
	-webkit-transform:rotate(180deg); /* Safari and Chrome */
	-o-transform:rotate(180deg); /* Opera */
	position: fixed;
	top: -40px;
	transition: all 0.3s;
	-moz-transition: all 0.3s; /* Firefox 4 */
	-webkit-transition: all 0.3s; /* Safari and Chrome */
	-o-transition: all 0.3s; /* Opera */
	}

	.tinypeep.top.out{
	top: -20px;
	transition: all 0.1s;
	-moz-transition: all 0.1s; /* Firefox 4 */
	-webkit-transition: all 0.1s; /* Safari and Chrome */
	-o-transition: all 0.1s; /* Opera */
	}
	.tinypeep.top.hide{
	top: -80px;
	}
	<body>
	I heard there are some tinypeeps living around here...
	</body>
	//tinypeeps are peeps who live inside the browser and who like to get out when there is nobody around.
	//see results at: http://jsfiddle.net/ZNHLG/
	var counter = 0;
	var bodyWidth = $("body").width();
	var justMoved = false;
	var update = function(){
	if (justMoved == true){return};
	if (counter < 15) {
	//add more peeps
	//add a random bunch of peeps
	var peepNumber = Math.floor(Math.random()*6);
	var i=0;
	for(i=0; i<peepNumber; i++){
	var leftPosition = Math.floor(Math.random()*bodyWidth);
	//modify the picture source here
	$("<div class='tinypeep top' style='left: "+ leftPosition +"px'><img src='/img/tinypeep.png' alt='Hi!' /></div>").prependTo("body").delay(3000, "myQueue").queue("myQueue", function(){
	$(this).addClass("out");
	}).dequeue("myQueue");
	counter++;
	}
	setTimeout(update, 4000);
	}else{
	//stop adding peeps, maybe do something else fun and more active, since they know we are not there
	}
	}

	setTimeout(update, 5000);

	var timeout;
	$(document).mousemove(function(e){
	if (counter){
	$(".tinypeep").addClass("hide").delay(1000, "myQueue").queue("myQueue", function(){
	$(this).remove()}).dequeue("myQueue");
	counter = 0;
	};
	justMoved = true;
	clearTimeout(timeout);
	timeout = setTimeout(function(){justMoved=false;update();}, 5000);
	});