Vue.js 2.0 に基づいたクールなアダプティブ背景ビデオ ログイン ページを実装します。
この記事では、クールな背景ビデオを備えたログイン ページを実装する方法について説明します。ブラウザ ウィンドウは自由に拡大でき、背景ビデオと前景ログイン コンポーネントの両方を常にウィンドウいっぱいに表示できます。前景コンポーネントは常に中央に配置され、ビデオのコンテンツは常に最大限に維持されることで、可能な限り最高の視覚効果が得られます。 Vue.js 2.0 ファミリ バケットに基づいています。具体的な効果を以下の図に示します。
最終的な効果を確認するには、記事の最後にアクセスしてください。
1. 背景ビデオ Web ページの既存の実装方法
海外に優れた Web サイト「Coverr」があり、フロントエンド開発者がクールな背景ビデオ ホームページを構築するのに役立つ完全なチュートリアルとビデオ リソースが提供されています。効果は以下の図に示されています:
チュートリアルは次のとおりです:
この図と私の実践から、次の意見が導き出されます:
このチュートリアルは jQuery を使用します。 Vue.js を使用したいので、jQuery を完全に置き換えることができます。
このチュートリアルの CSS と JavaScript コードは冗長すぎます。
サンプルを直接実行すると、効果が良くないことがわかります。ブラウザ ウィンドウを自由に拡大すると、背景ビデオが完全に適応できず、「黒いエッジやその他の欠陥が表示され」、期待どおりの効果が得られません。
2. 完璧な背景ビデオ Web ページをデザインします
まず、スキャフォールディング ツール vue-cli に基づいて vue-loader を使用してプロジェクトを作成します。構築が完了したら、対応するディレクトリに「.vue」ファイルを作成します。ログイン ページのテンプレート ファイルについては、特定の詳細は繰り返しません。このセクションの内容は .vue ファイルに限定されています。
2.1 HTML テンプレート
ニーズに基づいて、Coverr が提供する HTML テンプレートを少し変更しました。結果は次のとおりです:
<template> <p class="homepage-hero-module"> <p class="video-container"> <p :style="fixStyle" class="filter"></p> <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay"> <source src="PATH_TO_MP4" type="video/mp4"/> 浏览器不支持 video 标签,建议升级浏览器。 <source src="PATH_TO_WEBM" type="video/webm"/> 浏览器不支持 video 标签,建议升级浏览器。 </video> <p class="poster hidden" v-if="!vedioCanPlay"> <img :style="fixStyle" src="PATH_TO_JPEG" alt=""> </p> </p> </p> </template>
テンプレートでは、フィルター クラスの p タグが背景ビデオのマスクです。 、マスクを通じてビデオの明るさや色温度などを制御できます。
video タグは標準の HTML5 タグで、2 つの形式のビデオと画像プレースホルダーを提供します。背景ビデオはロード後に自動的に再生されます。
Coverr が提供するオリジナルのテンプレートは直接デバッグできます。ページには画像のみが表示されますが、ビデオは再生できません。この問題は、Vue.js の v-if ディレクティブを使用することで解決されます。
2.2 CSS
元のテンプレートの CSS コードは大幅に合理化されました。 変更された CSS コードは次のとおりです:
<style scoped> .homepage-hero-module, .video-container { position: relative; height: 100vh; overflow: hidden; } .video-container .poster img, .video-container video { z-index: 0; position: absolute; } .video-container .filter { z-index: 1; position: absolute; background: rgba(0, 0, 0, 0.4); } </style>
ほとんどのスタイルはプロジェクトによってグローバルに変更されているため、このテンプレート専用のスタイルのみがここに残ります。 以下の 3 つです。項目は次のように簡単に説明されます。
コンテナ p はブラウザ ウィンドウを覆います
マスク p はビデオの上に配置され、マスクとして機能します。
2.3 JavaScript コード
<script> export default { name: 'login', data() { return { vedioCanPlay: false, fixStyle: '' } }, methods: { canplay() { this.vedioCanPlay = true } }, mounted: function() { window.onresize = () => { const windowWidth = document.body.clientWidth const windowHeight = document.body.clientHeight const windowAspectRatio = windowHeight / windowWidth let videoWidth let videoHeight if (windowAspectRatio < 0.5625) { videoWidth = windowWidth videoHeight = videoWidth * 0.5625 this.fixStyle = { height: windowWidth * 0.5625 + 'px', width: windowWidth + 'px', 'margin-bottom': (windowHeight - videoHeight) / 2 + 'px', 'margin-left': 'initial' } } else { videoHeight = windowHeight videoWidth = videoHeight / 0.5625 this.fixStyle = { height: windowHeight + 'px', width: windowHeight / 0.5625 + 'px', 'margin-left': (windowWidth - videoWidth) / 2 + 'px', 'margin-bottom': 'initial' } } } window.onresize() } } </script>
上記のコードの最も重要な部分は、ウィンドウ オブジェクトの onresize イベントの監視です。ウィンドウ サイズが変更されると、プログラムはビデオとマスク ドームのサイズを同時に変更し、ビデオの最も狭い辺が常にブラウザ ウィンドウを満たすようにし、長い辺は左右で均等に切り取られます。
これにより、ビデオの中心は常にブラウザの中央に配置され、ブラウザウィンドウが任意に拡張された場合でも、ビデオのコンテンツは常に最大限に保持されます。最高の視界が得られます。
最終的な効果は次のとおりです:
関連推奨事項:
WeChat アプレットは画像コンポーネント画像の適応幅比の共有例を実装します
画像の引き伸ばしを防ぐための Javascript の適応処理の詳細な説明の例
以上がVue.js 2.0 に基づいたクールなアダプティブ背景ビデオ ログイン ページを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

PPT の背景の置換は、プレゼンテーションの視覚スタイルを迅速に統一できる重要な操作です。スライド マスターを変更するか、背景の書式設定機能を使用すると、プレゼンテーション全体の背景をすばやく置き換えることができます。さらに、一部の PPT バージョンでは、すべてのスライドの背景を簡単に置き換えることができる一括置換機能も提供しています。背景を置き換えるときは、プレゼンテーションのテーマに合った背景を選択することに注意し、背景の鮮明さと解像度が要件を満たしていることを確認する必要があります。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

Go 言語は、C++ の複雑さと同時実行サポートの不十分さの問題を解決するために Google で生まれました。その本来の目的は、プログラマーの生産性を向上させ、信頼性が高くスケーラブルなシステムを構築し、コードの移植と共有を促進するために、シンプルで学習しやすく効率的な同時実行性、メモリセーフなクロスプラットフォーム言語を作成することです。

1. Meitu Xiu Xiu ソフトウェアを開き、[画像美化] を選択し、アルバムから写真をインポートします。 2. 下部ツールバーの[カット]をクリックし、[背景置換]機能を選択します。 3. [背景] オプションで、単色ボックスから希望の背景色を選択するか、カスタム画像をアップロードします。 4. 選択内容を確認後、[保存]をクリックすると背景色の変更が完了します。
