REDLINE MAGAZINE | script.aculo.us でアニメーションREDLINE MAGAZINEトップページへ

すべてのエントリを見る

script.aculo.us でアニメーション

script.aculo.usを今更使ってみる。
今回想定したのは、よくサイトのトップページなんかでイメージムービー的なフラッシュの代替としてscript.aculo.usのアニメーションフレームワークを使うとどんな感じかなーと。

下準備

※prototype.jsも必要なので必ず用意する。
( script.aculo.usのスクリプトをダウンロードすると同梱されてる)

実験してみた内容

>>RedlineMagazine::script.aculo.usサンプルページはこちら

まずアニメーションを表示する場所をcssで指定。あとそのエリアのimgを絶対配置にして同じ位置に表示するようにした。アニメーションのエリアは画像の動きが枠を超えた場合、それに追随して枠が拡大してしまうのでoverflow:hiddenで枠からはみ出した部分はカットする。

.effect{
	position:relative;
	width:500px;
	height:150px;
	margin:20px 0 0 20px;
	border:1px solid #f00;
	overflow:hidden;
	}
.effect img{
	position:absolute;
	top:0;
	left:0;
	}

次にjs部分。とりあえずhead内でprototype.js、script.aculo.us.jsの順に読み込む・・・のだが、今回はeffects.jsしか使わないのでprototype.js、effects.jsという順で読み込んでみた。その後、各画像のアニメーションの設定。

>> Combination Effects Demo
こちらを見ながら適当にエフェクトを選んで指定してみた。

<script type="text/javascript">
function movie(){
new Effect.Appear('image01',{duration: 2});
new Effect.Fade('image01',{duration: 2,delay: 3});
new Effect.Appear('image02',{duration: 2,delay: 5});
new Effect.Puff('image02',{duration: 2,delay: 8});
new Effect.Grow('image03',{duration: 1,delay: 9});
new Effect.Fade('image03',{duration: 2,delay: 11});
new Effect.Appear('image04',{duration: 1,delay: 12});
new Effect.Fade('image04',{duration: 1,delay: 13});
new Effect.Appear('image05',{duration: 1,delay: 14});
new Effect.Appear('image06',{duration: 1,delay: 15});
new Effect.DropOut('image05',{duration: 1,delay: 16});
new Effect.DropOut('image06',{duration: 1,delay: 16});
new Effect.Appear('image07',{duration: 2,delay: 16});
new Effect.SwitchOff('image07',{duration: 1,delay: 18});
new Effect.Grow('image08',{duration: 1,delay: 19});
new Effect.Fade('image08',{duration: 2,delay: 21});
new Effect.BlindDown('image09',{duration: 2,delay: 22});
}
</script>

『duration』は持続時間っつーか、何秒かけてそのエフェクトを実行するかの指定。『delay』は最初の動きから何秒遅れでそのエフェクトを実行するかの指定。例えば『new Effect.Fade('image01',{duration: 2,delay: 3});』なら、image01の画像を3秒遅れで2秒かけてフェードアウトします、という事。

で、body内のソースはこんな感じ。

<body onload="movie()">
<div class="effect">
<p>
<img src="xxx.gif" alt="xxx" id="image01" style="display:none;" />
<img src="xxx.jpg" alt="xxx" id="image02" style="display:none;" />
<img src="xxx.gif" alt="xxx" id="image03" style="display:none;" />
<img src="xxx.gif" alt="xxx" id="image04" style="display:none;" />
<img src="xxx.gif" alt="xxx" id="image05" style="display:none;" />
<img src="xxx.gif" alt="xxx" id="image06" style="display:none;" />
<img src="xxx.jpg" alt="xxx" id="image07" style="display:none;" />
<img src="xxx.gif" alt="xxx" id="image08" style="display:none;" />
<img src="xxx.gif" alt="xxx" id="image09" style="display:none;" />
</p>
<noscript>
<p><img src="xxx.gif" alt="xxx" /></p>
</noscript>
</div>

読み込む画像はとりあえず全部出てきたら困るのでstyle="display:none;"で消しておく。後はそれぞれの画像にidをつけておけば、上で書いた内容に合わせて勝手に出てきたり消えたりしてくれる。

js無効の場合はアニメーションも当然なし、なので、noscriptで画像を1枚入れておいて何も表示されてないという状態を回避。

一応ブラウザはIE6.7、Firefox、Operaではちゃんと動いてくれてる事を確認。Netscape 7.1だけなんか一部動きが変。Safariはまだmacが届いてないので保留。

(070405追記)
SafariでもOKでした。しかもエフェクトの動きが微妙に違った。Safariの方がキレいに見えるなぁ。

Flashと比べて・・・

とっかかりは「Flashで作ったほうが早いな・・・」とも思ったけど、例えば後でサクっと画像を差し替えたい時や、やっぱりここの表示時間を短縮しよう、エフェクトを変えようとか思った時の手軽さは断然こっちの方が早い。クライアントが自分でその都度タイムリーな情報をこのムービーで更新したいんですぅーみたいな要望にも対応できそう。拡大したり縮小したりする際に画像のエッジがギザギザに見えてしまうのが少し気になるけど。

そのアニメーションにリンクを付けたければaタグを普通につければOK。「この場所をクリックしたら該当ページへ飛ぶ」みたいな指定は普通にaタグをブロックにして絶対配置などで置けばいいって話なんだけど、Flashでやった方が早いことは早い。

こちらでscriptaculousのcheatsheetがダウンロードできるようです。
>>Slash7 with Amy Hoy - Scriptaculous Cheat Sheet #1
なんかかわいい。

<< Reflection.jsで楽に画像を反射させる | jQueryでやってみる >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/133

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。