Hello Readers!

In this blog post, I am going to tell you about slideshows but with a special effect.

Slideshow is an information which is displayed in slides. The information may be images, text, chart etc. The slides change after a certain time interval which is mentioned beforehand. Here I am displaying certain slides. These slides have an image in them. The slides will change but with a blurry effect. That is, the previous image will blur and disappear and the coming image will blur and appear clearly.

Here is the sample code for the following:

HTML:

HTML is created very easy. There are eight slides in total. Each slide consists of image in div tag. If you need more slides, you can easily add here.

<div id="stage4">
    <a href="1.jpg"><img src="images/1.jpg" width="360" height="270"></a>
	<a href="2.jpg"><img src="images/2.jpg" width="360" height="270"></a>
	<a href="3.jpg"><img src="images/3.jpg" width="360" height="270"></a>
	<a href="4.jpg"><img src="images/4.jpg" width="360" height="270"></a>
	<a href="5.jpg"><img src="images/5.jpg" width="360" height="270"></a>
	<a href="6.jpg"><img src="images/6.jpg" width="360" height="270"></a>
	<a href="7.jpg"><img src="images/7.jpg" width="360" height="270"></a>
	<a href="8.jpg"><img src="images/8.jpg" width="360" height="270"></a>
</div>

CSS:

Here, we have defined the CSS style for fade slider. This simple code can be used to set up a simple slideshow with fade transition. Each image is displayed for four seconds (animation-delay) and then fades out after over one second (animation-duration) .

<style type="text/css"> 
#stage4 {
margin: 1em auto;
    	width: 382px;
    	height: 292px;
  }

#stage4 a {
   	 position: absolute;
  }
#stage4 a img {
   	padding: 10px;
    	border: 1px solid #ccc;
    	background: #fff;
    	height: 270px;
    	width: 360px;
    	display: block;
}
#stage4 a:nth-of-type(1) {
 -webkit-animation-name: fader; /* Safari, Chrome and Opera > 12.1 */
 -webkit-animation-delay: 4s;
 -webkit-animation-duration: 1s;
 -moz-animation-name: fader; /* Firefox */
 -moz-animation-delay: 4s;
 -moz-animation-duration: 1s; 
 -ms-animation-name: fader;/* Internet Explorer */
 -ms-animation-delay: 4s;
 -ms-animation-duration: 1s;
 z-index: 20;
  }
  #stage4 a:nth-of-type(2) { z-index: 10; }
  #stage4 a:nth-of-type(n+3) { display: none; }

  @-webkit-keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }
  @-moz-keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }
  @-ms-keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

</style>

JavaScript:

The code below is the addEventListener method, an event handler to the specified element execute when the Dom(DOMContentLoaded) is loaded its content. The function  fadeComplete() which stores appendChild(). The appendChild() method appends a node as the last child of a element. Use this method to move an element from one slide to another. The stage variable which stores the div (document.getElementById("stage4"), then store all the elements in arr variable which is inside the div. Create a ‘for loop’ to move the slide in animation i.e. from first child to the last child.

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", function() {

    var fadeComplete = function(e) { 
    	stage.appendChild(arr[0]); 
    };

    var stage = document.getElementById("stage4");
    var arr = stage.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {

      arr[i].addEventListener("webkitAnimationEnd", fadeComplete, false);
      arr[i].addEventListener("animationend", fadeComplete, false);
      arr[i].addEventListener("MSAnimationEnd", fadeComplete, false);
    }

  }, false);

</script>