動く背景
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
[itemlink post_id=”9233″]
動く背景
ファーストビューにインパクトを持たせたい時、サイト全体の空気感を伝えたい時、背景が動くとインパクトは大きいです！
１６種類のアニメーションを作ってみた
背景色が時間変化
流体シェイプ
SVG形式で流体シェイプを出力してくれるジェネレータ
デザインカンプを作るとき、お手元のPCにPhotoshopやIllustratorがないとき、SVG形式で流体シェイプを生成してくれるジェネレータはいかがですか？
Blobmaker
色、形を指定して流体シェイプを作るジェネレータです。 SVG形式でダウンロードとソースコードの出力が可能です。
blobs
色、グラデーション、パターン、画像、枠線などを指定して、流体シェイプを作るジェネレータです。 こちらもSVG形式でダウンロードとソースコードの出力が可能です。
幾何学模様
js詳細版
js簡易版
季節の演出
雪が降る
桜が散る
ホタルが舞う
紙吹雪が舞う
波打つシリーズ
1つ重なり「なし」バージョン
1つ重なり「あり」バージョン
複数重なり「なし」バージョン
複数 重なりなし「あり」バージョン
波の形をSVG形式で出力してくれるジェネレータ
上記の波はJavaScriptを利用してアニメーションを作っています。 デザインカンプを作る時に、波の形を再現するのは意外に手間だったりしませんか？ そんな時はCustom Shape Dividersを使うと便利です。
上部にあるバーやボタンで形や色などの項目を設定してします。 設定に合わせてプレビュー画面の白い波が変化します。 最後に、雲の形をしたダウンロードボタンを押して出力します。
波線シリーズ
1つ
複数
コーヒーを淹れているシーン
粒子が集まってタイポグラフィーを形成する
次回の予定
ビジュアル要素を押し出して、コンテンツごとに世界観を変化させてたい時に活躍する「エリアの動き」に挑戦してみます ＼＼٩( ‘ω’ )و //／／
