画面遷移をおしゃれにする背景アニメーション 6パターン
画面の切り替えをおしゃれなアニメーションに変えてみましょう♪
最近少しずつ見かけるようになってきましたが、ページからページに遷移する時におしゃれなアニメーションを取り入れて魅力的に見せているサイトがあります。
オープニングやローディングはよく見ますが画面遷移にアニメーションを取り入れているWEBサイトはまだまだ少ないように思います。
今回は画面切り替えをおしゃれに見せるおしゃれなアニメーションをいくつかご紹介したいと思います。
サイト内の細部のアニメーションまでこだわることで、手の込んだとても魅力的なサイトに見せることができます。
今回は初めて取り入れる方にもできるような簡単だけどおしゃれに見せるアニメーションを中心に作ってみました。
一緒に実践してみましょう♪
よく読まれている記事
横に流れるようなアニメーション
横に画像が通り過ぎるようなシンプルな画面遷移のアニメーションです。
このタイプのデザインはサイトでよく見かけますが、動画などでも画面転換する際にもよく使われます。
簡単に実装したいときはこのアニメーションから取り入れてみてください。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
縦に流れるようなアニメーション
縦に画像が落ちていくようなスタンダードな画面遷移のアニメーションです。
今回は上から下に動かしていますが、下から上に動かしても良さそうですね。
シンプルで実装時間も短いので、どんなサイトにも使いやすいと思います。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
斜めに流れるようなアニメーション
斜めに画像が移動するような使いやすい画面遷移のアニメーションです。
キラッとするような斜めの角度のアニメーションは、おしゃれなのに簡単に実装することができます。
おしゃれ感を出したい美容系やファッション系のサイトにおすすめです。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
中央から開くようなアニメーション
真ん中から外に向かって扉が開くような画面遷移のアニメーションです。
始まりを思わせるようなデザインなので、画面遷移だけでなくオープニングにも使える万能な実装です。
明るいイメージのサイトや、始まりやお祝いを表現したいときに最適です。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
中央に向かって丸が閉じるアニメーション
外側から真ん中に向かって丸が小さくなっていくような画面遷移のアニメーションです。
昔の海外アニメによく出てくるような演出で、見かけることは少ないですがコミカルな動きを表現したいときにぴったりなデザインです。
子供向けのサイトや、珍しい表現を加えたいときにおすすめです。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
分割して下に落ちるアニメーション
分割された画面が左から順番に落ちていくような画面遷移のアニメーションです。
カーテン状に動くアニメーションは少し複雑な実装ですが、この動きを取り入れているサイトはまだ多くありません。
高級感を出したいときや、動きをたくさん入れたいときに使ってほしい実装です。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回は画面遷移のおしゃれなアニメーションについていくつかご紹介してみましたがいかがでしたでしょうか？
実際に取り入れてみた方はわかると思いますが、ページの切り替えがおしゃれになるだけでサイトの印象が大きく変わったように感じると思います。
他のサイトであまりみることがないアニメーションなので、ユーザーにとってはとても新鮮に見えます。
とは言ってもユーザーが不快に感じないように、アニメーションの流れる時間やデザインの複雑さを考える必要があります。
ある特定のページにだけアニメーションを設置してみたり、一度アニメーションが流れたユーザーには2回以上流れないようにjsで制御するのもいいと思います。
今から設置したいという方は、今回ご紹介したような簡単なものを参考に使っていただけると嬉しいです。
最後までご覧いただきありがとうございました☆彡