Animating with Javascript Fish Tank

The contents of this article may be out of date. It has been archived and will no longer be updated, comments are closed and the page is provided for reference purposes only.

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>

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() {

// 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'];
      if(fish[i][‘s’] == 0) {fish[i]['t']+=tmp;} else {fish[i]['t']-=tmp;}

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...

Wow thanks for that!  I am going to put that on my website! You will have to let me know how it looks!

- Aquariums Rock

Wow Nice tips and tutorials. Thanks for the coding, it helps me a lot in designing.

- Designer Saree Collections

This piece was a lifejacket that saved me from drowning.

- Lore

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.