How to Create Simple JavaScript Fade Effect Animation?

How to Create Simple JavaScript Fade Effect Animation?

11:47 ص

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

    Jack Isaac

    شاب أردني عمري 16 سنة أحب كل جديد في عالم الانترنت من مواقع وبرامج واحب التدوين ودائما ابحث عن الجديد لتطوير مهاراتي في مختلف الميادين التي تعجبني لكي انقل لكم وانا مدون واعمل فى مجال التدوين منذ فترة واحب معرفة الجديد والتعرف على الصدقاء .

    شارك المقالة

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

    الاشتراك في: تعليقات الرسالة (Atom)