Learn and share. The simplest harmony.

 

Creating Android Dock Using jQuery & CSS3

Posted on May 5, 2012 and got 8 shouts so far

When playing the Galaxy Tab I love the fanciness of its Android’s dock. The application icon will pop out consecutively when arrow image on the dock clicked and not just the icon beautifully animated the dock itself also rotating vertically with 3D style. In this tutorial we’re going to create them using jQuery and CSS3.

Our Dock Behaviour

As I described before, when user click the arrow image on the dock the icon will consecutively pop out from bottom, it’s hidden behind the dock itself. Along with animation of the icon pop out, the dock also rotating vertically from top to bottom direction with 3D style. So it will looks like the dock push the icon up.

When user click the arrow image once more it dock will looks like pull down the icon to the bottom, the icon will animated pop in and the dock will rotating from bottom to top direction.


The Technique

All of the technique we will use have been used on previous tutorial. For 3D rotating like cube we will use the technique on “Creating “Next Level” Search Form Using jQuery & CSS3″ post while the consecutive movement of the icon we will use the technique on “Creating Consecutive Slide Using jQuery” post. If you missed both of them, please do me a favor by reading them before continue reading this post.


The Markup & Styling

The dock and the icon wrapped by a div called dock-wrapper, it will take on the 3D perspective and the dock position. The dock will consist two div called dock-front and dock-top, both of them will act like a cube. The last element is a single div called item, it will wrap all icon that will pop out later. In this post I am using icon from some application that available on Google Play.

Arrow Up
Arrow Down

First to go is styling the dock, we will set the perspective on the dock-wrapper and set the position to the bottom of the page. Set dock-front and dock-top transformation and the background. We’ll also add a little animation when user hovering the arrow. Last, we prepare class called .dock-show that will be injected to .dock using JavaScript to force the animation on it.

#dock-wrapper {
  bottom: 0;
  width: 100%;
  height: 60px;
  position: fixed;
  perspective: 3000px;
}
  
  .dock {
    height: 70px;
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  
  .dock-show {
    transform: translateZ(-25px) rotateX(-95deg);
  }
  
  .dock-front, .dock-top {
     position: absolute;
     display: block;
     width: 100%;
     height: 40px;
     padding: 10px 0;
     box-shadow: 0px -3px 6px rgba(0,0,0,0.3);
  }
  
  .dock-front {
     background-image: linear-gradient(to bottom, #434345, #161616);
     transform: translateZ(30px);
  }
  
  .dock-top {
	  background-image: linear-gradient(to bottom, #505052, #161616);
     transform: rotateX(90deg) translateZ(29px);
  }
    
  #arrow-up, #arrow-down {
    cursor: pointer;
    transition: all .2s;
  }
    
    #arrow-up:hover {
    	margin-top: -.2em;
    }
    
    #arrow-down:hover {
    	margin-top: .2em;
    }

After styling dock done, now we’ll stying the icon. The icon will hidden behind the dock and each icon will have absolute position to make us ease moving them when pop out by playing its top position.

.item {
  position: absolute;
  width: 526px;
  left: 50%;
  margin-left: -263px;
}	
   
  .item span {
    position: absolute;
    z-index: -1;
    cursor: pointer;
  }
    
  .item span:first-child  { left: 0; }
  .item span:nth-child(2) { left: 90px; }
  .item span:nth-child(3) { left: 180px; }
  .item span:nth-child(4) { left: 270px; }
  .item span:nth-child(5) { left: 360px; }
  .item span:nth-child(6) { left: 450px; }

Final result of our dock :


The JavaScript

When user click the arrow we will inject .dock-show class name to .dock to make the animation working. After injecting we will moving each icon position to top above the dock, making it visible to the user.

item         = $('.item img');
itemReverse  = item.get().reverse();
  
$('#arrow-up').on('click', function() {
  
  $('.dock').addClass('dock-show');
  
  $.each(item, function() {
    
    var i  = $(this).index();
    var delay = i * 100;

    window.setTimeout(function (index) {
      return function () {
        item.eq(index).stop().animate({ 'top' : '-7.8em' });
      };
    } (i), delay);
  });
});

When user click the arrow once more after the icon appear, we will hide the icon along with rotating the dock.

$('#arrow-down').on('click', function() {
  
  $('.dock').removeClass('dock-show');
  
  $.each(itemReverse, function() {
    
    var i  = $(this).index();
    var delay = i * 100;

    window.setTimeout(function (index) {
      return function () {
        $(itemReverse).eq(index).stop().animate({ 'top' : '0' });
      };
    } (i), delay);
  });
});

Last step add animation for the icon when user hover it, playing its top position.

$('.item img').hover(function() {
  $(this).stop().animate({ 'top' : '-8.4em' }, 'fast');
}, function() {
  $(this).stop().animate({ 'top' : '-7.8em' }, 'fast');
});

We’re Done

The dock is finished but you can enhance the dock more by add tooltip when user hover the icon. That’s it hope you enjoy this post.

 

This Post Tags :

Bookmark Post :

Pin It
  • how to implement this into wordpress-based blog..?

    • You can put the code on your template file, for example /themesfolder/footer.php and include necessary file like demo.css and demo.js on your /themesfolder/header.php

  • Great stuff!!..but how to change dock position into left for example, not in bottom..thx

  • This is awesome, but how can i link the items to something?

    • Nevermind. I figured it out eventually :D . Also there’s an easier way to work with the items without using the “first-child”. I just messed around with some stuff in the css and got this : http://jsfiddle.net/9sWQb/2/ (you can’t really see the result but you can figure out what and how, I hope ) . I did that because it would be alot easier to add a new item without typing anything new in the css. Hope this helps someone :)

      • That is awesome! :)

  • How would you make this close if clicking outside of the bar or icons?

    • You can bind body element by click to hide the dock and event.stopPropagation() to disabled the bind on the dock, here is the sample code (you need to modify) :


      $('body').click(function() {

      $('.dock').removeClass('dock-show');

      $.each(itemReverse, function() {

      var i = $(this).index();
      var delay = i * 100;

      window.setTimeout(function (index) {
      return function () {
      $(itemReverse).eq(index).stop().animate({ 'top' : '0' });
      };
      } (i), delay);
      });

      });

      $('.item img, .dock-front').on('click', function(event) {
      event.stopPropagation();
      });