問題 × 解決策

幾何学のパーティクルアニメーションの背景が演出できるjQueryライブラリ「Particleground」

問題

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

コメント

コメントを残す

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

eleven + 20 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧