幾何学模様を簡単に作成できる「particles.js」を使用してみた

# WEB制作

2020.05.22

みなさま、こんにちは。

今回は幾何学的模様を簡単に作成できる「particles.js」を使ってみました。

jQueryを読み込む必要もなく、シンプルでカスタマイズも簡単なので、ぜひ使用してみてください。

プラグインで簡単「particles.js」の使い方

今回は、ちょうどいいところにあった、本サイトのヘッダー画像を参考にすることにしました。

デモサイトを作成したのでご確認ください。

【DEMO】幾何学的模様を簡単に作成できる「particles.js」を使用してみた

事前準備

まずは、https://vincentgarreau.com/particles.js/ここからプラグインをダウンロードしてください。

ダウンロードした圧縮ファイルに particles.min.js というファイルがありますので、そちらを使用します。

任意の名前でHTMLファイルを作成し、

上記のようにプラグインを読み込んでください。

init.js は実行するためのJavascriptになりますので、名前は任意で決めてください。

ここでは init.jsという名前にしました。

次にHTMLファイルのコンテンツを書いていきます。

幾何学模様が描かれる箇所になります。

今回はわかりやすいように、

css に

を指定しました。

これで準備は整いました。

幾何学模様を描く「particles.js」を実行

最後にとりあえず読み込んでおいた init.js に下記、ソースを記載してください。

実行すれば背景で幾何学模様がウヨウヨと動いていると思います。

今回はヘッダー画像をモデルに作成したので、 CSS に、

を指定しています。

すこし違いはありますがヘッダー画像に似たものができたのではないでしょうか。

init.js に解説をコメントアウトしておきましたので、すこしいじって遊んでみてください。

マウスホバーで模様が逃げるなどのカスタマイズも可能ですので、動きのあるサイトが作れるのではないでしょうか。

個人的にはあまり動きすすぎるのも考え物だと思いますが……。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~