CSS/JavaScriptで作られた美しいアニメーション背景8選

Webデザインにアニメーションを取り入れると、見る人の注意を引きつけられるだけでなく、華やかさもプラスできます。

今回取り上げるのは、アニメーションの背景です。背景に使うアニメーションは、魅力的であると同時に控えめでなければいけません。CSSやJavaScriptを使った、バラエティ豊かなアニメーション背景8選をご紹介します。

1. 液体のようなアニメーション背景

写真や動画に見られるような、ぼかしがかかったスタイルを、アニメーション背景に活用しています。ピントが合ったり外れたりする様子を思わせるアニメーションです。

滑らかに動くアニメーション背景には、プレーンなJavaScriptとHTMLが使われています。

See the Pen Animated Bokeh Lava Lamp Canvas by smpnjn (@smpnjn) on CodePen.

2. 色を変えられる繊細なアニメーション背景

繊細なすりガラスのようなアニメーションのなかで、円形のマテリアルが静かに浮いています。

「Rondomise Colors」ボタンを押すことで色をランダムに変えられるのも面白いです。

See the Pen Generative UI – Orb Animation [pixi.js] + Frosty Elements ❄️ by George Francis (@georgedoescode) on CodePen.

3. 波のようなアニメーション背景

ヒーローエリアと他のコンテンツを分けるのに最適な、CSSで作られた穏やかな波のアニメーション。

印象的でありながら悪目立ちません。

See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.

4. 色が変わるグラデーションのアニメーション背景

アニメーション背景のなかでもおすすめなのが、グラデーションです。

グラデーションを使うと、Webページの重要な要素から目をそらさせることなく、印象を残すことができます。

このスニペットはCSSのみで、放射状のグラデーションの色相を絶妙に変化させています。

See the Pen CSS animated background by Andrew (@chickenroyal) on CodePen.

5. シームレスなアニメーション背景テキスト

CSSのbackground-clipを活用したスニペット。

テキストに境目のないスクロールアニメーションをつけています。

See the Pen CSS Seamless Animated Text by George Brook (@georgebrook) on CodePen.

6. 半透明の図形が浮き上がるアニメーション背景

アニメーション背景を使うにあたって注意したいのが、スピードです。

このCSSのみで作られたスニペットでは、図形が回転しながら移動しています。しかし動きがゆっくりなので、ユーザーの邪魔になりません。

アニメーションの上にテキストを配置する場合は、スピードを遅くするよう心がけましょう。

See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.

7. ハイテク感を演出できる六角形のアニメーション背景

jQueryを活用することで、顕微鏡で細胞が増殖する様子を見ているようなアニメーションを実現しています。

ヒーローエリアやフッターに配置すれば、ハイテク感を演出してくれるはず。

See the Pen XI Concepts Background by Dhruve Shah (@dhruveonmars) on CodePen.

8. グラデーションと図形のアニメーション背景

ここまで紹介してきたエフェクトを巧みに組み合わせたようなスニペット。グラデーションの色合いが変化するだけでなく、オブジェクトの形状もゆるやかに変形します。

SVGとCSSを使っているのでアニメーションがスムーズ。小さなビューポートでもデスクトップと同様に美しく表示されるのが特徴です。

See the Pen SVG animated background by Josie Barker (@weenabeana) on CodePen.

アニメーション背景で差をつけよう

背景にアニメーションを導入するだけで、Webサイトにユニークな印象を与えられます。ページ全体への適用はもちろん、要素ひとつだけでもインパクトを残せるはず。

アニメーション導入時には、ユーザーの操作の邪魔にならないよう気を配るのが大切です。アクセシビリティやユーザビリティを損なわずにアニメーションを活用し、他のWebサイトに差をつけましょう。

（執筆：Eric Karkovack　翻訳：Asuka Nakajima　編集：北村有　提供元：speckyboy）