要素を3D風にぐるぐる回すJavaScript「jQuery 3D」

単純に要素を置くだけではつまらないので、3D風にぐるぐると回してみましょう。
via:jQuery 3D

sponsors

使用方法

jQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript">
$(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) * 50;
			y = 45 + Math.cos(angle) * 30;
			size = Math.round(40 - Math.sin(angle) * 20);
			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>
あとは要素を上記のIDにあわせて以下のように記述します。

<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>
	</ul>
</div>

サンプル

サンプルを見る


Javascriptサンプルページ一覧
skuare.net

sponsors