新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


今回はdojo.jsのAjaxライブラリを使って

「ワイプアウト」「ワイプイン」を作ってみました

初級編だね

以下のfunctionを呼び出し、ワイプインとワイプアウトを実装します。
dojo.fx.wipeInってのとdojo.fx.wipeOutってのが用意されてるんでこれを使うだけでok

dojo.addOnLoad(function() {
 dojo.style("wipein", "visibility", "hidden"); // 要素を隠す

 animation1 = dojo.fx.wipeIn({
  node: "wipein",
  duration: 500
 });

 animation2 = dojo.fx.wipeOut({
  node: "wipeout",
  duration: 500
 });
});



そして次に実装したfunctionを
play()で実行するfunctionです

/* ワイプイン */
function wipeIn() {
 animation1.play();
}


/* ワイプアウト */
function wipeOut() {
 animation2.play();
}


これで実行することができます

例としては以下のサイトにサンプルがありますのでよかったらどうぞ。

ワイプイン/ワイプアウトのサンプル


なぜか今回は2つ実装できました。
前回のやつができない理由がわからないですー
スポンサーサイト

テーマ:dojo.js - ジャンル:コンピュータ

<<dojoライブラリを使用したアニメーション[要素の移動] | ホーム | dojo.jsを使ってフェードインとフェードアウト>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kanamehackday.blog17.fc2.com/tb.php/117-cdfd8d93
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。