The friend I’ve integrated the design for (http://www.stratewaterdesigners.com) recently asked me to add a fish that would move on the background of the website randomly. Even if I don’t really like JQuery, because it is the default WordPress framework I made with it.

So, here are the problems I’ve been confronted to :

How to make the fish move randomly?

To achieve that, I have used the JQuery method animate that I’ve called in an endless recursion to make the fish move 100px to the left or to the right and adding a random multiplicative to the top position of the fish

How to make the fish go under all the elements of the page?

To do that, I’ve used the CSS properrty z-index, it allows us to put one div in front of an other.But be careful, it only works for positioned elements (position:relative|absolute). So I’ve set all the positioned element of my page with a z-index of 10 and assigned my fish a z-index of 1.

How to make the fish go the other way around?

This what took me the longest : First, I check that the fish is at the right position, then I call the animate function to change at the same time three CSS values : ‘left’, ‘background-position’,'width’ to make the fish kind of rotate :p. Also, to avoid any loading time I’ve used a css trick : an image with my two fishes (the fish looking to the left and the one looking to the right) that is two times bigger than its container, so to swap between the two, I just have to change the background image position !

So now, the script : ( demo )

	var $j = jQuery.noConflict();
	$j(function(){
		var maurice = $j('< div>< /div>');
		var topPos = 200+Math.floor(Math.random() * (document.height-200));
		maurice.css({'position':'absolute','left':'-100px','top':topPos,'width':'100px','height':'70px','background':'url(/img/fish.png) no-repeat','z-index':'1'});
		var replaceleft = function(){
			maurice.css({'backgroundPosition':'-50px 0'});
			maurice.animate({'backgroundPosition':'0px 0%', 'width':'100px', 'left':0},200, "swing", callback);
		}
		var swapleft = function(){
			maurice.animate({'backgroundPosition':'-50px -70px', 'width':0, 'left':50},200, "swing", replaceleft);
		}
		var moveLeft = function(){
			var topMove = 50-Math.floor(Math.random() * 100);
			var newTopPos = parseInt(maurice.css('top'))+topMove;
			while(newTopPos<0){
				topMove = Math.floor(Math.random() * 100);
 				newTopPos = parseInt(maurice.css('top'))+topMove;
 			}
			while(newTopPos>document.height){
				topMove = 0-Math.floor(Math.random() * 100);
				newTopPos = parseInt(maurice.css('top'))+topMove;
			}
			if(100 < parseInt(maurice.css('left')))	maurice.animate({'left':parseInt(maurice.css('left'))-100,'top':newTopPos},1000, "swing", moveLeft);
			else maurice.animate({'left':0},500, "swing", swapleft);
		}
		var replacefish = function(){
			maurice.css({'backgroundPosition':'-50px -70px'});
			maurice.animate({'backgroundPosition':'0px 100%', 'width':'100px', 'left':screen.width-140},200, "swing", moveLeft);
		}
		var swapfish = function(){
			maurice.animate({'backgroundPosition':'-50px 0', 'width':0, 'left':screen.width-90},200, "swing", replacefish);
		}
		var callback = function(){
			var topMove = 50-Math.floor(Math.random() * 100);
			var newTopPos = parseInt(maurice.css('top'))+topMove;

			while(newTopPos<0){
 				topMove = Math.floor(Math.random() * 100);
 				newTopPos = parseInt(maurice.css('top'))+topMove;
 			}
			while(newTopPos>document.height){
				topMove = 0-Math.floor(Math.random() * 100);
				newTopPos = parseInt(maurice.css('top'))+topMove;
			}
			if(parseInt(maurice.css('left'))