【jQuery】幾何学的でオシャレな背景を描画する[Particleground]の実装方法。2.0【jQuery】幾何学的でオシャレな背景を描画する[Particleground]の実装方法。ONZEhttps://on-ze.com/archives/2234HomeBlog【jQuery】幾何学的でオシャレな背景を描画する[Particleground]の実装方法。プラグインを紹介します。サンプルをご覧ください。[Particleground]:実装サンプルご覧いただいたように、ウィンドウいっぱいに散らばったたくさんの『点』と、それを結ぶ『線』がマウスの動きに反応してヌルヌルと動きます。初心者の方でも大丈夫かと。以下より、その実装方法を紹介していきます。導入方法まずは公式配布サイトより、必要なファイルをダウンロードしてきましょう。http://jnicol.github.io/particleground/ダウンロードした時pファイルを解凍すると「jquery.particleground.js」と「jquery.particleground.min.js」という2つのファイルが展開されます。内容は同じですが、「min」のほうは圧縮してあるので容量が小さくなっています。どちらか好きなほうを使ってください。別途jQuery本体ファイルも用意しておき、HTMLの適当な箇所で「jquery.js」と「jquery.particleground.js」を読み込みます。src="jquery.particleground.min.js"></script>同時に[Particleground]を効かせるためのボックス要素も準備しておきます。付与した要素を用意します。こちらは<body>〜</body>タグの任意の場所に設置してください。id="particles"></div></body>最後にスクリプトを動かすための設定のコードを記述します。4});これで[Particleground]が機能します。主な設定項目と初期設定は下記のとおり。particleがX軸を移動する際の最小スピード。particleがX軸を移動する際の最大スピード。particleがY軸を移動する際の最小スピード。particleがY軸を移動する際の最大スピード。X軸のparticleが移動する方向を指定。Y軸のparticleが移動する方向を指定。