How to create impressive animations in jQuery with .animate()

How to create impressive animations in jQuery with .animate()

Posted by legacye in Home on 08 23rd, 2009 | no responses

I’ve been asked many times over the past month to write more about some of the cool things I’ve been trying out with the jQuery and animation. Earlier this month I started work on a full-scene animation of SpongeBob squarepants (which I hope to show you guys some time soon) but this week I thought I’d play around with space. Part 1 of my animation posts for this month will discuss the above ("jQuery Sparkle") and later I’ll show you how I was able to create a 3D dynamic model of space and the planets using the Canvas element.

jQuery Sparkle was a demo I created to demonstrate how you can easily harness the power of random motion paths, high quality backdrops and a little audio to create a captivating scene that lasts as long as you want it to. One of the great things about JavaScript is that it allows us to dynamically create new elements that we can later change the CSS properties of quite easily. This means that with a little code we can change the top and left positions of any object we create. It’s surprisingly powerful.

I used this technique in my Portfolio demo to animate fighter planes and we’re going to use the same principles in this demo today. First..let’s break down what we are trying to achieve. We want to create a random set of 1-200 pieces of stardust from a small set of images and we then want to animate them on the screen.

How we create this demo isn’t that tricky. First, we define a number of star elements at random positions using some fixed CSS. These images serve as a backdrop to the animations. You can either set the css using inline tags or go all the way with a full stylesheet.

 <img alt="" src="star1.png" style="position: absolute; z-index: 17; top: 276.938px; left: 787.127px;" />  <img alt="" src="star2.png" style="position: absolute; z-index: 18; top: 271.566px; left: 883.533px;" />  <img alt="" src="star3.png" style="position: absolute; z-index: 9; top: 191.709px; left: 129.964px;" /> etc.

Next, before we start adding our dynamic elements, how about we define some functions to generate random X and Y positions for the star-dust elements as well as random speeds to increase how real the effect looks.

//Random point for the X and Y
SparDust.prototype.newPoint = function() {
  this.pointX = this.random(window.innerWidth - 100);
  this.pointY = this.random(350);
  return this;
};

//Define a random speed for an element
SparDust.prototype.newSpeed = function() {
  this.speed = (this.random(10) + 5) * 2100;
  return this;
};

Great. Now that that’s done, how about we define a function to display a star-dust object and also one to make an element fly across the screen?

StarDust.prototype.flyacross = function() {
  var self = this;
  $(this.n).animate({
      "top": this.pointY,
      "left": this.pointX,
  }, this.speed, 'linear', function(){
    self.newSpeed().newPoint().flyacross();
  });
};

//Display a stardust element
 StarDust.prototype.display = function() {
  $(this.n)
   .attr('src', this.f)
   .css('position', 'absolute')
   .css('z-index', this.random(20))
   .css('top', this.pointY)
   .css('left', this.pointX);
  $(document.body).append(this.n);
  return this;
};

And lets also define the function to create a StarDust element

//Create a new stardust element
 var StarDust = function() {
  var self = this;
  this.b = 'http://www.blarnee.com/images/';
  this.s = ['star1.png', 'star2.png', 'star3.png', 'star4.png'];
  this.i = this.s[this.random(this.s.length)];
  this.f = this.b + this.i;
  this.n = document.createElement('img');
  this.newSpeed().newPoint().display().newPoint().flyacross();
};

We’re almost there!. The very last step we need is one to loop across the number of stardust pieces we would like to have in our demo and call the function that creates them:

$(function(){
  // Create all the stardust
  var totalDust = 150;
  var dust = [];
  for (i = 0; i < totalDust; i++){
    dust[i] = new StarDust();
  }
});

And we’re done! :) To make the demo feel even better, I decided to add in some streaming audio thanks to YouTube.com which you can do by creating an embed element and setting the CSS on it to display:none; Would you like to see the final product? Check it out right here.