Wednesday, 19 December 2012

How To Create The Google Circles Effect With CSS & jQuery

22:33 No comments
This tutorial will only cover how to create the actual circle and have it grow when your mouse goes over it. You will not learn how to do the little profile images that appear around the circle, though if there is enough demand for me, I can work on that in the near future.
First off, this is what our circle should look like:

Step 1: Requirements

For this to work, you will need to include the jQuery library. Here’s the code you will need for that (it should go between your <head> tags):
1
<script src="/path/to/jquery.min.js" type="text/javascript"></script>

Step 2: Create the HTML

For this example, we will only be creating one circle. For this to work, we need to create 3 DIVs inside a parent DIV:
1
2
3
4
5
<div class="circle">
    <div class="outer-circle"></div>
    <div class="middle-circle"></div>
    <div class="inner-circle">Text In Circle</div>
</div>
The <strong>circle</strong> div will contain all the elements. The <strong>outer-circle</strong> is the grey border, the <strong>middle-circle</strong> is the circle with a grey background while the <strong>inner-circle</strong> is the blue circle which contains the text.

Step 3: The CSS

You will need quite a bit of CSS for this one. We will start by defining the style for the main DIV.
1
2
3
4
5
div.circle {
    margin: 100px auto;
    width:200px;
    height:200px;
}
The properties above will position the circle. You can easily modify them to move them anywhere you want them to.
Next, we will start by adding some CSS to the outer-circle. I will add comments along the way so you can understand what the code includes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
div.outer-circle {
    /* Set the background and position */
    background:transparent;
    width:122px;
    height:122px;
    /* Set the border and the
    border radius to be exactly
    half the width and height
    so that it looks like a circle */
    -webkit-border-radius: 61px;
    -moz-border-radius: 61px;
    border-radius: 61px;
    border:1px solid #aaaaaa;
    /* You will need to use
    position:absolute so that
    the circles can appear on top of
    each other.
    Additionally, the z-index will
    be used to determine which DIV
    should appear lowest or highest */
    position:absolute;
    z-index:800;
    /* Finally, we set the transition so
    that the circle grows with an
    animation */
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
Next up, we need to set up another state for the outer-circle. The following properties will be used when your mouse is over the circle:
1
2
3
4
5
div.outer-circle.hover {
    -moz-transform: scale(1.45);
    -webkit-transform: scale(1.45);
    transform: scale(1.45);
}
The above properties are used to scale the outer-circle.
Next, we need to add the CSS for the middle circle:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
div.middle-circle {
    /* This margin is used to create
    the 1px border between the middle
    and outer circle */
    margin:1px;
    /* Set the width and height */
    width:122px;
    height:122px;
    /* Set the border radius to half
    the width and height to make it
    look like a circle */
    -webkit-border-radius: 61px;
    -moz-border-radius: 61px;
    border-radius: 61px;
    /* Set the background gradient */
    background: #ececec; /* Old browsers */
    background: -moz-linear-gradient(top, #ececec 0%, #d8d8d8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececec), color-stop(100%,#d8d8d8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ececec 0%,#d8d8d8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ececec 0%,#d8d8d8 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ececec 0%,#d8d8d8 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#d8d8d8',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ececec 0%,#d8d8d8 100%); /* W3C */
    /* You will need to use
    position:absolute so that
    the circles can appear on top of
    each other.
    Additionally, the z-index will
    be used to determine which DIV
    should appear lowest or highest */
    position:absolute;
    z-index:900;
    /* Finally, we set the transition so
    that the circle grows with an
    animation */
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
Similarly to the outer-circle, we also need to add a hover state:
1
2
3
4
5
div.middle-circle.hover {
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}
Last, but not least, we need to specify the CSS for the inner-circle:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
div.inner-circle {
    /* This margin is used to position
    the circle in the center */
    margin:14px;
    /* Specify the background and
    width and height */
    background:#3f96d1;
    width:96px;
    height:96px;
    /* Since we have text in it,
    we need to specify the text
    styles we want to use */
    font-size:11px;
    color:#FFF;
    line-height:96px;
    text-align:center;
    font-family:Arial;
    /* Set the border radius to half
    the width and height to make it
    look like a circle */
    -webkit-border-radius: 48px;
    -moz-border-radius: 48px;
    border-radius: 48px;
    /* For this circle, we will be using
    an inset box shadow to replicate
    the effect used. */
    -webkit-box-shadow: inset 0px 1px 1px 0px #575757;
    -moz-box-shadow: inset 0px 1px 1px 0px #575757;
    box-shadow: inset 0px 1px 1px 0px #575757;
    /* We can also add a bottom border
    to make it look slightly more 3D */
    border-bottom:1px solid #FFF;
    /* You will need to use
    position:absolute so that
    the circles can appear on top of
    each other.
    Additionally, the z-index will
    be used to determine which DIV
    should appear lowest or highest */
    position:absolute;
    z-index:1000;
}

Step 4: The jQuery code

With the CSS out of the way, we are ready for the jQuery code. The code itself is pretty simple:
1
2
3
4
5
6
7
8
9
10
$(function() {
    $('div.circle').mouseover(function() {
        $('div.outer-circle').addClass('hover');
        $('div.middle-circle').addClass('hover');
    });
    $('div.circle').mouseout(function() {
        $('div.outer-circle').removeClass('hover');
        $('div.middle-circle').removeClass('hover');
    });
});
When the mouse goes over the circle div, jQuery adds the hover classes to both the outer-circle and the middle-circle. The mouse out event reverses those changes.
And here’s what the final circle should look like:

Text In Circle
Although it might work differently to the way Google have done it, the code above shows you how to do something extremely similar which you can use for your own projects. A big well done to Google engineers who have done something that not only looks cool, but works extremely well.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Subscribe to RSS Feed Follow me on Twitter!