問題
jQueryライブラリ「Particleground」はどうやって使う？
解決策
「position: fixed;」で固定し、「z-index: -1;」で後ろに回り込ませた要素をウインドウと同じ幅、高さにして「Particleground」を適用させる。
幾何学のパーティクルアニメーション
幾何学のパーティクルアニメーションの背景が演出できるjQueryライブラリ「Particleground」の使い方をご紹介します。
DEMO
現在のこのページの背景に「Particleground」を適用させています。
「Particleground」を取得します。
まず、下記サイトにアクセスします。
【Particleground demo】
http://jnicol.github.io/particleground/
「DOWNLOAD」ボタンをクリックします。
ダウンロードしたzipファイル「particleground-master.zip」を解凍します。
解凍した「particleground-master」フォルダの中から使用するファイルは以下の1点です。
- 直下にある「jquery.particleground.min.js」をjavascriptフォルダへコピーします。
CSSの設定
「Particleground」用のCSSの設定を行います。
- ※今回は「pg-canvas」というクラスを「Particleground」の土台として進めていきます。
.pg-canvas{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}「Particleground」の読み込みと処理の構築
最後に「Particleground」の読み込みと処理を構築します。
「jquery.particleground.min.js」の読み込み
「jquery.particleground.min.js」を読み込みます。
<script type="text/javascript" src="ファイルパス/js/jquery.particleground.min.js"></script>「Particleground」の基本的な記述方法
「Particleground」を実行する基本的な記述方法は以下となります。
$('.pg-canvas').particleground( 'オプション' );実際に実行する記述例
$('body').prepend('<div class="pg-canvas"></div>');
var w = $(window).width();
var option = {
dotColor: '#ddd',
lineColor: '#eee',
parallax: false
};
$('.pg-canvas').particleground( option );
//画面高さ取得
var h = $(window).height();
$('.pg-canvas').css('min-height', h + 'px');
$('.pg-canvas').css('height', h + 'px');
$(window).resize(function() {
//画面リサイズ時の高さ取得
h = $(window).height();
$('.pg-canvas').css('min-height', h + 'px');
$('.pg-canvas').css('height', h + 'px');
});- クラス「pg-canvas」が常にウインドウの幅、高さと同じになるように設定します。
参照
以下のサイトが、より詳しく解説してくれています。
【【jQuery】幾何学的でオシャレな背景を描画する［Particleground］の実装方法。 – ONZE】
https://on-ze.com/archives/2234
コメント