Google new trendy fixed circular icons using CSS3 and jQuery

On some of the recent Google apps updates I found it pretty cool and though creative that Google start using circular icons that are fixed on right bottom corner of screen and pop-up icons on hover. I created that and found it pretty new.

Demo

See the Pen Google Inbox Style Icons by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Find This On Github

Description

The icons markup should be in a manner that the trigger icons should be in the last and have the following makrup:

<div class='icon trigger'>
    <span class='label'>Send</span>
    <span class='button'>&#xf1d8;</span>
  </div>

While all the other icons which have to be appeared are going in starting and markup that is going to followed is:

 <div class='hide icon'>
    <span class='label'>Search</span>
    <span class='button'>&#xf002;</span>
  </div> 

Since the demand of animation was transform scale and their was a bit interval in each button, it should be done with Javascript. Well, jQuery animate doesn't support transform therefore I used jQuery's plugin to make that.

On notice you will find that the icons popup on a several interval, the time required on mouseenter and mouseout is same, the variable t that has current value of 1000 (milliseconds and equals to 1 second) is the total time required to popup all icons change it to have a animation of your time.

The equation to opt-out the correct time for each icon is:

((t*i)/l)

Where t is total time (that is 1000ms), i is the index number (adding up 1 on mouseout) and l is the total number of icons (only with class hide) in the container. It is nothing just a calculation.

Find This On Github