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>

Intro Posts

How to Create Simple JavaScript Fade Effect Animation?

Code for Creating Simple JavaScript Fade Effect Animation

You Might also view the following Related Posts

أخر الأخبار

بحث هذه المدونة الإلكترونية

تابع المدونة علي مواقع التواصل الاجتماعي

التسميات

الأكثر تصفح