Home > 技術 > JavaScript - HelloWorld

JavaScript - HelloWorld

2009-10-03 (土)
技術

前回jQuery.animateを順番に実行するaddCommand作りましたで紹介したaddCommand - jQuery Pluginを使ってアニメーション「HelloWorld」を書いてみました。

少ないコードでストーリーっぽいアニメーションを描くことができるので、この手のscriptを書くのに適しています。
まだまだ課題はあるんですがね。。。

アニメーションする要素の量が多いので、SafariかChromeで見た方がスムーズに動くと思います。

画像を使ったHelloWorld

・サンプル
addCommand - HelloWorld

・コード
gist: 200472 - GitHub

HTMLテキストを使ったHelloWorld

CSS3のText-Shadowを使っているので、Safari 3+, Opera 9.5, Firefox3.+で見てくださいね。

・サンプル
addCommand - HelloWorld2

・コード
gist: 200473 - GitHub

コードの解説

このコードは「画像を使ったHelloWorld」のJavaScript部分になるのですが、初めのfor文で各画像を画面外に配置して、座標をjQuery.dataに格納しておきます。

そして画像の個数分addCommandメソッドを使ってアニメーションをセットしていきます。
途中、「100 * index」としてdelayを掛けて遅延させてます。

$(document).ready(function() {
	var frame = $("#frame"),
		img,
		left = Math.floor(($(window).width() - $("#image").width()) / 2),
		top  = Math.floor(($(window).height() - $("#image").height()) / 2);

for (var i=0; i < 20; i++) {
		img = $("<img>")
			.attr("src", "HelloWorld.png")
			.css({
				position: "absolute",
				top: Math.cos(i) * $(window).height() + top + "px",
				left: Math.sin(i) * $(window).width() + left + "px"
			})
			.appendTo(frame);

jQuery.data(img[0], "position", {
				top: Math.cos(i) * $(window).height() + top,
				left: Math.sin(i) * $(window).width() + left,
				index: i
			});
	};

$.addCommand.define();
	frame.find("img").each(function(index, elem) {
		addCommand(
			Prop($(this), { opacity: 0 }),
			DoTweener($(this), {
					top: top, left: left, opacity: 1
				}, 3000, "easeInOutCirc", function() {
				}, 100
			),
			DoTweener($(this), {
					top: jQuery.data($(this)[0], "position").top + "px", left: jQuery.data($(this)[0], "position").left + "px", opacity: 0
				}, 1500, "easeInOutBack", function() {
				}, 100 * index
			),
			DoTweener($(this), {
					top: top, left: left, opacity: 1
				}, 3000, "easeInOutElastic", function() {
				}, 100
			),
			DoTweener($(this), {
					top: jQuery.data($(this)[0], "position").top + "px", left: jQuery.data($(this)[0], "position").left + "px", opacity: 0
				}, 1500, "easeInOutBounce", function() {
				}, 0
			),
			DoTweener($(this), {
					top: top, left: left, opacity: 1
				}, 0, "easeInOutCirc", function() {
				}, 0
			)
		);
	});
});

大体これぐらいのコードを書けば、それっぽくアニメーションさせることが可能です。

以上、HelloWorldでした！

■関連リンク
・addCommand - jQuery Plugin

Newer: NoTechnoNoLifeのタイトルFlashの解説
Older: 1台のMacでiPodとiPhoneを同期する方法

Comments:0

Trackback:0

TrackBack URL for this entry: http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1215
Listed below are links to weblogs that reference: JavaScript - HelloWorld from HouseTect, JavaScript Blog

Home > 技術 > JavaScript - HelloWorld

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