マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery) WEB制作

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

投稿日:2015年3月9日 更新日:

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

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

デモ

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

実装方法

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

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script src=”[ファイルへのパス]/jquery.particleground.min.js”></script>

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

$(document).ready(function() {
$(‘#particles’).particleground({
dotColor: ‘#FF9900’, //ドットの色の設定
lineColor: ‘#FF9900’, //線の色の設定
particleRadius: 10 //ドットの大きさの設定
});
});

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

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

<div id=”particles”></div>

これで実装完了です。

オプション

【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/

-javascript(jquery), WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。 web制作の仕事をず~~~っとやっていると専門的な事も基本的なことと勘違いしてしまいがちです。私もwebに触れる前は「ブラウザって何?」「 …

Movable Type6がリリースされました

Movable Type6がリリースされました

movable type6 以下の新機能が追加されたとのことです。 – Data API APIを通じてMovable Typeの管理画面の操作や記事の読み込みが可能になったとのことです。 – Cha …

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

「CSSを設定したのに効かない!?」っていうことありますよね。 その場合、一概には言えませんが、もしかしたらCSSの書き方が原因かもしれません。 下記を参考に、CSSを書き直せば直る可能性もぐっと高ま …

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

高クオリティな写真素材がDLし放題!それでいてフリー。これはブクマするしかない!

画面いっぱいに背景写真を敷くWEBデザインが流行っている今日この頃、 見栄えのする写真を探すのもなかなかの一苦労だったりしますよね。 そんな悩めるデザイナーさんたちにオススメしたい、高クオリティな写真 …

WEBトレンド! 全面に写真を配置した 最新サイトのご紹介 ~素敵サイトの旅 その3~

こんにちは!web初心者のKです! 今日は曇りですが、みなさんお風邪など召されていませんか? 私は雪対策にブーツとコートを少し前に購入しました! 備えあれば憂いなし! もう雪が来ても怖くありません!! …