見落とされがちなMETAタグの特殊効果（ページ遷移効果）

Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META タグの強力な効果を無視している人は多くいます。実際、メタタグは多くの美しいページ遷移効果も実現できます。
METAタグはHTML言語のHEAD領域にある補助タグです。Metaタグは各Webページの<head>...</head>内に配置されます。
その中には、私たち全員がよく知っている次のようなものがあります。
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">//説明編集ツール;
<meta name="KEYWORDS" content="...">//キーワードの説明;
<meta name="DESCRIPTION" content="...">//ホームページの説明;
ユーザーには表示されない情報を提供します。メタタグは通常、検索エンジンロボットのページテーマを定義したり、ユーザーのブラウザーの Cookie を定義したりするために使用されます。また、作成者を識別したり、ページ形式を設定したり、コンテンツの概要やキーワードをマークしたり、定義した時間間隔に従ってページを自動的に更新するように設定したり、RASC コンテンツレベルなどを設定したりすることもできます。この記事では、主にメタタグを使用してページ遷移効果を生み出す方法について説明します...

使用法：
<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

blendTrans は、フェード効果を生み出す CSS 動的フィルターです。別の動的フィルターである RevealTrans も、ページの入口と出口の効果に使用できます。
動的フィルターを使用すると、ページにフェードイン、フェードアウト、画像変換などの効果を追加できます。動的フィルターは、ブレンドとリビールという 2 つのタイプに分けられます。
前者はオブジェクトを徐々に消したり表示したりすることができ、後者は 24 種類の画像変換効果を提供します...
<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">
期間: フィルター効果の持続時間を示します (単位: 秒)
遷移: フィルタータイプ。使用する特殊効果を 0 ～ 23 の値で示します。
----------------------------------------------------------------------------------------------
0: 長方形の縮小1: 長方形の拡大2: 円の縮小3: 円の拡大4: 下から上に更新5: 上から下に更新6: 左から右に更新7: 右から左に更新8: 垂直ブラインド9: 水平ブラインド10: オフセット水平ブラインド11: オフセット垂直ブラインド12: ドットスプレッド13: 左から右、中央に更新14: 中央から左右に更新15: 中央から上下16: 上下から中央17: 右下から左上18: 右上から左下19: 左上から右下20: 左下から右上21: 水平バー22: 垂直バー23: 上記 22 種類からランダムに 1 つ選択
----------------------------------------------------------------------------------------------
適切に使用すると、Web ページ変換効果は、元々サイトに興味がなかった訪問者にも非常に深い印象を与えることができます。特に、Web ページの作成方法を学ぶのが好きな友人は、学習や研究の目的であなたの Web ページをコピーする可能性があります。実際、短いコードを追加しただけです ^_^ Web ページの遷移効果 (Trans) は、「Web ページに入る」(Page-Enter)、「Web ページを離れる」(Page-Exit)、「サイトに入る」(Site-Enter)、「サイトを離れる」(Site-Exit) の 4 つのカテゴリに分かれています。各主要カテゴリは 25 のサブカテゴリに分かれています。ページエントリ効果を例に挙げてみましょう。

ウェブページに入ったときの効果
1.ブレンディング効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
2.ボックス型の縮小効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)">
3.箱型の放射効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)">
4.円形の縮小効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)">
5.円形放射効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">
6.上向きワイプ効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">
7.下方向ワイプ効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">
8.右消去効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">
9.左ワイプ効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">
10.垂直マスキング効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">
11.水平マスキング効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">
12.水平チェス盤効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">
13.垂直チェス盤効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">
14.後続の分解効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">
15.左と右のインデント効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">
16.中央から左への拡大効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">
17.上から下へのインデント効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">
18.中央の上方および下方拡大効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">
19.次のように左下からエフェクトコードを抽出します: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">
20.次のように左上からエフェクトコードを抽出します: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">
21。次のように右下隅からエフェクトコードを抽出します: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">
22。次のように右上隅からエフェクトコードを抽出します: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">
23。ランダムな水平線効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">
24。ランダムな垂直線効果のコードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">
25.ランダム効果コードは次のとおりです: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">

それでは、これらのコードを分析してみましょう。まず、これらのコードのほとんどが非常に似ていることがわかります。実際、カテゴリは多数ありますが、各主要カテゴリの下にある 25 個のサブカテゴリは同じものに対応しており、番号で識別されます (ブレンド効果 blendTrans(Duration=1.0) を除く)。そのため、各主要カテゴリの例を 1 つずつ示す必要はありません。「Page-Enter」を「Page-Exit」(Web ページを離れる)、「Site-Enter」(サイトに入る)、「Site-Exit」(サイトを離れる) に置き換えるだけで、目的の効果を実現できます。覚えやすくもなります。「Duration=1.0」では、各サイクルの継続時間を秒単位で設定できます (現在の設定は 1 サイクルあたり 1 秒です)。 1 つの Web ページ上で 4 つの主要カテゴリのエフェクトを同時に設定できますが、各主要カテゴリに設定できるエフェクトは 1 つだけであることに注意してください。なお、Web ページがフレームページの場合は効果は表示されません。

<<: CSS で透明なグラデーション効果を実装するためのサンプルコード

>>: MySQL の時間タイプの選択