2009年8月14日金曜日

[jQuery] 3D風タグクラウドを作るチュートリアル


ものすごくかっこいいです。

How to Create a 3D Tag Cloud in jQuery
http://www.devirtuoso.com/2009/08/how-to-create-a-3d-tag-cloud-in-jquery/

デモ


チュートリアルは英語ですが、HTML, CSS, Javascriptともコードが全文載っているので迷うことはないと思います。
意外と記述量が少ないので驚きました。
(Javascriptはコメントを含めて69行!)

ただ、記述量は少ないですが、自分一人では絶対ひねり出せないようなコードが随所に盛り込まれててしびれます。
(数学が得意な人にとってはどうってことないのかもしれませんが)

要素を円周にちらす

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


タグのサイズと位置を割り出す
x = 120 + Math.sin(angle) * 30;
y = 45 + Math.cos(angle) * 40;
size = Math.round(40 - Math.sin(angle) * 40);


ただ、カーソルをはずした時にタグが回りっぱなしになってしまう所は修正したほうがいいかもしれません。

0 件のコメント: