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

• Image Slideshow with Navigation Buttons Using JavaScript
• How to Create JavaScript Image Slideshow with LInks
• How to write a program in C using for Loop?
• How To Create Simple Image Slideshow Using JavaScript ?
• How to Create Simple JavaScript Fade Effect Animation?
• Simple JavaScript Fade Effect Animation Using Jquery
• How to add Feedburner's icon and e-mail subscription box?
• How to Optimize Images for Web Using Photoshop and Image Ready?

شارك المقال :

Tweet

✚

مقالات ذات صلة