• RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
Home > CSS, Front End Development > jQuery Animated Wave

jQuery Animated Wave

August 13th, 2009

The post  How to Create a 3D Tag Cloud in jQuery showed how to create a carousel like tag cloud that interacted with the users mouse.  While playing around with the code, I’ve stumbled upon a cool effect by changing one line of code.


The new effect is a wave like effect.  I don’t know how useful the effect is, but it looks pretty cool, and that’s good enough for me. ;)

Have a look: Example

image

In the previous CSS the anchor tags had a position of absolute so the jQuery could position the anchor tags properly.  If we switch the position to relative, the jQuery can’t move the anchors freely and it creates a wave affect…kinda cool.

Download the original 3D jQuery tutorial file

Here is the new CSS:

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
body{
    font-family: Arial, "MS Trebuchet", sans-serif;
    background-color: #111;
}


#list{
   
    /*Influences layout of list*/
    height:600px;
    width:600px;
   
    background-color: #000;
   
    /* Keeps list inside of wrapper*/
    position:relative;
    margin:0 auto;
    overflow:hidden;
}


#list ul,
#list li{
    list-style:none;
    margin:0;
    padding:0;
}

/* We just changed the position to relative
instead of absolute */
#list a{
    position:relative;
    text-decoration: none;
    color:#666;
}

#list a:hover{
    color:#ccc;
}

 

Here is the new coplete code:

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQuery 3D</title>

<style type="text/css" media="screen">
    body{
        font-family: Arial, "MS Trebuchet", sans-serif;
        background-color: #111;
    }
    #list{
        margin:0 auto;
        height:600px;
        width:600px;
        overflow:hidden;
        position:relative;
        background-color: #000;
    }
    #list ul,
    #list li{
        list-style:none;
        margin:0;
        padding:0;
    }
    #list a{
        position:relative;
        text-decoration: none;
        color:#666;
    }
    #list a:hover{
        color:#ccc;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
   
<div id="list">
    <ul>
        <li><a href="#">ajax</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">design</a></li>
        <li><a href="#">firefox</a></li>
        <li><a href="#">flash</a></li>
        <li><a href="#">html</a></li>
        <li><a href="#">Devirtuoso</a></li>
        <li><a href="#">jquery</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">usability</a></li>
        <li><a href="#">www</a></li>
        <li><a href="#">web</a></li>
        <li><a href="#">xhtml</a></li>
   
    </ul>
</div>

<script type="text/javascript">


$(document).ready(function(){
   
var element = $('#list a');
var offset = 0;
var stepping = 0.03;
var list = $('#list');
var $list = $(list)

$list.mousemove(function(e){
    var topOfList = $list.eq(0).offset().top
    var listHeight = $list.height()
    stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;
   
});


for (var i = element.length - 1; i >= 0; i--)
{
    element[i].elemAngle = i * Math.PI * 2 / element.length;
}


setInterval(render, 20);


function render(){
    for (var i = element.length - 1; i >= 0; i--){
       
        var angle = element[i].elemAngle + offset;
       
        x = 120 + Math.sin(angle) * 30;
        y = 45 + Math.cos(angle) * 40;
        size = Math.round(40 - Math.sin(angle) * 40);
       
        var elementCenter = $(element[i]).width() / 2;

        var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"

        $(element[i]).css("fontSize", size + "pt");
        $(element[i]).css("opacity",size/100);
        $(element[i]).css("zIndex" ,size);
        $(element[i]).css("left" ,leftValue);
        $(element[i]).css("top", y + "%");
    }
   
    offset += stepping;
}

   
});

</script>

</body>
</html>

I always love happy mistakes, I encourage you to play around with the code and see if you can’t come up with your own cool effects.

 

  • RSS
  • Print this article!
  • Digg
  • del.icio.us
  • DZone
  • Facebook
  • Mixx
  • Google Bookmarks
  • Design Float
  • Reddit
  • StumbleUpon
  • Technorati
  • Live
  • TwitThis
Author: Shawn Categories: CSS, Front End Development Tags: , ,
  1. arnaud-k
    August 14th, 2009 at 04:52 | #1
    Reply | Quote

    Very good effect ! Happy mistakes offers sometimes the best ideas.

    Have you thought about creating a JQuery Plugin with your code ?

  2. Kotonoha
    August 15th, 2009 at 00:26 | #2
    Reply | Quote

    So this was basically that 3D tag cloud, except you screwed up the code.

  3. Shawn
    August 15th, 2009 at 08:52 | #3
    Reply | Quote

    Essentially Yeup. It ended up having a cool effect so I thought I would share.

  4. Marco
    August 18th, 2009 at 11:57 | #4
    Reply | Quote

    YOU ARE A GENIUS. marco from rome. CAN I USE your creation for my site? marco from rome. ps: have you a myspace? so i add you.

  5. Shawn
    August 18th, 2009 at 12:02 | #5
    Reply | Quote

    Thanks Marco, Go right ahead and use it for your site. Unfortunately I don’t have a myspace account.

  6. Marco
    August 18th, 2009 at 13:15 | #6
    Reply | Quote

    so….i link your web site to my web site as soon as it will be ready(few week). thanks a lot. ps:is it works on all browser? safari, mozilla , explorer and opera?

  7. Shawn
    August 18th, 2009 at 13:30 | #7
    Reply | Quote

    I know the 3d tag cloud works in all browsers, I’m not entirely positive that this animated wave works in all browsers as it was a happy mistake.

Comments are closed.