Animating with Javascript Fish Tank

Using Javascript to create some movement on a page can be accomplished with a bit of maths. The advantage of using Javascript for very simple animations is that a higher proportion of users have Javascript available then have Flash installed.

The idea is to create a goldfish tank with some fish inside that bob up and down in the tank.

The markup is simple we create a div for our fish tank that contains three more div’s for our fish.

<div id="tank">
  <div id="gold_fish1" class="gold_fish"></div>
  <div id="gold_fish2" class="gold_fish"></div>
  <div id="gold_fish3" class="gold_fish"></div>
</div>

Above is the end result. You should see the three fish bobbing up and down in the tank.

We use CSS to style our div’s with a background image of a fish and set the position of the fish div’s absolutely relative to the containing tank div.

div#tank {
  background-color: #85dcff;
  position: relative;
  height: 180px;
  width: 560px;
  margin: 0 auto;
} 
div#tank div.gold_fish {
  position: absolute;
  width: 152px;
  height: 91px;
  background: url(fish.gif) 0 0 no-repeat;
} 
#gold_fish1 {
  left: 20px;
  top: 28px;
} 
#gold_fish2 {
  left: 200px;
  top: 18px;
} 
#gold_fish3 {
  left: 380px;
  top: 18px;
}

The complicated bit finally is the Javascript that contains a bit of maths.

// create an array for our fish tank
var fish=new Array();
fish[1]=new Array(); fish[1][‘s’]=0; fish[1][‘e’]=3; fish[1][‘t’]=Math.floor(86*Math.random());
fish[2]=new Array(); fish[2][‘s’]=0; fish[2][‘e’]=8; fish[2][‘t’]=Math.floor(86*Math.random());
fish[3]=new Array(); fish[3][‘s’]=0; fish[3][‘e’]=5; fish[3][‘t’]=Math.floor(86*Math.random());

// standard function to manipulate div by id
function $(id) {
  return document.getElementById(id);
}

// Initiate the script (could alternatively use onload)
function init() {
  window.int_float=setInterval("float();",100);
}

// create a function to animate our gold fish
function float() {
  if($('gold_fish3')) {
    for(i=1;i<=3;i++) {
      if(fish[i]['t'] < fish[i]['e'] && fish[i]['s'] == 1) {
        fish[i]['s'] = 0;
      }
      else if(fish[i][‘t’] >46+fish[i][‘e’]  && fish[i][‘s’] == 0) {
        fish[i]['s'] = 1;
      } else if(Math.random()>0.95) {
        fish[i]['s'] = 1-fish[i]['s'];
      }
      tmp=.5;
      if(fish[i][‘s’] == 0) {fish[i]['t']+=tmp;} else {fish[i]['t']-=tmp;}
      $(‘gold_fish’+i).style.top=fish[i][‘t’]+‘px’;
      $(‘gold_fish’+i).style.left=(i*180+Math.cos(i)*3-160)+‘px’
    }
  }
}

Finally with add this line to the bottom of our page to initiate the script.

<script type="text/javascript">init();</script>

Have a go yourself and post a tweet if you create something using this technique. It does not have to be fish you could use balloons, sea horses or anything else that floats.

This article was posted on 26 February 2010 in Code, Javascript

What you have had to say about all this...

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.