Learn and share. The simplest harmony.

 

Flyout Image Slider Using jQuery & CSS3

Posted on July 25, 2012 and got 8 shouts so far

In this post I’m going to share about how to create an experimental flyout image slider. This image slider is a stack of some images and works by flying out the selected image to the front of images stack. We will use CSS3 transition, animation and transform for this animation and jQuery for helping us maintain click event, CSS transition and animation.

The Image Slider

This image slider doesn’t do slide on displaying image, as I described before it will be flying out the selected image to the front of images stack. So all images will be positioned stacked each other. When user click on of the image, it will be move to the outer left of image stack and move back with rotating effect to the stack and positioned on top of it.

All of the other images in front of the selected image will be move backward smoothly and automatically positioned based on its stack order. Here’s the prototype of images stack :



When user click one of the image it will move to the left and back to the stack :


The HTML & Styling

The HTML structure is very simple, we need two divs for wrapping images and their description. The first div named itemlist and the other named itemdescription. Each of them has children, itemlist will have list of all images and the other will have list of all descriptions.

I’m using some free WordPress theme screenshot for the image, they are : Busby Theme, Gridly Theme, Reco Theme and The Blog Theme.

Busby Gridly
Busby Theme Gridly Theme

As you see on above code each image has an id attribute and description has data-for attribute, this aim to make us easy when changing selected image’s description.

Since all images are stacked each other we need to make their position to absolute and to make each of them visible we ‘ll modify their left value. We’ll also playing with transform scale value to make the stack more beautiful.

#itemdescription {
  position: relative;
  width: 400px;
  margin: 0 auto;
  left: 6em;
  top: 2em;
}
  
  #itemdescription span {
    display: none;
  }

#itemlist {
  display: block;
  width: 400px;
  margin: 3em auto;
  position: relative;
  transform-style: preserve-3d;
}
  
#itemlist img {
  position: absolute;
  cursor: pointer;
  left: 0;
  box-shadow: 0px 15px 50px rgba(0,0,0,0.4);
}
  
  #itemlist img:hover {
    top: -5px;
  }
  
#itemlist img.item-0 {
  z-index: 4;
  transform: scale(1);
}
  
#itemlist img.item-1 {
  z-index: 3;
  left: -80px;
  transform: scale(0.9);
}
  
#itemlist img.item-2 {
  z-index: 2;
  left: -160px;
  transform: scale(0.8);
}
  
#itemlist img.item-3 {
  z-index: 1;
  left: -240px;
  transform: scale(0.7);
}

We need transition property on each image to move them backward smoothly so we also need a separate class with transition property and use them later. We will also create a class named show, this class has an animation keyframe to move the selected image with flyout effect.

.transition {
  transition: 0.5s ease-out;
}
  
.show {
  animation: show 1s linear;
}

@keyframes show{
  25% {
    left: -450px;
  }

  50% {
    z-index: 5;
    left: -500px;
    transform: rotate3d(0,1,0,0deg);
  }

  70% {
    z-index: 5;
    left: -250px;
    transform: rotate3d(0,1,0,180deg);
  }

  100% {
    z-index: 5;
    left: 0px;
    transform: rotate3d(0,1,0,360deg);
  }
}

Here’s our image slider result :


The jQuery

First to do is to traverse and ordering the image list automatically, we will add class name we prepared before to each of them based on their DOM ordering and hide all image description and show the first image description.

//Initiliaze
var itemList, item, className, thisItem, newOrder, itemDesc, desc;

itemList= $('#itemlist');
item= itemList.children('img');

itemDesc= $('#itemdescription');
desc= itemDesc.children('span');

//Add class name for each item
item.each(function(index) {

  className= 'item-' + index;
  $(this).addClass(className).attr('data-order', index);
});

//Show first item description
desc.filter(':first-child').fadeIn();

When the image is being clicked, the image will be added by a CSS class named show to force the image animating, when the animation done we will show its description and hide others and also change its ordering attribute value.

//On clicked fire animation
item.on('click', function() {

  thisItem= $(this);
  thisOrder = parseInt(thisItem.attr('data-order')) - 1;

  thisItem.addClass('show');

  //Reorder item position
  item.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() { 

    thisItem.removeClass().addClass('item-0').attr('data-order', '0');

    //Show selected item description
    desc.hide();
    desc.filter('[data-for=' + thisItem.attr('id') + ']' ).fadeIn('fast');
  });

While the selected image being animated we will move backward the other images in front of the selected image based on its order. We also add class transition to them to move smoothly. Lastly, when the transition end we will remove transition class from them.

//Move siblings items backward
window.setTimeout(function () {

  for(var i = thisOrder; i >= 0; i--) {

    //Reorder item position
    movedItem = item.filter('[data-order=' + i + ']');
    newOrder= parseInt(movedItem.attr('data-order')) + 1;
    className = 'item-' + newOrder;

    //Move them with transition
    movedItem.removeClass().addClass('transition ' + className).attr('data-order', newOrder);

    //Remove their transition
    item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { 
      item.removeClass('transition');
    });
  }
}, 500);

Done

We’re done you can try them on demo page above. Hope you enjoy the tutorial and feel useful, thanks for reading!

 

This Post Tags :

Bookmark Post :

Pin It
  • I think you should apply some transitioning on hover to the images so it swing to the top instead of just jumping to the top. besides that i really like it.

  • Great men!!!

  • I like it.

  • It could be cool if you could make this work on IE in some form.

  • it’s so cute!

  • IE support would be useful.
    Thanks.

  • 十分感谢博主分享这么详尽的教程,很有意思

  • thanks good slider.