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 サービスを備えた仮想マシンをインストールする方法

推薦する

MySQLでヘッダー付きのCSVファイルをエクスポートする方法

公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...

JavaScript 文字列操作の 4 つの実用的なヒント

目次序文1. 文字列を分割する2. JSONのフォーマットと解析3. 複数行の文字列と埋め込み式4....

Nginxの仕組みの詳細な説明

Nginxの仕組みNginx はコアとモジュールで構成されています。 Nginx 自体は実際にはほと...

レアタグフィールドセットと凡例の使用方法の詳細な説明

<fieldset>と<legend>については、ほとんどの人はおそらく馴染...

Docker の MySQL コンテナのタイムゾーン問題の修正

序文Ahhang が Springboot プロジェクトを開発していたとき、フロントエンドから検証コ...

Linux 圧縮ファイルコマンド zip の使用例

「.zip」形式は、Windows システムでファイルを圧縮するために使用されます。実際、「.zip...

JavaScript es6 の新しい配列メソッドの詳細な説明

目次1. 各() 2. arr.filter() 3. arr.every() 4. arr.map...

シェアしたい絶妙なApple風無料アイコン素材18セット

Apple マグカップのアイコンと追加機能 HD ストレージボックス – アドオンパックセイバースノ...

Vue は検証コードのカウントダウンボタンを実装します

この記事では、検証コードカウントダウンボタンを実装するためのVueの具体的なコードを例として紹介しま...

ボタントリガーイベントを使用して背景色の点滅効果を実現します

背景色の点滅効果を実現するには、次のコードを <body> 領域に追加するだけです。コー...

vue cli3は環境ごとにパッケージ化の手順を実装します

cli3 でビルドされた vue プロジェクトは、ゼロ構成ファイルとして知られています。パッケージ化...

CSS でのナビゲーション バーとドロップダウン メニューの実装

1. CSSナビゲーションバー(1)ナビゲーションバーの機能ナビゲーション バーを使いこなすことは、...

Javascriptの基本を詳しく説明

目次変数データ型拡張ポイント要約する変数基本的な構文 var age=10; //ageという変数を...

RedisとMemcacheの比較と選び方

最近 redis を使っていて、とても便利だと感じているのですが、インメモリ データベースを選択する...

MySQL の一般的な日付比較および計算関数

MySql での時間比較の実装unix_timestamp() unix_timestamp 関数は...