【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に詳細が記載されてます。
\ Webデザインに関するお役立ち情報を定期的に配信中 /
- 陽炎のようなエフェクトを実装できる「Animated Heat Distortion Effects with WebGL」
- 背景にスクロールアニメーションを実装できる「Physics-Based Background Scroll Effects」
- input要素への入力を制御できるスクリプト「Cleave.js」
- vue.jsを使用したプロジェクトをまとめたサイト「made with vue.js」
- 【jQuery】画像をハーフトーンに変換するプラグイン「Breathing Halftone」
- WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
- 無料で使えるフリーイラスト素材サイト(商用利用可)
- 無料で使用できるフリー画像・写真素材サイト(国内/海外)
- Webデザインの参考サイト | Web Design Clip - Webデザインクリップ -
- LP・ランディングページの参考サイト | Web Design Clip [L]