Learn and share. The simplest harmony.

 

Portfolio Flipping Slider Using jQuery & CSS3

Posted on July 3, 2012 and got 10 shouts so far

There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.

Slider Behaviour

The slider will change our portfolio images when it’s flipping, this flipping effect is triggered by user click on the pagination. So when user click a page each of our portfolio images will flipping 360 degree and when its animation near end the image will changed with new image.



We will create four flipping effects that will be used for animation, there are : horizontal left direction, horizontal right direction, vertical top direction and vertical bottom direction. These effects will be randomly choosen when displaying the image.


Markup & Styling

We will create a listing of images using unordered list and create a single div for wrapper, this wrapper will be used to display our portfolio image in grid style and will be generated using JavaScript so it will left blank. In this tutorial I’m using awesome image from dribbble posted by Troy Cummings, J.R. Schmidt and Dan Lehman.

  • Dump Truck
  • Rrwooo
  • Dozer

The wrapper markup will contains single div for image wrapper and also a single span for image title, following markup are example of the result after generated using JavaScript :

Dump Truck
Rrwooo

The portfolio image will be displayed with grid, we’ll also styling the span with transparent black background and div with box-shadow and transform-style. Since the portfolio listing doesn’t needed to display we’ll also set its display to none.

  #portfolio-item {
    display: none;
  }
  
  #portfolio {
    margin: 2em 0 1em;
    transform-style: preserve-3d;
  }

  #portfolio div {
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin: 1em;
    width: 200px;
    height: 150px;
    box-shadow: 0px 0px 25px rgba(0,0,0,.3);
  }
  
    #portfolio div span {
      text-align: left;
      position: absolute;
      color: #fff;
      background: rgba(0,0,0,0.6);
      width: 90px;
      padding: 5px 15px 7px;
      z-index: 1;
      left: -10px;
      bottom: 10px;
    }

The image we’ll set as background image for the div, so when flipping the image it’s not flipping the img but the div and change it’s background-image value with new one.

We also will create a class that have CSS animation, this class will be injected to when flipping the div. The last class we will also create are the four effect classes.

  .animated {
    transition: .9s ease-out;
  }
  
  .flipped-horizontal-right {
    transform: rotateY(360deg);
  }
  
  .flipped-horizontal-left {
    transform: rotateY(-360deg);
  }
  
  .flipped-vertical-top {
    transform: rotateX(360deg);
  }
  
  .flipped-vertical-bottom {
    transform: rotateX(-360deg);
  }

Here’s the expected result :

JavaScript

First to go is iniatilizing some variables we need on flipping and change the image also populating image to display. On populating the image, we will walk through the portfolio listing and make them as background image for the div, when it’s done they will be appended to portfolio div.

itemShow         = 8;
indexedItemShow  = itemShow - 1
itemList         = $('#portfolio-item');
itemWrapper      = $('#portfolio');
rotation         = ['flipped-vertical-bottom', 'flipped-vertical-top', 'flipped-horizontal-left', 'flipped-horizontal-right'];
navigation       = $('#navigation a');

for( var i = 0; i < itemShow; i++ ) {
  
  itemImage    = itemList.children('li:eq(' + i + ')').children('img');
  itemSrc      = itemImage.attr('src');
  itemAlt      = itemImage.attr('alt');
  item       = '
' + itemAlt + '
'; itemWrapper.append(item); }

When our navigation clicked it will rotate each div on our portfolio wrapper using effect we’ve initialize before and choosen randomly using Math.random(), to rotate them we’ll inject animated class name and selected effect.

navigation.on('click', function(e) {
    
  e.preventDefault();

  navigation.removeClass('selected');
  $(this).addClass('selected');
    
  page = $(this).attr('data-page');

  for( var i = 0; i <= indexedItemShow; i++ ) {

    random     = Math.floor( Math.random() * ( 3 - 0 + 1 ) );
    animation  = rotation[random];
      
    item       = itemWrapper.children('div:eq(' + i + ')');

    item.addClass('animated ' + animation);
  
    /* to next code */
  }
});

When it's running it will also walk through to select the portfolio listing based on its index related to current selected page. On each selected portfolio listing it will grab it's image title (alt value) along with its src value, each of them will be change current each div value on our portfolio wrapper.

window.setTimeout(function (index) {
  return function () {

    indexReal    = (page == 1) ? index : (index + (page - 1)) ;
    itemHost     = indexReal + (indexedItemShow * (page - 1));

    itemImage    = itemList.children('li:eq(' + itemHost + ')').children('img');
    itemSrc      = itemImage.attr('src');
    itemAlt      = itemImage.attr('alt');
    itemCurrent  = itemWrapper.children('div:eq(' + index + ')');

    itemCurrent.css('background', 'url(' + itemSrc + ')');
    itemCurrent.children('span').text(itemAlt);
    };
} (i), 500);

When the animation done we'll remove the animated and effect class name on each div.

item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { 
  $(this).removeClass();
});

Done

We're done, as I described before that the flipping will take an action when user clicked the pagination. Try to visit the demo link above to see them live. Enjoy!

 

This Post Tags :

Bookmark Post :

Pin It
  • Nice, clean, and elegantly simple setup here.

    I’m presuming that the list elements and be linked to their parent image, and if so, very nice. If not, then still… very nice. ;)

    Thanks

  • Cheers for sharing this.
    Feature request: Tutorial of a Responsive version on this slider

    Thanks

  • There’s a typo in the displayed CSS. It shows “bottombottom: 10px;” where I’d assume it should be “bottom: 10px;”

    • It’s not a typo the syntax highlighter render not accurately, I’ll fix it soon. Thank you for noticing!

      @Amit Ayre & @Michael
      Thank you for comment! Responsive version is a great idea.

  • Nice one! ;-) Could I use it in commerical project?

  • É muito lindo! ;)

  • Thank you, thank you. This is helpful me to fix one of my slider.

  • I loved the tutorial, but I don’t know where to insert the JavaScript codes in my WP archives. Could you help me?

  • is there a way set the flip to work automatically every few seconds without the need to click on the navigation buttons number?

  • hey guys, im having a small bit of trouble,

    it works fine when when i do the first flip but when i go to the second flip it brakes and all i get is just fade transition after that? Any one know where i could be going wrong?? any help would be great!