Animation

Animation Demo

You can create something like this but with your own theme

Make The Bubbles Move

You’ll need a function that knows how to move one bubble:

function moveBubble() {

  // code to move a single bubble goes here

}

And you’ll also need to run the function for every bubble:

var allBubbles = $('.bubble');
allBubbles.each( moveBubble );

Identifying a Single Bubble

function moveBubble() {

  var bubble = $(this);

}
 
 

New Bubble Position

function moveBubble() {

var bubble = $(this);

var leftSpace = Math.random() * container.width();
var topSpace = Math.random() * container.height();

}
 
 
 
 

New Bubble CSS

function moveBubble() {

var bubble = $(this);

var leftSpace = Math.random() * container.width();
var topSpace = Math.random() * container.height();

var newCSS = {
  'left': leftSpace,
  'top': topSpace
}

bubble.animate( newCSS, 5000 );

}
 
 
 
 
 
 
 
 
 
 
 
 

Your bubbles should now move when you refresh.

Animating Size

Add a new size to your animation:

var leftSpace = Math.random() * container.width();
var topSpace = Math.random() * container.height();
var size = Math.random() * 200;

var newCSS = {
  'left': leftSpace,
  'top': topSpace,
  'width': size,
  'height': size
}
 
 
 
 
 
 

Your bubbles should now move and change size.

Animation time

var animationTime = Math.random() * 10000 + 5000;
bubble.animate( newCSS, animationTime );

Floating forever

bubble.animate( newCSS, animationTime, moveBubble );

Challenge: Themed Animations

Give your animations a personal twist.

Animations: Complete

Woohoo, animations! But what about interactions…

Take me to the next chapter!