Particles.js はパーティクルの動的背景アニメーションを実装します-jsチュートリアル-php.cn

Particles.js はパーティクルの動的背景アニメーションを実装します

php中世界最好的语言

リリース： 2018-04-17 11:17:29

オリジナル

2893 人が閲覧しました

今回は、パーティクルのダイナミックな背景アニメーションを実装するための Particles.js について説明します。パーティクルのダイナミックな背景アニメーションを実装するための Particles.js の注意点について、実際のケースを見てみましょう。

操作プロセス:

基本的な処理はインターネット上にあるので参考にしてください。ただし、ログインページでそのまま使用すると細かいバグが発生するため調整が必要です。

1. まず、particles.js ファイルをページに導入します。

りー

2. ページ内の p をパーティクルを配置するコンテナとして使用します。 [通常は下部に配置されますが、CSS を改善する必要があります]

<script src="js/particles.js"></script>

ログイン後にコピー

設定ファイルをロードします: インターネットによると、load() メソッドを使用する場合は、設定 json ファイルを取得する必要があり、ライトパスでは身動きができなくなるそうです。

公式デモを参照してください http://codepen.io/VincentGarreau/pen/pnlso

<p id="particles"></p>
<style type="text/css">
 #particles {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰，会去抢风头，不好好做一个安静的背景。
  background-color: #26AFE3;
 }
</style>

ログイン後にコピー

eで直接書かれます 4. パラメータオプションを設定して使用します。オプションの詳細は、github 公式 Web サイトのページに記載されています。パーティクルの数や移動速度などを制御します

Chrome でファイルをダウンロードしてこのページに切り替えると、パーティクルの使用にはまだ問題がいくつかあります。解決策を待ちます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue-routerのルーティングメタ情報の使用方法の詳細な説明

vueでのParticles.jsライブラリの使用方法

以上がParticles.js はパーティクルの動的背景アニメーションを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。