タイ研修いってきました
2021.03.18

【簡単】cssで作るオープニングエフェクト・アニメーション【コピペでOK】

  • このエントリーをはてなブックマークに追加

こんにちは!コーダーのだいちゃんです。

オープニングエフェクトやオープニングアニメーションはおしゃれなサイトにはよく使われていますよね。今回はcssを使用したシンプルなオープニングエフェクト・オープニングアニメーションを3つ紹介します。
全てcssの@Keyframesとanimationプロパティだけで動くのでコピペで実装できます!

 

左からカーテンのように開くアニメーション

左からタイミング違いで2層の幕が横に開くオープニングアニメーションです。
animationプロパティで秒数やタイミングを指定し、@Keyframesで幕の幅を変更(widthを100%→0%)することで開くような表現を実現しています。

 

デモページ

 

html

css

 

ロゴ入り背景がフェードアウトするアニメーション

読み込み時にはロゴ入り背景が表示され、その後フェードアウトし本サイトが表示されるというオープニングアニメーションです。コーポレートサイトなんかでたまに見ますね。
z-indexプロパティでロゴ入り背景をbody要素の前面から背面に切り替えています。opacityプロパティを使っても同様の表現は可能ですが要素自体がbodyの前面に残ってしまうため、z-indexを使用します。

 

デモページ

 

html

css

 

四隅が縁取られるアニメーション

読み込み数秒後に四隅から枠が出てきてサイト全体が縁取られるというオープニングアニメーションです。あまり見ないアニメーションですがクリエイターのポートフォリオサイトなんかに使えそうです。
サイト全体がスクロールスナップになっているレイアウトや、四隅に合わせてメニューの文字等を配置したりすると合うかもしれません。

 

デモページ

 

html

css

 

このようなオープニングアニメーションを考えるのは楽しいですよね!
一つ一つはシンプルですが組み合わせることでおしゃれな動きを実現できます。アニメーションのタイミングやテンポも重要になってきます。
ブランドサイトやポートフォリオサイトに使用すると世界観をイメージさせたり、印象に残りやすくできるので効果的です。むやみに使うとユーザビリティの低下に繋がることもありますが、うまく使えると非常に効果的なのでぜひ活用してみてください!

次回以降はアニメーションの組み合わせ事例やJavaScriptも使用したもっと複雑な動きも紹介していきたいと思います。

この記事を書いた人

だいちゃんdaichan

コーダー兼デザイナー。趣味は音楽、旅行、映画。

小規模持続化補助金

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。
売れてるサイトはこんなに違う。
イキツケ制作所
小規模持続化補助金