イヌでもわかるJavaScript講座
|
Step.75 - トランジション効果を使う
|
画面切り替え時に、リビールトランスを使って、トランジション効果を加えてみます。 |
Step テーマ ● revealTrans トランジション効果 |
IE専用でしたが、IE9から廃止になりました。 |
実行例ページ移動時に効果がでます |
リスト<head> <meta http-equiv="Page-Enter" content="revealTrans(Duration=4,Transition=23)"> <meta http-equiv="Page-Exit" content="revealTrans(Duration=4,Transition=23)"> </head> |
サンプルだけの HTMLは こちらへ |
説明[Q] ホームページに入ったときと出るときに画面が変わった切り替わり方をします。ソースを見たのですがどこにも記述がありません。どういった方法でやっているのですか? [A] あはは。やっぱり。これはトランジション効果という機能です。 ちょっと前までは、ページ移動時に、トランジション効果というアニメーション処理を使ったホームページをよく見かけました。 でも、最近は少なくなってきました。なぜか? それは、すぐに飽きるのです。 (^^; リストを見て、びっくりでしょう。<META>タグに 1行で OKなのです。 ソースを覗いて見つからないのも当然かも知れません。 このトランジション効果は IE4〜IE8で使える機能です。それ以外のブラウザでは動きません。 では、説明。 ページ全体にトランジション効果をつけるために、<HEAD>内に<META>タグを使います。 <head> <meta http-equiv="Page-Enter" content="revealTrans(Duration=4,Transition=23)"> <meta http-equiv="Page-Exit" content="revealTrans(Duration=4,Transition=23)"> </head> http-equiv に効果をつけるタイミングを指定します。(ページに入った時、出るとき) 指定は、Page-Enter、Page-Exit、Site-Enter、Site-Exit のいずれかです。 content に リビールトランスを指定します。 revealTrans(Duration=4 , Transition=1) duration は、ページの切り替えが終わるまでの時間(秒) transition は、効果の種類(番号) 効果の種類は、24種類用意されています。 0 : Box in 1 : Box out 2 : Circle in 3 : Circle out 4 : Wipe up 5 : Wipe down 6 : Wipe right 7 : Wipe left 8 : Vertical blinds 9 : Horizontal blinds 10 : Checkerboard across 11 : Checkerboard down 12 : Random dissolve 13 : Split vertical in 14 : Split vertical out 15 : Split horizontal in 16 : Split horizontal out 17 : Strips left down 18 : Strips left up 19 : Strips right down 20 : Strips right up 21 : Random bars horizontal 22 : Random bars vertical 23 : Random お好きなものをどうぞ。でも、飽きるよ (^^; というか、IE9から使えなくなったし。。 |