Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかる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から使えなくなったし。。


 
イヌでもわかるJavaScript講座 お品書き へ戻ります