THE THOR ザ・トール フワッと登場する アニメーション

THE THOR でページ読み込み時にフワッと登場する アニメーション を適用してみました。

未導入の方はこちらTHE THOR について

フワッとアニメーションはインパクトがあり読者に良い第一印象を与えます。

第一印象が良ければ直帰率の改善にも役立つことでしょう。

というのは後付で他のテーマのフワッと動くアニメーションが羨ましくて真似しました。

ここで紹介するフワッとアニメーションは単純なもので、読み込み時のみアニメーションします。画面内にコンテンツが表示された時に随時アニメーションするものとは違うので注意。

そして、こちらもリクエストを頂いたので記事にすることにしました。

「THE THOR で自分だけ〜」と思って記事化していなかったのは内緒ですw

フワッと アニメーション のCSS

当サイトで使用しているフワッとアニメーションはCSSを使い表現されています。

追加CSSに以下のコードをコピペすれば完成。

※カスタマイズは自己責任でお願いします。

コピペするコード

/*登場アニメーション【画像】*/
img {
animation-name: img_bottom_top;
animation-duration: 3s;
}
@keyframes img_bottom_top{
	from {
		opacity:0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
}
/*登場アニメーション【見出しh】*/
h1,h2,h3 {
animation-name: H_left_right;
animation-duration: 2s;
}
@keyframes H_left_right{
	from {
		opacity:0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0px);
	}
}
/*登場アニメーション【p】*/
p {
animation-name: P_right_left;
animation-duration: 2.5s;
}
@keyframes P_right_left{
	from {
		opacity:0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0px);
	}
}

画像(img)と見出し(h1,h2,h3)と本文(p)の3つにそれぞれアニメーションを付けています。

不必要な部分は削ってご利用ください。

CSSアニメーションのざっくり解説

ざっくり説明を入れておくので適当にいじって遊んでみてください。

1. アニメーションの名前を付ける（animation-name）
2. アニメーションの時間を決める(animation-duration)
3. 対象物の最初の状態を指定(from)
4. 対象物の最後の状態を指定(to)

あとがき

もともと画像のみアニメーションさせていました。

記事化にあたりテストも兼ねて見出しと本文もアニメーション。

結果、インパクトはあるけどトップページの挙動が少しおかしい。アニメーションの種類を変更するかもしれません。

この記事に載っているCSSはあくまで参考ということで、各自のサイトに適した運用をお願いします。

他にもリクエストで記事化された投稿があります。

・[THE] 画像付き新着記事 ウィジェットを2列で表示する

・文字の左右にボーダー をつける

THE THOR 記事一覧