今すぐ相談しよう!
学んだこと

動く背景

動く背景
WEB先案内

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください!

デザインの幅を広げたいあなたへ

動く背景

ファーストビューにインパクトを持たせたい時、サイト全体の空気感を伝えたい時、背景が動くとインパクトは大きいです!

16種類のアニメーションを作ってみた

背景色が時間変化

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を使いましょう。

このジェネレータを使うことで、視覚的にどのような形になるのかを確認しながら作ることができます。

FANCY BORDER RADIUS GENERATOR

SVG形式で流体シェイプを出力してくれるジェネレータ

デザインカンプを作るとき、お手元のPCにPhotoshopやIllustratorがないとき、SVG形式で流体シェイプを生成してくれるジェネレータはいかがですか?

Blobmaker

色、形を指定して流体シェイプを作るジェネレータです。

SVG形式でダウンロードとソースコードの出力が可能です。

blobmakerBlobmaker

blobs

色、グラデーション、パターン、画像、枠線などを指定して、流体シェイプを作るジェネレータです。

こちらもSVG形式でダウンロードとソースコードの出力が可能です。

blobsblobs

幾何学模様

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を使うと便利です。

Custom Shape DividersCustom Shape Dividers

  1. 上部にあるバーやボタンで形や色などの項目を設定してします。
  2. 設定に合わせてプレビュー画面の白い波が変化します。
  3. 最後に、雲の形をしたダウンロードボタンを押して出力します。

波線シリーズ

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
WEBさん
WEBさん
WordPressの不具合をなおす人
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか? WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。

Warning: Undefined array key "HTTP_USER_AGENT" in /home/sakku/web-navigator.blog/public_html/wp-content/plugins/blog-floating-button/blog-floating-button.php on line 1130
WEB先案内があなたの悩みを解決します!
お問い合わせ

Warning: Undefined array key "HTTP_USER_AGENT" in /home/sakku/web-navigator.blog/public_html/wp-content/plugins/blog-floating-button/inc/tracking_js.php on line 11
記事URLをコピーしました