マーカーネット株式会社

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

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

関連記事

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

線画イラストの線画だけ抜き出したい!背景を透過したい!!・・・そんな時に役立つphotoshopの小技をご紹介します。   (1)まず、画像をphotoshopで開きます。 (2)メニューの …

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

今ではスタティックなWebサイトからでもHTML5と最新のJavaScript環境(各種の既製ライブラリ、フレームワークなど)があれば、相当複雑高度なサービスを提供できますよね。 そんなスタティックな …

WEB制作に便利!CSS3ボタンジェネレーター3選

WEB制作に便利!CSS3ボタンジェネレーター3選

もちろん使わない派の方もいるかもしれませんが、私は便利なツールがあればどんどん使っちゃいます。 WEB制作の時短にもつながる便利なジェネレーターをご紹介します。   「CSS3 Button …

中国語サイトのスマートフォンサイト制作 は必要か?必須か?

中国語サイトのスマートフォンサイト制作 は必要か?必須か?

ChiKuu(チークー)という、海外で活躍するスポーツ選手や実業家、アーティストのつぶやきや最新情報などを翻訳してくれるウェブサイトに、新しい表示言語として簡体字中国語が加わりました。 ChiKuu. …

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング PYPL PopularitY of Programming Language index 10月のプログラミング言語人気ランキングの発表によりますと …