Vue.js 2.0 に基づいたクールなアダプティブ背景ビデオログインページを実装します。-jsチュートリアル-php.cn

Vue.js 2.0 に基づいたクールなアダプティブ背景ビデオログインページを実装します。

小云云

リリース： 2018-01-18 09:03:07

オリジナル

1770 人が閲覧しました

この記事では、クールな背景ビデオを備えたログインページを実装する方法について説明します。ブラウザウィンドウは自由に拡大でき、背景ビデオと前景ログインコンポーネントの両方を常にウィンドウいっぱいに表示できます。前景コンポーネントは常に中央に配置され、ビデオのコンテンツは常に最大限に維持されることで、可能な限り最高の視覚効果が得られます。 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 + &#39;px&#39;,
  width: windowWidth + &#39;px&#39;,
  &#39;margin-bottom&#39;: (windowHeight - videoHeight) / 2 + &#39;px&#39;,
  &#39;margin-left&#39;: &#39;initial&#39;
  }
 } else {
  videoHeight = windowHeight
  videoWidth = videoHeight / 0.5625
  this.fixStyle = {
  height: windowHeight + &#39;px&#39;,
  width: windowHeight / 0.5625 + &#39;px&#39;,
  &#39;margin-left&#39;: (windowWidth - videoWidth) / 2 + &#39;px&#39;,
  &#39;margin-bottom&#39;: &#39;initial&#39;
  }
 }
 }
 window.onresize()
 }
 }
</script>

ログイン後にコピー

上記のコードの最も重要な部分は、ウィンドウオブジェクトの onresize イベントの監視です。ウィンドウサイズが変更されると、プログラムはビデオとマスクドームのサイズを同時に変更し、ビデオの最も狭い辺が常にブラウザウィンドウを満たすようにし、長い辺は左右で均等に切り取られます。

これにより、ビデオの中心は常にブラウザの中央に配置され、ブラウザウィンドウが任意に拡張された場合でも、ビデオのコンテンツは常に最大限に保持されます。最高の視界が得られます。

最終的な効果は次のとおりです: