Home > 技術 > カラフルな要素があっちいったりこっちいったり - xyz.js

カラフルな要素があっちいったりこっちいったり - xyz.js

2009-01-07 (水)
技術

ちまたで有名なWonderfl Build Flash Onlineをダラ見してたら、これまた面白いFlashを見つけてしまったのでJavaScriptでソレっぽく再現してみました。

↓これがそのFlash。イカス！
code on 2008-12-23 | Wonderfl Build Flash Online
何個かfoakされているので、他の方のを見てみても面白いです。

ただFlashでできることがJavaScriptでできなかったりもするので完璧に再現はしていませんが、一応それっぽく。
JavaScriptでRotationが使えたら要素をグルグル回せるんですがね。

初めcanvasのrotateを使おうかと思ったのですが、座標の記憶とかtranslateとかややこしそうだったので断念・・・

JavaScriptソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
//![CDATA[

var Xyz = function(){}
Xyz.prototype = {
	num: 50,
	mcArray: new Array(),
	width: 50,
	height: 10,
	$frame: null,

init: function(){
		this.$frame = $("#frame");
		for(var i = 0; i < this.num; i++){
			var mc = $("<div></div>");
			mc
				.css({
					backgroundColor: this.randamColor(),
					width: this.width + "px",
					height: this.height + "px",
					position: "absolute",
					top: this.getTop(this.$frame.height()) + "px",
					left: this.getLeft(this.$frame.width()) + "px"
				})
				.appendTo("#frame");
			this.mcArray.push(mc);
		}

this.update();
	},

update: function(){
		for(var i = 0; i < this.num; i++){
            var targetMc = this.mcArray[i];
			this.tween(targetMc);
		}
	},

tween: function(targetMc){
		setTimeout(function(){
			targetMc
				.animate(
					{
	                    top: Xyz.getTop(Xyz.$frame.height()) + "px",
	                    left: Xyz.getLeft(Xyz.$frame.width()) + "px"
					},
					{queue: true, duration: 1500, easing: "easeOutBounce", complete: function(){
							Xyz.tween($(this));
						}
					}
				);
		}, Math.random() * 2000);
	},

randamColor: function(){
		var color = Math.floor(Math.random() * 0xFFFFFF).toString(16);
		for(count = color.length; count < 6; count++){
			color = "0" + color;
		}
		return "#" + color;
	},

getTop: function(frameHeight){
		var randam = Math.random() * frameHeight;
		if(frameHeight < randam + this.height)
			randam -= this.height;
		return randam;
	},

getLeft: function(frameWidth){
		var randam = Math.random() * frameWidth;
		if(frameWidth < randam + this.width)
			randam -= this.width;
		return randam;
	}
}
var Xyz = new Xyz();

$(function(){
	Xyz.init();
});

//]]
</script>
<style>
<!--

#frame {
width: 500px;
height: 500px;
border: 1px solid;
background-color: #efefef;
overflow: hidden;
position: relative;
}

-->
</style>
<div id="frame">
</div>

実際のActionScriptで使われているTweenerライブラリの部分はjQueryのanimeteメソッド、easing部分はjquery.easingプラグインを使って補いました。

続きで動作確認できます。

Comments:0

Trackback:0

TrackBack URL for this entry: http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1147
Listed below are links to weblogs that reference: カラフルな要素があっちいったりこっちいったり - xyz.js from HouseTect, JavaScript Blog

Home > 技術 > カラフルな要素があっちいったりこっちいったり - xyz.js

RSS Feeds

Search

Recent Entries

このブログについて

author：hisasann.com

description：就職しました！
最近はJavaScript、Perl、Rails、Java（Struts+Spring+iBatis）なんかをいろいろといじっています。
今猛勉強中なのがActionScriptです。
アニメーション楽しい！

他に運営しているブログ：

利用しているWebサービス :

Tag cloud

カテゴリー

月別アーカイブ

jQuery Meetup

Visit jQuery Meetups

Page Top

カラフルな要素があっちいったりこっちいったり - xyz.js

JavaScriptソースコード

関連ソース

Comments:0

Trackback:0