3D tag cloud
HTML
<html>
<head>
<script src="http://disa.csie.org/~janetyc/lib/jquery.tagcanvas.js" type="text/javascript"></script>
</head>
<body>
<div id="myCanvasContainer">
<canvas width="500" height="300" id="myCanvas">
<ul>
<li><a href="http://www.google.com" target="_blank">Google</a></li>
<li><a href="">Apple</a></li>
<li><a href="">Advisor Interface</a></li>
<li><a href="">Slider</a></li>
<li><a href="">Photoshop</a></li>
<li><a href="">Android</a></li>
<li><a href="">Icon</a></li>
<li><a href="">design</a></li>
<li><a href="">color</a></li>
<li><a href="">Layout</a></li>
<li><a href="">Button</a></li>
<li><a href="">color</a></li>
<li><a href="">Layout</a></li>
<li><a href="">Button</a></li>
</ul>
</canvas>
</div>
</body>
</html>
JavaScript
$(document).ready(function() {
if( ! $('#myCanvas').tagcanvas({
textColour : '#000000',
outlineThickness : 1,
maxSpeed : 0.03,
depth : 0.75
})) {
// TagCanvas failed to load
$('#myCanvasContainer').hide();
}
// your other jQuery stuff here...
});