クリエイターブログ

jQueryでWebサイトの背景をおしゃれにする

2014.12.15 Posted by

こんにちは、第7回ウェブラボ技術メモです。

今回は、Webサイトの背景をおしゃれにするプラグイン『Particleground』を実装してみたいと思います。

『Particleground』は、パーティクルアニメーション(コンピュータグラフィックの技術のひとつでパーティクル(粒子)を沢山発生させて動かす仕組み)を表示するプラグインです。また、マウスカーソルに追従して動く視差効果(パララックス)の機能もあります。

配布ページはこちら

では、早速実装してみましょう。

今回もjQueryのプラグインを使用しますのでjquery.jsも一緒に読み込ませます。

head内は、背景を表示させたい要素を忘れずに指定してあげましょう。また、ここでドットの色などのオプションなどを指定することも出来ます。

■HTML head内

HTMLはhead内と同様に背景を表示する要素を記述します。

■HTML

CSSでは主に背景色を指定し、必要に応じて幅や高さなどの調整を行いましょう。

■CSS

完成したデモはこちらです。

いかがでしょうか、背景がパーティクルアニメーションになり、とてもおしゃれになっています。

他にもオプションで、particleの流れる速さやドット間の線を曲線にしたり、自分好みにカスタマイズすることも可能です。

ちなみに対応ブラウザは、Google Chromeなどのモダンブラウザ、Internet Explorer 9以降、スマートフォンではiOS 7.1のSafari、Android 4以降のものに対応してるみたいです。それ以外の古いブラウザなどはアニメーションが表示されず背景色のみとなってしまいます。

古いブラウザなんて気にしないよという人は一度試してみてはどうでしょうか?

以上、ウェブラボ技術メモでした。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

CONTACT

お電話でのお問い合わせ

03-5366-3277

受付時間:平日9:30〜18:30

メールフォームからのお問い合わせ

お問い合わせ(東京本社)

PAGETOP

Document資料請求

Contactお問い合わせ