背景に動きをつけたいときに役立つプラグイン等

「とにかく見た感じ華やかにしたいなぁ」

サイトで一番大事なのは中身です。どんなに華やかにしようが、中身がペラッペラでは、あまり価値がありません。とは言え、サイトに来てくださる方の目を引いて「おっ!」と言わせたい。
ということで、簡単に導入できる背景に動きをつけることのできるjQueryプラグインについて、これまた備忘のために、参考にしたサイトや使用感などを書いていきます。

Particles

スクリーンショット 2016-09-04 15.50.49

デモ

参考にしたサイト

背景で幾何学模様の立体がグリグリ動きます。
模様の密度や動くスピード、カーソルを乗せた時の動作やクリッックした時の動作など、すごく細かく設定ができる上、模様自体も数種類あって、デモを触っているだけでもとても楽しいです。デモをいじっていい感じの背景アニメーションができたら、CodePenに移ってそのCSSを取得し、ParticlesのCSSファイルにコピーすれば、簡単に自分好みの背景にすることができます。

Waves

スクリーンショット 2016-09-04 16.02.17

デモ

3つの波が背景でウネウネと動いてくれます。
JavaScriptを使わずに、CSSだけで動いてくれる優れもの。裏で3つの円形がぐるぐる回ってるみたいですね。CSSだけなので、構造が簡単。非常にいじくりやすく、自分好みの状態にすぐに持っていけます。円形が回っている構造上、直線的な波は表現しづらかったのと、3つの透過する円形の重なりで色が変わってくるので、色の指定が少し難しかったのですが、参考サイトいらずでした。

本当にどれも質が高い格好いいものばかりです。オープンソースへのリスペクトを忘れずに、私もいつか、こういった格好いいプラグインを作って、Web業界に貢献していきたいなぁと思います。