ページトップリンク
WEB先案内
WEB先案内 ITブログ
動く背景
WEB先案内
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。
その中でも特に勉強になったコードを紹介します。
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。
あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
デザインの幅を広げたいあなたへ
動く背景
ファーストビューにインパクトを持たせたい時、サイト全体の空気感を伝えたい時、背景が動くとインパクトは大きいです！
１６種類のアニメーションを作ってみた
背景色が時間変化
See the Pen
背景色が時間変化 by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
流体シェイプ
See the Pen
流体シェイプ by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
流体シェイプを生成してくれるジェネレータ
CSSで角丸を作るのは簡単ですが、上記で紹介した流体シェイプを作る場合はどうでしょう。
見ながら思った形をつくるというのはとても難しくないですか？
しかも、数値を指定しただけでは、パッとどんな形になるのか想像できないですよね。
そういった場合は、Fancy Border Radius Generatorを使いましょう。
このジェネレータを使うことで、視覚的にどのような形になるのかを確認しながら作ることができます。
SVG形式で流体シェイプを出力してくれるジェネレータ
デザインカンプを作るとき、お手元のPCにPhotoshopやIllustratorがないとき、SVG形式で流体シェイプを生成してくれるジェネレータはいかがですか？
Blobmaker
色、形を指定して流体シェイプを作るジェネレータです。
SVG形式でダウンロードとソースコードの出力が可能です。
blobs
色、グラデーション、パターン、画像、枠線などを指定して、流体シェイプを作るジェネレータです。
こちらもSVG形式でダウンロードとソースコードの出力が可能です。
幾何学模様
See the Pen
幾何学模様 by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
幾何学模様：js簡易版
See the Pen
幾何学模様：js省略版 by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
雪が降る
See the Pen
雪が降る by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
桜が散る
See the Pen
桜が散る by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
ホタルが舞う
See the Pen
ホタルが舞う by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
紙吹雪が舞う
See the Pen
紙吹雪が舞う by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
波打つシリーズ
1つ重なり「なし」バージョン
See the Pen
波打つ（1 つ 重なりなし） by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
1つ重なり「あり」バージョン
See the Pen
波打つ（1 つ 重なりあり） by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
複数重なり「なし」バージョン
See the Pen
波打つ（複数 重なりなし） by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
複数 重なりなし「あり」バージョン
See the Pen
波打つ（複数 重なりあり） by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
波の形をSVG形式で出力してくれるジェネレータ
上記の波はJavaScriptを利用してアニメーションを作っています。
デザインカンプを作る時に、波の形を再現するのは意外に手間だったりしませんか？
そんな時はCustom Shape Dividersを使うと便利です。
- 上部にあるバーやボタンで形や色などの項目を設定してします。
- 設定に合わせてプレビュー画面の白い波が変化します。
- 最後に、雲の形をしたダウンロードボタンを押して出力します。
波線シリーズ
1つ
See the Pen
波線（1つ） by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
複数
See the Pen
波線（複数） by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
コーヒーを淹れているシーン
See the Pen
コーヒーを淹れているシーン by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
粒子が集まってタイポグラフィーを形成する
See the Pen
粒子が集まってタイポグラフィーを形成する by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
次回の予定
ビジュアル要素を押し出して、コンテンツごとに世界観を変化させてたい時に活躍する「エリアの動き」に挑戦してみます ＼＼\\٩( ‘ω’ )و //／／
ABOUT ME
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？
WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。
