マーカーネット株式会社

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

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

関連記事

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

親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」 http://www.markernet.co.jp/blog/2015/07/10/post-5790/ F …

【グローバルサイト運営担当者必見】多言語サイトSEOで絶対外せない3つのポイント!

弊社では英語、簡体中国語、繁体中国語、韓国語など世界主要言語でのSEOやサイト制作に取り組んでおります。 それぞれの言語のサイトのSEO対策の基本原則は変わらないですが、海外SEOの効率を向上させ、ア …

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

「SVG」というイメージフォーマットをご存知でしょうか? SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

WEBサイトのデザイン素材を紙媒体に使うとき、ベクターのデータがなくて困ったことありませんか? ペンツールでトレースするのも時間がかかるし、Photoshopでパスを作成したら境界がギザギザになってし …

【WEBデザインレシピ】 暑い夏にヒヤッとするホラーなデザインの作り方

【WEBデザインレシピ】 暑い夏にヒヤッとするホラーなデザインの作り方

もうすぐ夏がきますね! 今年は冷夏という噂も耳にしますが、日本の各地でちらほら真夏日が記録されていたりして… そこで今日は夏の暑さも吹き飛ぶ!?ホラーデザインの簡単レシピをご紹介させていただきます。 …