背景をパターン柄にするCSSアニメーション 7パターン
背景が動くだけで一気にレベルアップ！
今回はサイトの背景に使える動くパターン柄アニメーションをご紹介したいと思います。
背景といえば画像や動画を使うことが多いかと思いますが、画像が使えない場合やイメージに合うものがな時にこの背景アニメーションが役立ちます。
CCSだけで作っているものがほとんどなので、色をすぐに変更することもできます。
パターン柄はいろんな場面で使えるので、ここでいろんなパターンを覚えておくことをおすすめします。
それでは一緒に見ていきましょう♪
よく読まれている記事
斜め下に動くドット柄のパターン柄背景
斜右下方向にゆっくりドット柄が移動していくようなアニメーションです。
とってもシンプルで一番取り入れやすいデザインで、どんなジャンルにも使えます。
ドット柄の後ろに画像を置くのもおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
縦ストライプの後ろにグラデーションが動くパターン柄背景
細い縦ストライプの背景に動くグラデーションをひいたようなアニメーションです。
細いストライプは動かしてもよくわからないので、その後ろに動きを加えるとストライプが引き立ちます。
ストライプの感覚や幅を変えることで、まったく違うデザインを作ることができます。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
横に動くチェック柄のパターン柄背景
平行方向にチャック柄が移動していくようなアニメーションです。
少し複雑に見えますが、CSSだけでチェック柄を作ることもきます。
色も自由に変えることができるので、これは使ってみたいですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
下に動く格子柄のパターン柄背景
下側に格子柄がゆっくり移動していくようなアニメーションです。
これもとてもデザインがシンプルで、コードも簡単なので初心者の方にもおすすめです。
スタイリッシュなサイトにぴったりの実装です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
斜めのグラデ幅が変わるパターン柄背景
斜めのグラデーションのストライプ幅が細くなったり太くなったりするようなアニメーションです。
今回は滑らかに動かすというより、コマ送りのような感じで変化をつけてみました。
淡い色がよく合うデザインなので、やわらかいイメージの時にも使えそうですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
ダイヤ柄が現れるパターン柄背景
徐々に色が変わりダイヤ柄になるようなアニメーションです。
ダイヤにも丸柄にも見えるため、人によって見える柄が違うデザインです。
和柄のパターンは着物や伝統文化のサイトにおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
チェック柄が虹色に変化するパターン柄背景
斜めのチェック柄が虹色に変化していくようなアニメーションです。
cssのみでチェック柄を作っているので、好きな色に簡単に調整することができます。
ファッションやWEB雑誌などの背景におすすめです。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
動く背景画像はいかがでしたか？
背景に設置するので、動く範囲がどの場所よりも大きいのでかなり存在感がありますね。
パターン柄とアニメーションの組み合わせを変えることもできるので、いろんなパターンを作ることができます。
動く背景アニメーションをまだ実装したことのない方は、ぜひ使ってみてください♪
最後までご覧いただきありがとうございました☆彡