Learn and share. The simplest harmony.

 

Showing Image With Bounce Effect

Posted on May 24, 2012 and got 4 shouts so far

There are many example out there that using CSS3 transform and animation for enhancing the webpage and today I’m going to share one of them. Using CSS3 transform and animation we will create a bouncing effect when an item (in this case image) is showing or added to our webpage.

Expected Result

We will have an image list positioned on the bottom of the page wrapped by a single div, it will be opened by clicking a plus sign. If one of these image is clicked it will be showed on the middle of the page with bouncing, if other image clicked it also be showed next to previous showed image.


Setup The Display

According to the expected result we will have two divs for image list wrapper (named thumbnail-wrapper) and image receiver (named item-receiver) which has been clicked, also a plus sign image (named plus) for displaying image list. In this tutorial I am using Shopify Theme images taken from Shopify Theme Store.

The thumbnail-wrapper which is positioned on the bottom of the page will have following styling :

#thumbnail-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 90px;
  background: #f1f1f1;
  text-align: left;
  padding: 10px 15px;
  box-shadow: 0px 0px 10px #ccc;
  width: 60px;
}

  #plus {
    float: left;
    margin-top: 1em;
    cursor: pointer;
    transition: .2s ease-in-out;
  }
  
    .clicked {
      transform: rotate(45deg);
    }

Also notice the plus sign position on the left bottom of the page and when clicked it will rotate to 45 degree. The image list wrapped by thumbnail-wrapper will be displayed horizontally, when they are hovered they will be scaled bigger and having box-shadow :

.item-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: none;
}
  
  .item-list li {
    display: inline-block;
    margin-left: 1em;
  }
  
    .item {
    cursor: pointer;
    transition: .2s ease-in-out;
    }
    
    .item:hover {
      box-shadow: 0 0 10px #aaa;
      transform: scale(1.02);
    }

The item-receiver will displaying the images with box-shadow and having 2em margin on the right and bottom to separate each image :

#item-receiver {
  display: block;
  text-align: left;
  margin-bottom: 7em;
}
  
  #item-receiver img {
    display: inline-block;
    margin: 0 0 2em 2em;
    width: 205px;
    box-shadow: 5px 9px 5px rgba(0,0,0,.3);
  }


Bouncing Technique

To have a bouncing effect is a little bit tricky, we can use transform with playing scale value and helped by animation keyframes. Bouncing like zooming in and zooming out with different scale in some interval, for our bounce effect, the image will be showed bigger than its original size then scaling to smaller, bigger but smaller than the first and back to original size.


So there are four states of our bouncing animation : bigger from original size, smaller, bigger but smaller from the first and original size. We can use keyframes for implement them :

@keyframes show{
  0% { 
    transform: scale(1.2); 
  }
  
  50% {  
    transform: scale(0.9); 
  }
  
  75% {  
    transform: scale(1.1); 
  }
  
  100% {  
    transform: scale(1); 
  }
} 

This keyframes (named show) we will use on .show class. This class will be added when the image being added on the middle of the page, so it will have bounce effect on it.

.show {
  animation: show 0.5s ease-in;
}


Time For jQuery

You must notice that we will copy the image on image list to the item-receiver when having a click event. We will use clone() method and appendTo() to copy the image, for adding bounce effect we also add a show class name to it. If there’are many of images added to item-receiver the page will be scrolled to bottom to let user know which image is being displayed, we will using scrollTop attribute on animate method.

itemReceiver = $('#item-receiver');

$('.item').on('click', function() {
  
  //Scroll to bottom if overflowing the page height
  $('body').animate({ scrollTop: $(document).height() }, 1000);
  
  //Add to itemReceiver with bouncing effect
  $(this).clone().appendTo(itemReceiver).addClass('show');
  
});

The wrapper of image list will be opened when user click the plus sign, also showing image list with fadeIn(). When it is clicked again the wrapper will closed and image list will be hidden using fadeOut() method.

itemList			= $('.item-list'),
thumbnailWrapper= $('#thumbnail-wrapper'),
documentWidth	= $(document).width() + 'px';

$('#plus').on('click', function() {
  
  me  = $(this);
  
  if(!me.hasClass('clicked')) {
  
    me.addClass('clicked');
    thumbnailWrapper.animate({'width': documentWidth}, function() {
    itemList.fadeIn();
    });
    
  } else {
  
    me.removeClass('clicked');
    itemList.fadeOut();
    thumbnailWrapper.animate({'width':'60px'});
  }
});

Done!

We’re done. We just proved that CSS3 is getting more and more interesting with their transform and animation, hope soon most of them are implemented on all browser. If the demo doesn’t work try check your browser compatibility on this link for animation and this link for transform.

 

This Post Tags :

Bookmark Post :

Pin It
  • nice…

  • Nice Tutorial

  • Great tutorial. :D
    not related to the effects but
    i have a query on how to stop same items to appear again if they are are already displayed.

  • nice Tutorial