JSFiddle - React, Tailwind, and code Playground

Android Dock Using jQuery & CSS3

by Jennifer Perrin

HTML

<div id="dock-wrapper">
    <div class="dock">
      <div class="dock-front">
            <img src="images/arrow-up.png" alt="Arrow Up" id="arrow-up" />
      </div>
      <div class="dock-top">
            <img src="images/arrow-down.png" alt="Arrow Down" id="arrow-down" />
      </div>
    </div>
    <div class="item">
        <img src="http://jenniferperrin.com/image/icon_twitter.png" width="40" />
        <img src="http://jenniferperrin.com/image/icon_facebook.png" width="40" />
        <img src="http://jenniferperrin.com/image/icon_linkedin.png" width="40" />
        <img src="http://jenniferperrin.com/image/icon_google.png" width="40" />
        <img src="http://jenniferperrin.com/image/icon_xing.png" width="40" />
        <img src="http://jenniferperrin.com/image/social_rss.png" width="40" />
    </div>
  </div>

CSS

body {
  padding: 0;
  margin: 8em 0 0;
  text-align: center;
  color: #715241;
  background: rgb(246,241,232);
  background: -moz-radial-gradient(center, ellipse cover,  #fbf5f3 49%, #d6c8bd 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(49%,#fbf5f3), color-stop(100%,#d6c8bd));
  background: -webkit-radial-gradient(center, ellipse cover,  #fbf5f3 49%,#d6c8bd 100%);
  background: -o-radial-gradient(center, ellipse cover,  #fbf5f3 49%,#d6c8bd 100%);
  background: -ms-radial-gradient(center, ellipse cover,  #fbf5f3 49%,#d6c8bd 100%);
  background: radial-gradient(center, ellipse cover,  #fbf5f3 49%,#d6c8bd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbf5f3', endColorstr='#d6c8bd',GradientType=1 );
  background-repeat: no-repeat;
  background-attachment: fixed;
}

h1, em, #information {
  display: block;
  font-size: 40px;
  font-weight: normal;
  font-family: "Overlock";
  margin: 2em auto;
}

a {
  color: #715241;
  font-style: normal;
  text-decoration: none;
  font-size: 20px;
}

a:hover {
  text-decoration: underline;
}

#container {
  display: block;
  margin: 0 auto;
}
  
  #information {
    color: red;
    font-size: 34px;
    margin-top: -2em;
  }
  
  #arrow {
    position: absolute;
    left: 50%;
    margin-left: -66px;
    bottom: 10em;
  }
  
  #dock-wrapper {
    bottom: 0;
    width: 100%;
    height: 60px;
    position: fixed;
    -webkit-perspective: 3000px;
       -moz-perspective: 3000px;
        -ms-perspective: 3000px;
         -o-perspective: 3000px;
            perspective: 3000px;
  }
  
    .dock {
      height: 70px;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
          -ms-transition:...

JavaScript

$(document).ready(function() {
    
    //Initialize variable
    item             = $('.item img');
    itemReverse    = item.get().reverse();
    
    //Arrow up clicked
    $('#arrow-up').on('click', function() {
        
        $('.dock').addClass('dock-show');
        $('#arrow').hide();
        
        $.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);
        });
    });
    
    //Arrow down clicked
    $('#arrow-down').on('click', function() {
        
        $('.dock').removeClass('dock-show');
        $('#arrow').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 hovered
    $('.item img').hover(function() {
        $(this).stop().animate({ 'top' : '-8.4em' }, 'fast');
    }, function() {
        $(this).stop().animate({ 'top' : '-7.8em' }, 'fast');
    });
    
});