ブログやサイトを開いたときに、フェードインの動きや色の変化を持たせる方法について説明します。
フェードインのアニメーションはCSSのみで簡単につけることができます。
CSSのみで作るフェードインアニメーションのパターンをいくつか用意したので、参考にしてください。
Bloggerやはてなブログの場合は基本的にコピペで使用することができます。
Bloggerで簡単にCSSをつける方法はこちらをご覧ください。
>>BloggerテーマにCSSを簡単に追加できる2つの方法
シンプルなフェードイン
まずはシンプルなフェードインのパターン。
以下のコードをコピーして貼り付けてください。
body {
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
2箇所ある『2s』の部分がアニメーションの変化時間を表しています。
この部分を『3s』に変えるとアニメーションの変化時間が長くなり、『1s』にすると変化時間が短くなります。
上から降りてくるフェードイン
これもよくみるパターンです。
シンプルなフェードインと組み合わせて使うものをよくみます。
タイトルは上からフェードイン、メインはシンプルなフェードインというのもよくあるパターンです。
シンプルなフェードインと組み合わせて使うものをよくみます。
タイトルは上からフェードイン、メインはシンプルなフェードインというのもよくあるパターンです。
以下のコードをコピーして貼り付けてください。
body {
animation: fadeIn 1s ease-in 0s 1 normal;
-webkit-animation: fadeIn 1s ease-in 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0; transform: translateY(-60px);}
100% {opacity: 1; transform: translateY(0px);}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0; transform: translateY(-60px);}
100% {opacity: 1; transform: translateY(0px);}
}
『translate』でフェードインの方向と変化率を指定しています。
『translateY』を『translateX』にすることで横方向のフェードインアニメーションに変えることができます。
色の変化
早すぎてわかりにくいかもしれませんが、実際にやるとかなり印象に残るエフェクトです。
以下のコードを貼り付けてください。
body {
animation: fadeIn 1s ease 0s 1 normal;
-webkit-animation: fadeIn 1s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0; background: aliceblue;}
100% {opacity: 1; background: default;}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0; background: aliceblue;}
100% {opacity: 1; background: default;}
}
2箇所ある『background: aliceblue;』の部分をカラーコードやカラーネームに変更することでアニメーションの色を変更できます。
まとめ
アニメーションは印象に残りますが、強烈なものや見にくいアニメーションは逆効果です。
ページを開いたときに気持ちよく感じるようなアニメーションをつけるように調整しましょう。
記事の画像につける囲み枠やボーダーのデザインもまとめているのでご覧ください。
>>【Bloggerコピペ】記事の写真に枠・ボーダーをつける方法
コメント