Animation
Moving stuff with jQuery
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…
Loading...