面白い動きや便利な機能をJSで実装！ その3：一目で印象に残るアニメーション背景を作成！

web制作をされている方ならば、サイトを訪れてくれた人を少しでも長く引き留めたいと思われると思います。
一体どうやって見てくれる人の興味をひけるのか。色々な方法がありますが、その一つとして面白い動きをするサイトならば、動きのないサイトよりも少しは目を引くのではないかと思います。

今回は面白い動きのある背景を簡単に実装できる方法をご紹介したいと思います。
この方法はマウスの動きにも連動しているので、見ているだけでなく、自分で動かすことが出来るのでとても面白いです。

デモ

ひとまずデモなので、狭い範囲のみですが、
これをサイト全体の背景に敷いてあげればインパクトのあるサイトが出来るのではないかと思います。

実装方法

jqueryと初めにJSを設置します。

次にパラメータの設定を行います。

最後に上記で設定した要素を記述します。

今回は「#particles」で記述しています。

これで実装完了です。

オプション

【minSpeedX】
particleの、X軸（横）移動の移動時間の最小時間を指定。
デフォルト：0.1

【maxSpeedX】
particleの、X軸（横）移動の移動時間の最大時間を指定。
デフォルト：0.7

【minSpeedY】
particleの、Y軸（縦）移動の移動時間の最小時間を指定。
デフォルト：0.1

【maxSpeedY】
particleの、Y軸（縦）移動の移動時間の最大時間を指定。
デフォルト：0.7

【directionX】
X軸（横）のparticleが流れていく方向の指定。”center”、”left”、”right”。
デフォルト：center

【directionY】
Y軸（横）のparticleが流れていく方向の指定。”center”、”up”、”bottom”。
デフォルト：center

【density】
生成されるparticleの密度を指定。
デフォルト：10000

【dotColor】
ドットの色を指定します。
デフォルト：#666666

【lineColor】
ドットをつなぐ線の色を指定。
デフォルト：#666666

【particleRadius】
ドットの大きさを指定。
デフォルト：7

【lineWidth】
ドットをつなぐ線の太さを指定。
デフォルト：1

【curvedLines】
ドットをつなぐ線を指定。
デフォルト：false

【proximity】
ドット同士が、どのくらい近づいたら線で結ぶかをpx数で指定。
デフォルト：100

【parallax】
マウスの動きに合わせた視差効果の有無を指定。
デフォルト：true

【parallaxMultiplier】
視差効果による動きの大きさを指定。
デフォルト：5

【onInit】
このプラグインのinitialize(初期化) が終わったタイミングで実行する処理を記述。
デフォルト：function() {}

【onDestroy】
particlegroundがdestroy（削除）された後に実行する処理を指定。
デフォルト：function() {}

これで動きのあるサイトが出来ます。
是非お試しください。

ファイルのダウンロードは下記からお願い致します。
公式サイト
http://jnicol.github.io/particleground/

弊社では社内制作にこだわるHTML構築技術から、WEBサイトの正確なコーディングをご提案します。
様々な目的に応じたプランを用意しておりますので、ご興味のある方はご覧ください。

コーディング最適化

WEBサイト制作実績3,000サイト以上！
新規作成からリニューアルまで、
多様なご要望にお応えした弊社制作事例から検討したい方はこちら

制作実績を見る