vue は Web ページを開くビデオ コードを実装します

この記事では主に Web ページを開くビデオを作成するための Vue のサンプル コードを紹介します。必要な方は参考にしていただければ幸いです。

このデモの背景はビデオ、テキストはプリンター効果です。テキストが入力されるまでボタンは表示されません。ボタンをクリックすると背景が上に折り畳まれ、デフォルトのホームページコンポーネントが表示されます（場合新しく構築された vue プロジェクトのリストです。helloWorld のコンポーネントです)

会社のコンピューターには GIF アニメーションがありませんので、ご了承ください。効果を確認したら、ダウンロードできます

私は常に Web ページの先頭にビデオまたはアニメーションを入れるのが好きです。個人的には、Web ページのオープニング アニメーションは閲覧を誘導する役割を果たしていると考えています。 Web ページの始まりは、多くの場合、Web サイトを閲覧するユーザーにとって、成功の半分となります。

上記はすべてナンセンスです。Web ページを開くアニメーションはモバイル端末で広く使用されています。具体的な操作は短い本で更新されます。今日は主に、Vue が PC 側の Web ページのオープニング アニメーションをどのように作成するかについて説明します。

vueプロジェクト一覧のsrcと同階層にindex.htmlがあり、主にここで記事を作成しています。

1. まず、vue レンダリング コンポーネントはこのホームページ インデックスに基づいていることを理解する必要があります。vue を使用して新しいプロジェクトを作成すると、デフォルトで開かれるコンポーネントがあります。詳しくは説明されていない。しなければならないのは、このコンポーネントを非表示にすることです。そうしないと、そのコンテンツがビデオの上に表示されてしまいます。

helloWorld.vue コンポーネント:

index.html の helloWorld コンポーネントから hello

を削除します。もちろん、削除する前に、別のコンテナに一時的に保存する必要があります。そうしないと、クローンを作成することもできます。 (クローン作成コードはデモされませんが、質問がある場合は、コメントするかプライベート メッセージを送信できます)。一時ストレージの目的は、後でこのノードをページに復元することです。

2. このデモでは、ビデオ プラグインを直接見つけて挿入します。この手順は、インポートする必要があるすべてのファイルを配置するだけです。静的フォルダー static 内にあります。

ホームページのスタイルはコンポーネント内のラベルのスタイルに直接影響するので、プラグインを導入する際はスタイルの調整に注意し、ラベルでスタイルを直接記述することは避けてください

3. 背景がすでにビデオである場合、美的観点から、Web ページにいくつかの単語を追加するだけで済みます。スタイルが多すぎると混乱し、誇張されてしまいます。このデモでは、typewrite.js というプラグインも使用します。単語を 1 つずつ入力する効果。

4. ボタンにタイマーを設定し、入力後の時間を計算します。ボタンが表示され、ボタンをクリックすると、インデックスの背景コンテナー全体が折りたたまれます (すべての HTML コンテンツ)。ホームページは 1 つのコンテナに配置されます)、hello コンポーネントのコンテンツを復元します。こんにちは、何か書いてください。

...

デモには要素やその他の構成の問題が含まれています

関連する推奨事項:

Html Webページのヘッド 地区仕様の知識

【CSS】Webページがグレーになる

JSとCSSでWebページ読み込み時のアニメーション効果の共有を実現

以上がvue は Web ページを開くビデオ コードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。