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

見落とされがちな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 の時間タイプの選択

推薦する

CentOS7 64でのMySQL5.6.40の詳細なインストール手順

CentOS7 64でのMySQL5.6.40のインストール手順1) 以前にインストールしたMySQ...

Vue v-for ループを書く 7 つの方法

目次1. v-forループでは常にキーを使用する2. 特定のスコープ内でv-forループを使用する3...

Vueプロジェクトがグラフィック検証コードを実装

この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...

Dockerはコンテナを通じてイメージを生成し、詳細にDockerCommitを送信します

目次ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを...

セマンティックウェブページ XHTML セマンティックマークアップ

構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...

ウェブページレイアウトデザインのシンプルな原則

この記事では、Web ページ レイアウト デザインのいくつかの簡単な原則をまとめ、Web ページ デ...

MySQL ソート機能の詳細

目次1. 問題のシナリオ2. 原因分析3. 解決策4. 知識を広げる4.1 クエリの最適化を制限する...

Vue3 がデータ監視を実装するためにプロキシを使用する理由の分析

Vue データの双方向バインディング原則ですが、この方法には欠点があり、配列とオブジェクトの部分的な...

JavaScriptでよく使われる配列重複排除実戦ソースコード

アレイの重複排除は、通常、就職面接中に遭遇し、アレイの重複排除方法のコードを手動で記述することが求め...

ミニプログラム開発ツールのソースコードからの基本実装の分析

目次ミニプログラム開発者ツールのソースコードを表示する方法ミニプログラムアーキテクチャ設計1. ミニ...

myisamchk および mysqlcheck ツールを使用して破損した MySQL データベース ファイルを迅速に修復する方法

サーバーのデータベース ハード ディスク領域がいっぱいだったため、大量のデータの書き込みに失敗し、「...

Docker ベースの Redis クラスターの構築方法

Redisイメージをダウンロードする docker pull yyyyttttwww/redis を...

MySQL でのトランザクションの使用方法

基礎トランザクションは、SQL ステートメントのグループに対するアトミック操作です。つまり、グループ...

レスポンシブ原則と Vue2.0/3.0 の違いについての簡単な分析

序文vue3.0 が正式にリリースされて以来、多くの友人が vue3.0 に切り替えました。ここでは...

Linux デュアル ネットワーク カード バインディング スクリプト メソッドの例

Linux の操作と構成作業では、デュアル ネットワーク カードのバインディングがよく使用されます。...