【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>
今回はgeometryというIDをつけます。
- HTML：
<body> <div id="geometry"></div> </body>
- JavaScript：
$('#geometry').particleground();
オプションとメソッドが用意されていて色々変更することもできます。
よく使いそうなものだと下記のような記述になります。
- JavaScript：
$('#geometry').particleground({ density: 10000, //密度 dotColor: '#666666', //点の色を指定 lineColor: '#666666', //線の色を指定 particleRadius: 7, //点の大きさを指定 lineWidth: 1, //点同士の間の線の太さを指定 curvedLines: false, //点同士をつなぐ線の形を指定（trueは曲線、falseは直線） parallax: true, //マウスの動きに合わせて動かすか指定（falseで無効） parallaxMultiplier: 5 //パララックスで動く範囲を指定 });
メソッドとかと組み合わせると面白いこともできそうです。