【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に詳細が記載されてます。


  • メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
  • 【jQuery】画像のサイズを保持しつつレスポンシブに変化させる「ResponsifyJS」
  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
  • 直感的に操作できるサイトツアーを実装できるライブラリまとめ
  • 複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
RELATED POSTS
  • UIデザインのスニペットがまとめられたサイト「CodeMyUI」
  • jQueryプラグインをまとめた検索サイト「jQuery Cards」
  • SVGの背景パターンを手軽に作れるジェネレーター「SVG Backgrounds」
  • 【JS】物理法則に基づいたアニメーションライブラリ「Dynamics.js」
  • レスポンシブのチェックに役立つサービス「Resizer」
  • 【jQuery】ページめくり効果を付けられる「OneBook3d」
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】
  • パーツを組み合わせてイラストを作成できる「Open Peeps」
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」