【Particleground】ウェブサイトの背景に幾何学的でジオメトリックな模様を表示できるjQueryプラグイン

2016.07.21

システムやITを表現するウェブサイトによく使われるような模様を表示したい

イメージ画像
幾何学的な模様をウェブサイトの背景に使用したいときがあります。
そんな時はParticlegroundを使うとお手軽に設定できます。

使い方は、
jQuery本体とGitHubからダウンロードしたjquery.particleground.min.js、
またはjquery.particleground.jsを一緒に読み込みます。
HTML:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.particleground.min.js"></script>
次にbodyタグ内に任意のIDがついたdivを記述します。
今回はgeometryというIDをつけます。
HTML:
<body>
    <div id="geometry"></div>
</body>
そしてParticlegroundを実行させるスクリプトを記述します。
JavaScript:
$('#geometry').particleground();
Particlegroundには、
オプションとメソッドが用意されていて色々変更することもできます。

よく使いそうなものだと下記のような記述になります。
JavaScript:
$('#geometry').particleground({
	density: 10000, //密度
	dotColor: '#666666', //点の色を指定
	lineColor: '#666666', //線の色を指定
	particleRadius: 7, //点の大きさを指定
	lineWidth: 1, //点同士の間の線の太さを指定
	curvedLines: false, //点同士をつなぐ線の形を指定(trueは曲線、falseは直線)
	parallax: true, //マウスの動きに合わせて動かすか指定(falseで無効)
	parallaxMultiplier: 5 //パララックスで動く範囲を指定
});
他にもまだまだあるので、
メソッドとかと組み合わせると面白いこともできそうです。

参考にしたホームページ・ブログ- I thank for this article. -

← 【Animsition】ウェブサイトの遷移時にアニメーションを追加しながらページ移動ができるjQueryプラグイン
【PHP基礎】PHPのfor命令を使って九九の表を出力する →