jQuery: scanner effect on a slideshow

An interesting effect that we can achieve with jQuery on a slideshow is the scanner effect. Basically, it's simply a vertical bar that moves from left to right on each slide. The effect is even more interesting if we use an expanding movement on each slide. Let's see how.

We start with the following markup:

<div id="slideshow">
 <div id="slideshow-wrapper">
  <img src="img/1.jpg" alt="Alba tra gli alberi" />
  <img src="img/2.jpg" alt="Natura morta con conchiglia" />
  <img src="img/3.jpg" alt="Natura morta con conchiglia 2" />
  <img src="img/4.jpg" alt="Battigia e conchiglie" />
 </div>
 <div id="slideshow-cursor"></div>
</div>

slideshow-cursor is our bar. We'll use CSS contextual positioning to prepare our layout:

#slideshow {
 width: 600px;
 height: 400px;
 position: relative;
 overflow: hidden;
 border: 5px solid #222;
 border-radius: 5px;
 margin: 2em auto;
}

#slideshow-wrapper {
 width: 600px;
 height: 400px;
 position: relative;
 overflow: hidden;
 background: #bbb;
}

#slideshow-wrapper img {
 height: 400px;
 width: 0px;
 display: none;
}

#slideshow-cursor {
 position: absolute;
 top: 0;
 width: 30px;
 height: 400px;
 left: 0;
 z-index: 1;
 background: #333;
 display: none;
}

Notice how all the images have also a zeroed width. This will allow us to create an expanding effect from left to right. Now jQuery:

var Slider = new function() {


 var slideshow = document.getElementById('slideshow'),
     wrapper = $('#slideshow-wrapper', slideshow),
     images = $('img', wrapper),
     cursor = $('#slideshow-cursor', slideshow),
     timer = null,
     index = -1;
     
 var prepare = function() {
 
  cursor.css('opacity', 0.5);
 
 };
 
 var autoSlide = function() {
 
  timer = setInterval(function() {
  
   index++;
   
   if(index == (images.length -1)) {
   
    index = -1;
   
   }
   
   var img = images.eq(index);
   
   
   img.show()
   .animate({
    width: 600
   }, 1500, function() {
   
    cursor.show().
   animate({
    left: 570
   }, 1500, 
      function() {
      
        $(this).hide().
        css('left', 0);
        
        img.hide().
     css('width', '0px');
      
   });
   
     
   
   
   });
   
   
   
  
  
  }, 3000);
 
 };
 
 this.init = function() {
 
  prepare();
  autoSlide();
 
 };

}();

$(function() {

 Slider.init();

});

The scanner bar and the current image are first revealed: the image will expand in width, while the scanner bar will change its position moving towards right. Once both animations are complete, we reset all the CSS properties involved in the animations and we hide again the elements.

You can see the demo below.

Demo

Live demo

Download

ZIP file