【CodePen】バックグラウンド(背景)アニメーションのアイデア20選

【CodePen】バックグラウンド(背景)アニメーションのアイデア

CodePenからCSS・Javascriptなどで表現された背景アニメーション・パターンアニメーションのアイデアをまとめました。

 

 

バックグラウンド(背景)アニメーションのアイデア

 

Background Animation Test 1.5

バブルがランダムに上スクロールするアニメーション

See the Pen Background Animation Test 1.5 by Michael Prewitt (@mprewitt) on CodePen.

Volcanic ash

ドットがランダムに散らばるパーティクルエフェクト

See the Pen Volcanic ash by Dmitri Kolytchev (@Fata-ku) on CodePen.

Dynamic Particles Background Animation

ドットが水平にスクロールするパーティクルエフェクト

See the Pen Dynamic Particles Background Animation by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.

Pure CSS Particle Animation

ドットが揺らめくノスタルジックなパーティクルエフェクト

See the Pen Pure CSS Particle Animation by Takeshi Kano (@tonkotsuboy) on CodePen.

SVG Animation Background

SVGのグラデーションのアニメーション

See the Pen SVG Animation Background by Yoshiyuki ITO (@thanks2music) on CodePen.

2kb total size SVG animation

カラフルな流体の背景アニメーション

See the Pen 2kb total size SVG animation by Ksenia Kondrashova (@ksenia-k) on CodePen.

Floating Color Orbs

グラデーションとブラーを使用した背景アニメーション

See the Pen Floating Color Orbs by Alison Quaglia (@hylobates-lar) on CodePen.

background animation

中心から広がるスクエアの背景アニメーション

See the Pen background animation by yuanchuan (@yuanchuan) on CodePen.

No-divs background pattern animation

機械的にアニメーションするパターンアニメーション

See the Pen No-divs background pattern animation by Amit Sheen (@amit_sheen) on CodePen.

Infinite svg pattern animation

左右に無限スクロールするパターンアニメーション

See the Pen Infinite svg pattern animation by John Muir (@john_r_muir) on CodePen.

CSS only Pattern Animation

CSSで作られたドットが移動するパターンアニメーション

See the Pen CSS only Pattern Animation by Temani Afif (@t_afif) on CodePen.

Pattern animation

レトロ感のあるパターンアニメーション

See the Pen Pattern animation by Comehope (@comehope) on CodePen.

CSS Rain Animation

雨の表現をした背景アニメーション

See the Pen CSS Rain Animation by Roman (@termyanen) on CodePen.

Rain Drops

雨の波紋を表現した背景アニメーション

See the Pen Rain Drops – #089 of #100Days100Projects by Florin Pop (@FlorinPop17) on CodePen.

CSS Background Effect

縦ラインにライトが強調される背景アニメーション

See the Pen CSS Background Effect by Osorina Irina (@osorina) on CodePen.

Starfield

宇宙空間を移動するような背景アニメーション

See the Pen Starfield by Brett (@PhantomImage) on CodePen.

Space Travel – Canvas

宇宙空間を移動するような背景アニメーション

See the Pen Space Travel – Canvas by Adrien Gautier (@adrgautier) on CodePen.

Matrix animation using html5 canvas

マトリックスをイメージさせる背景アニメーション

See the Pen Matrix animation using html5 canvas by Clayton (@cpiscopo) on CodePen.

Static

ノイズアニメーション

See the Pen Static by Zach Green (@zgreen) on CodePen.

pure CSS twinkling stars background

雲と星のリアルな表現のアニメーション

See the Pen pure CSS twinkling stars background by Anastasia Goodwin (@agoodwin) on CodePen.

CodePenとは?

 

CodePenは、HTML、CSS、JavaScriptを使ってウェブページのプロトタイプや実装を行うことができるオンラインの開発環境です。

CodePenでは、ウェブ開発者やデザイナーが、ブラウザ上でコードを書きながら、すばやく試行錯誤することができます。ユーザーは自分のプロジェクトを公開し、他のユーザーによるフィードバックを受けたり、共有することもできます。

CodePenには、エディター機能が搭載されており、HTML、CSS、JavaScriptのコードを入力することができます。また、ユーザーが公開したプロジェクトは、フロントエンドの技術を利用して動的な表現やアニメーションを作ることができます。



\ Webデザインに関するお役立ち情報を定期的に配信中 /

Follow @webclips_jp

PopularPosts
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • 漢字が使える日本語フリーフォント97選(商用利用可)
  • 無料で使えるデジタル風フォント13選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • ビジネス系イラストをダウンロードできるフリー素材サイト7選
  • フォントを調べる時に役に立つツール・サイト10選
WordPress対応! 初心者におすすめのレンタルサーバー特集
RecentPosts
  • 【2024年5月版】WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
  • 【2024年4月】Adobeのセール時期はいつ頃? Adobeセールの最新情報
  • 【2024年度】Adobe CC(Creative Cloud)を安く買う方法
  • Photoshopで使用できる“水しぶき系”ブラシ8選
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • アイソメトリックイラストをダウンロードできるフリー素材サイト6選