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!

Pulsating Animation CSS Links

This tutorial will show you how to make a pulsating links without using script.aculo.us or other JS animation libraries. This is only a small thing that CSS can achieve but for other animations like Slide Left etc. then use these libraries only.

By the way if you have any problem during the tutorial you can drop by our Google Group and ask me or the others. You may also download the necessary files, so that you'll follow better.

Let us start with the HTML of the links, this is very basic -

<ul class="links">
<li><a href="#" title="Sample Link">Sample Link</a></li>

<li><a href="#" title="Sample Link">Sample Link</a></li>

<li><a href="#" title="Sample Link">Sample Link</a></li>

<li><a href="#" title="Sample Link">Sample Link</a></li>

<li><a href="#" title="Sample Link">Sample Link</a></li>

</ul>

Also in the head you'll have to include a link to the required CSS file -

<link rel="stylesheet" href="res/ui.css" type="text/css" media="screen"/>

The CSS is very normal too, quite similar to the A List Apart Article on LI Drop Downs. -

ul.links{
list-style: none;
padding: 0;

}
ul.links li a{
display: block;
width: 200px;
height: 10px;
border-left: 6px solid #1958b7;
border-right: 10px solid #2175bc;
background: #2175bc;
padding: 10px 20px;
color: white;
text-decoration: none;
font: 12px sans-serif;
}

ul.links li a:hover{
border-right: 10px solid #508fc4;
background: url('background.gif');
}

This will look something like this -


The actual pulsating effect is caused by the 'background.gif' that will be an animated GIF that has a color-fade between 2 colors. Once we have made it and put it in the /res folder, everything will function as required.

Let us start making it. We'll make a 20X20 px photoshop file. We'll have 2 layers in it one filled with the color #2175bc(dark) and the other layer with #2586d7(light).


Now we switch to ImageReady. We'll be making a simple animation, in which we'll vary the opacity of the light frame from 0% to 100% (in 10 frames) and the back to 0% in 10 frames.


On the top right corner of the layers window, you'll find the option to change the opacity. Remember you have to change the opacity of the the "Light" layer and let the dark layer remain the same.

Start with 0% increment by 10% till it becomes 100% and then back to 0%. Like 0,10,20,30...100,90,80...20,10,0. Also remember to make a new frame for each opacity. The button that'll allow you to make the new frame is located at the toolbar of the Animation window in ImageReady.


Save it as background.gif and you are done. If you wish you can download the HTML, CSS, GIF and the PSD Source file from the BitPixels Forums. You can ask for an help or give suggestions in the forum too. Don't forget to drop by.