マーカーネット株式会社

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サイトをどこに外注するのか、少なくとも一度は迷ったこともあると思います。 もちろん何をWEB制作 …

CSS3の便利機能紹介。

CSS3の便利機能紹介。 http://www.markernet.co.jp/blog/2015/09/03/post-6063/ Facebook

ウェブデザインの幅が広がるFREEフォントの紹介

ウェブデザイン作りに当たって、フォントの選択はすごく大事なところであり難しい問題です。 普段、使うフォントってもう決まっていたりしませんか? 私の場合、欧文はHELVETICA,Futuraを和文はモ …

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

デザインの幅が広がる!クオリティの高いイラストサイトまとめ http://www.markernet.co.jp/blog/2015/08/07/post-5940/ Facebook

ホームページのリニューアルを考えたときに意識すること

早稲田大学のオフィシャルサイトが5日にリニューアルされたのはご存知でしょうか? 見ていただけるとすぐに分かると思うのですが、このリニューアルがスゴイ! 大学のサイトとは思えないですよね。 あまりにもお …