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

CSS/JavaScriptで作られたアニメーション背景8選
無料のメールマガジンに登録

毎週月曜日に、フリーランス向けニュースまとめをお届けします。 プライバシーポリシーはこちら

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(執筆:Eric Karkovack 翻訳:Asuka Nakajima 編集:北村有 提供元:speckyboy

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
エンジニア Ads