【jQuery】ジオメトリックを実装できる「particleground.js」

 
有名なプラグインなので今さら感がありますが、Webサイトでちらほら見かけるジオメトリックを背景に実装できるparticleground.js。サイトにアクセントをつけたい時などに使用してみたいプラグインです。

particleground.js

Githubに公開されてますのでファイル一式をダウンロードしてください。

使い方はjqueryとダウンロードした「jquery.particleground.min.js」を読み込ませます。

Java File
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.particleground.min.js"></script>

あとは以下のようにhtmlの記述とjavaで適用する要素とオプションを設定します。

html
<div id="particles"></div>
Java
$('#particles').particleground({ //要素の指定
    dotColor:  '#ff0000',    //ドットの色
    lineColor: '#ff0000',        //線の色
    particleRadius: 5            //ドットのサイズ
});

オプションについてはGithubに詳細が記載されてます。



  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • 【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」
  • 動きのあるバブルを背景に設定することができる「bubbly-bg」
  • 様々なスタイルのCSSを簡単に作れる「Generate CSS」
  • スクロール連動のエフェクトを実装できるライブラリ「AOS」
RELATED POSTS
  • リアルな水滴を表現できる「Rain & Water Effect Experiments」
  • SVGで作成されたローディングアイコンセット「SVG Loaders」
  • アニメーションが素敵なツールチップ「Playful Little Tooltip Ideas」
  • SVGでダミー画像を生成できるサービス「Placeholder pics」
  • 世界の国旗をCSSとdivのみで実装する「CSS Flags」
  • YoutubeやGoogleMapをレスポンシブ化するジェネレーター「Embed Responsively」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】
  • CSSで作成する吹き出しとデザインのアイデア
  • 導入しておきたいWordPressのおすすめプラグイン