マーカーネット株式会社

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デザイナーが仕事を依頼されたとき、まず最初に聞いておくべき7つの事。

こんばんわ。WEBデザイナーのKです。 本日は、WEBデザイナーがWEBディレクターから案件を依頼された時に、 必ず聞いておくべきことをまとめてみました。 ざっくりなので、細かく分けるとまだまだ沢山あ …

jQueryを使ってみよう【親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 今回は便利なjQueryプラグイン「imgLiqu …

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …

Google、ペンギンアップデート2.1を実施、アルゴリズムも変更されていた

Google、ペンギンアップデート2.1を実施、アルゴリズムも変更されていた

GoogleのMatt Cutts氏が、ペンギンアップデートver2.1を実行することをTwitter上で発表しました。 検索順位への影響は全体の1%以下とのことで、規模は大規模ではなさそうなことがう …

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する

jQueryでイベントが発生した要素を指定する$(this)。 jQueryを初めて使った頃は$(this)ってなんだ!? なんで普通に<li>なら$(“li”)じゃだめなの~!? なんて …