JS Animation - Pulsate DIV Elements Tutorial [Pt. 2]

As promised here is the second part of the JS Animation series. If you missed out on the first one, it was JS Animation - Fade/Appear DIV Elements Tutorial [Pt. 1]. In this tutorial we'll Pulsate DIV element using JS and no other libraries.

If you have any problem during the tutorial I suggest you drop by our forum, I also suggest you download the necessary files so that you can understand everything better while it is happening.

I hope you remember the setOpacity() function that we wrote last time. It remains the same. For those who've forgotten, here it is again -

function setOpacity(domId, val) {
 obj = document.getElementById(domId);
 obj.style.MozOpacity = val;
 obj.style.opacity = val/10;
 obj.style.filter = 'alpha(opacity=' + val*10 + ')';
};

Now for some pulsating. When a DIV elements pulsates, we basically make it fade and then appear very fast but never actually hide. It is an effect that is used to bring attention to that element.

What we'll be doing for our pulsation function is -

1. Ask for the domID of the div and the number of times it needs to pulsate.
2. Get the DOM Element and check if it is visible or not.
3. If the number of pulses isn't given, then set it to a default 4.
4. Set the variable alpa to 10, and ch to -1.
5. ch, will be the variable that'll determine the rate of change of the opacity of the DIV.
6. We'll multiply times by 2
7. Now we'll make an internal function p(), this'll do the actual animation
8. Rest of it is explained in the code with comments

function pulsate(domId, times){
 obj = document.getElementById(domId); //Get the Element
 if(obj.style.display == "none") return false; //Return false if the element is hidden
 if(!times) times = 4; //If the user doesnt specify the no. of times he/she want pulsation
 //Add a default value of 4.
 var alpha = 10; //Set the initial value of alpha to 10 (Opaque)
 var ch = -1; //The rate of change of the opacity
 //Currently negative, as first it'll fade
 times *= 2; //Multiply the 'times' given my user by 2
 function p(){ //Internal function
  alpha += ch;
  /*Change the alpha according to the ch
  variable that could be positive or negative*/
  setOpacity(domId, alpha); //Set the opacity of our element to the specified alpha
  if((alpha < 0 || alpha > 10) && times > 0){
   /*If the alpha has gone out of range and times
   and it hasnt pulsated enought number of times...*/
   times--; //Decrement times
   if(ch<0){ //If ch is +ve make it -ve
    ch = 1;
   }else{//If ch is -ve make it +ve
    ch = -1;

   }
  }
  if(times > 0 ) setTimeout(p, 10);

 };
 setTimeout(p, 10); //This is where we call the f() function for the first time
};

I hope you get it. If you have any problem, drop by on the Google Group, and download the necessary files.

JS Animation - Fade/Appear DIV Elements Tutorial [Pt. 1]

I was thinking of doing a series of tutorials on the different effects that you can code and apply on DIV elements, without the use of any library. Today we'll start of with a very basic effect of toggling the visibility of the DIV - fade and Appear.

If you have any problem during the tutorial I suggest you drop by our forum, I also suggest you download the necessary files so that you can understand everything better while it is happening.

To do any of the above animations, we'll have to change the opacity of the DIV element. We write the following function to change the opacity successfully in all browsers -

function setOpacity(domId, val) {
obj = document.getElementById(domId);
obj.style.MozOpacity = val;
obj.style.opacity = val/10;
obj.style.filter = 'alpha(opacity=' + val*10 + ')';

};

So we first ask for the domId of the element, then get that element by Id and change its style to get the desired opacity. Remember the val can range only between 0-10. Now for the actual animation.

Fade
To fade the object we first check whether or not that element is already hidden (if it is we return false). We make a variable alpha with value of 10, and a also a function f(), inside the function fade(domID). We call this function f(), from inside itself after every 100 milliseconds till alpha becomes 0, and once the alpha is 0, and we can't see it, we hide the element.

function fade(domId){
obj = document.getElementById(domId); //Get the Element

 if(obj.style.display == "none") return false; //Return false if the element is already hidden

 var alpha = 10; //Set the initial value of alpha to 10 (Opaque)
 function f(){ //Internal function

  alpha--; //Decrement the alpha value
  setOpacity(domId, alpha); //Set the opacity of our element to the specified alpha

  if(alpha > -1){ //If alpha is still bigger than -1 then..
   setTimeout(f, 100); //..then call the function again after 100 milliseconds

  }else{ //otherwise..
   obj.style.display = 'none'; //..otherwise now that we cant see the element anyways, hide it

  }
}
setTimeout(f, 100); //This is where we call the f() function for the first time

};

Thats pretty much it. Now to fade any div all you need to do it fade('divId'); and you'll get beautiful animation on your page.


Appear
To fade the object we first check whether or not that element is already being displayed (if it is we return false). Then we un-hide the element and then start the animation. We make a variable alpha with value of 0, and a also a function a(), inside the function appear(domID). We call this function a(), from inside itself after every 100 milliseconds till alpha becomes 10.

function appear(domId){
obj = document.getElementById(domId); //Get the element

 if(obj.style.display != "none") return false; //Return if it is already being displayed

 obj.style.display = ''; //Un-hide the object before its animation
 var alpha = 0; //Set the initial value of alpha to 0 (invisible)

 function a(){ //Internal function
  alpha++; //Increment alpha

  setOpacity(domId, alpha); //Set the opacity of our element to the specified alpha
  if(alpha < 11)setTimeout(a, 100);

/*Till alpha is 10, keep calling the
a() function after 100 milliseconds */
}
setTimeout(a, 100); //This is where we call the a() function for the first time

};

Done! Now you have your fade and appear functions ready to add animation on your page. You can download the files from the Bit Pixels' Forums. You can also drop by the forum if you have any queries, suggestions or just to say Hi!