How to Create Simple JavaScript Fade Effect Animation?


Now a days most of the websites or blogs are using image slideshow or animation on their pages using JavaScript codes. Such image animations make websites more attractive looking and smart. Here I have placed codes for creating a simple JavaScript fade effect animation. It may help you a lot.

Code for Creating Simple JavaScript Fade Effect Animation


Just copy and paste the code below where you want to place slideshow and change the location of the images.

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?
load=effects"></script>

<script type="text/javascript">

function ShowEffect(element){
new Effect.Appear(element,
{duration:1, from:0, to:1.0});
}
function FadeEffect(element){
new Effect.Fade(element,
{duration:1, from:1.0, to:0});
}

var i = 0;
var path = new Array();

// LIST OF IMAGES
path[0] = "/image_1.gif";
path[1] = "/image_2.gif";
path[2] = "/image_3.gif";

function swapImage_0()
{
document.slide.src = path[i];
if(i < path.length - 1) i++; else i = 0;

setTimeout("FadeEffect('hideshow')",4000);

setTimeout("ShowEffect('hideshow')",5000);

setTimeout("swapImage_0()",5000);


}
window.onload=swapImage_0;

</script>

<div id="hideshow">

<img height="200" name="slide" src="/image_1.gif" width="400" />

</div>



You Might also view the following Related Posts

    0 Response to "How to Create Simple JavaScript Fade Effect Animation?"

    Post a Comment