Vue ログインページ用の動的パーティクル背景プラグインの実装

Vue ログインページ用の動的パーティクル背景プラグインの実装

動的パーティクル効果は次のとおりです。

ここに画像の説明を挿入

プラグインをインストールする

npm インストール vue-particles --save-dev

main.js ファイルにグローバルにインポートする

'vue-particles' から VueParticles をインポートします。  
Vue.use(VueParticles)

vueファイルで使用する

 <vue-パーティクル
          カラー="#409EFF"
          :particleOpacity="0.7"
          :粒子数="60"
          形状タイプ="円"
          :粒子サイズ="6"
          ラインカラー="#409EFF"
          :行幅="1"
          :lineLinked="true"
          :line不透明度="0.4"
          :線の距離="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="つかむ"
          :clickEffect="true"
          クリックモード="プッシュ">
</vue-パーティクル>

背景画像として動的パーティクルを使用します。新しい div を表示する必要がある場合、div は vue-particles コンテンツをカバーすることができないため、後で順番に表示されることがわかります。そのため、 position:absoluteが追加され、新しいdivボックスがある場合はposition:relativeに設定されます。

<スタイル>
#パーティクルjs {
  幅: 100%;
  高さ: calc(100% - 100px);
  位置: 絶対;
}
</スタイル>

ここに画像の説明を挿入

上記の属性について:

vue-particlesのプロパティ:
color: 文字列型。デフォルトは「#dedede」です。粒子の色。
粒子不透明度: 数値型。デフォルトは 0.7 です。粒子の透明度。
particlesNumber: 数値型。デフォルト値は 80 です。粒子の数。
shapeType: 文字列型。デフォルトは「circle」です。使用可能なパーティクルの外観タイプは、「円」、「エッジ」、「三角形」、「多角形」、「星」です。
particlesSize: 数値型。デフォルト値は 80 です。個々の粒子のサイズ。
linesColor: 文字列型。デフォルトは「#dedede」です。線の色。
linesWidth: 数値型。デフォルトは1です。線の幅。
lineLinked: ブール型。デフォルトは true です。接続ケーブルは入手可能ですか?
lineOpacity: 数値型。デフォルトは 0.4 です。線の透明度。
linesDistance: 数値型。デフォルトは150です。線の距離。
moveSpeed: 数値型。デフォルトは 3 です。粒子の移動速度。
hoverEffect: ブール型。デフォルトは true です。ホバー効果があるかどうか。
hoverMode: 文字列型。デフォルトは true です。使用可能なホバー モードは、「つかむ」、「撃退する」、「バブル」です。
clickEffect: ブール型。デフォルトは true です。クリック効果があるかどうか。
clickMode: 文字列型。デフォルトは true です。利用可能なクリックモードは、「プッシュ」、「削除」、「反発」、「バブル」です。

Vue ログインページ用の動的パーティクル背景プラグインの実装に関するこの記事はこれで終わりです。Vue 動的パーティクル背景の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueはログインページの背景パーティクル効果を実装します
  • Vue3 でパーティクル プラグインを使用してパーティクル背景を実装する方法の詳細な説明
  • Vue プロジェクトでパーティクルを使用してパーティクル背景効果を実現する方法と、遭遇した落とし穴 (ボタンがクリックに反応しない)
  • Vue パーティクル エフェクトのサンプル コード
  • Vueが星空効果を実現

<<:  mysql-8.0.16 winx64 最新インストール チュートリアル (画像とテキスト付き)

>>:  Mac に Windows サービスを備えた仮想マシンをインストールする方法

推薦する

HTMLからPDFへの変換のための純粋なクライアント側と純粋なサーバー側の実装ソリューション

必要ユーザーがフォームに入力して「保存」をクリックすると、PDF ドキュメントを直接ダウンロードでき...

Harborを使用してプライベートDockerリポジトリを構築する方法

目次1. オープンソースの倉庫管理ツール Harbor 2 インストール2.1 DockerとDoc...

Angularの親子コンポーネント通信の詳細な説明

目次使用されるAPI簡単な例人.ts親コンポーネントサブコンポーネント効果要約する使用されるAPI ...

Weibo の一括フォロー解除機能を実装する JavaScript コード

Weibo ユーザーのフォローを一括で解除するクールな JavaScript コードWeibo には...

APPログインインターフェースシミュレーション要求を実装するためのPostmanデータ暗号化と復号化

目次主に使用されるPostmanの機能データの暗号化と復号化さまざまなパラメータ設定実際に送信された...

MySQLで負荷分散を実装する方法

序文MySQL は、クライアント/サーバー構造に基づく、高速、高性能、マルチスレッドのオープン ソー...

React Nativeのカスタムルーティング管理に関する深い理解

目次1. カスタムルーティング2. タブナビゲーション3. データの返却要約する1. カスタムルーテ...

MySQL 8.0.12 のインストールと設定のグラフィックチュートリアル

MySQL 8.0.12 のダウンロードとインストールのチュートリアルを録画し、全員と共有しました。...

HTML の marquee 属性の詳細な説明

このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルでのみサポートされているため、IEカ...

DockerにRabbitMQをインストールする詳細な手順

目次1. 鏡を見つける2. RabbitMQイメージをダウンロードする3. RabbitMQコンテナ...

純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...

Mysql GTID Mha 設定方法

Gtid + Mha + Binlog サーバー構成: 1: テスト環境OS: CentOS 6.5...

JS を使用して要素が配列であるかどうかを判断する例

検証できるデータの種類は次のとおりです a = [1,2,3,4,5,6]とします。 b = [とし...

Portainer を使用した Docker コンテナのデプロイのプロジェクト実践

目次1. 背景2. 操作手順3. Portinerをインストールする3.1 Dockerのデプロイメ...

Linux サーバーに SSH パスワードなしでログインする方法

テスト サーバーにログインするたびに、必ず ssh ログインのパスワードを入力する必要があります。ロ...