【本当は教えたくないCSSコピペ】ページを開くとスーッてスライドするアニメーション
どうも、オークニです。
この記事を発見したあなた、おめでとうございます。今回は、あえて今まで黙っていた、秘蔵のCSSテクニックを1つご紹介しよう。
今まで、1人でシメシメとひた隠しにしていたこのテクニックだが、あまりにも「やり方教えんかい!ゴルァ!」というお問い合わせを多数いただくので、泣く泣く解禁する次第だ。
はっきり言って、これさえパクれば、たとえどんなにダサいあなたのブログでも、「斎藤さんだぞ」と言いたくなるくらいトレンディに早変わりする。
そんなテクニックである。
スーッてスライドするアニメーションとは
具体的にTwitter等でよくお問い合わせいただくのが
オークニさんのページを開いた時に、上からヘッダーとかSNSボタンとか、横から記事タイトルとかスライドしてくるやつ、どーやってるんですか?!…ゴルァ!
的な。やつ。
実際に、あなたも今この記事をこのページを読み込んだ時に、なんか色々スライドしてたよーな気がするはずだ。
気のせいかもしれない人は、いま一度更新を押して確認してみてほしい。(おし、これで1PVゲット😏)
今回は、これを、CSSだけで、しかも、簡単コピペで、実装しよう。
サンプル
See the Pen oEOLJw by okuni (@okuni) on CodePen.
こちらがサンプル。
PCでの閲覧者はコードとビューが両方出ているが、スマホの人は「Result」というタブを押していただくと確認できる。
また、サンプルでは分かりやすいように「無限再生」パターンでアニメーションさせているが、実際のブログでこんなことしていたら読者の30%は失うだろう。
簡単な説明
上記のCSSを見ると、一見ややこしさMAXに感じるかもしれないが、それは勘違いである。
コードの半分はコメントアウト。つまり説明だ。むしろ優しさMAXである。
今回のポイントは「@keyframes」というやつ。
難しく考えなくて良い。とにかく「@keyframes」というやつを使えば、CSSだけでアニメーションが簡単にできるって覚えておこう。
アニメーション設定を作る
@keyframes 任意の名前 {
0% {
opacity: 0;/* 透明 */
}
100% {
opacity: 1;/* 不透明 */
}
}
これが基本形だ。
任意の名前のところには、英語で好きな名前を付けられる。アニメーションの動きが分かりやすいように、右から左なら「RightToLeft」とか、上から下なら「SlideDown」とか、そんな感じでOK。
0%→100%
これが、アニメーションが始まる時点と終わる時点の内容だ。上記では、0%に「opacity: 0;」、100%に「opacity: 1;」とある。
つまり、最初は「透明」からはじまり、最終的に「不透明」になるというアニメーションだ。
また、ここにはいくつでも付け足すことが出来、その分アニメーションが複合されていくのだ。
@keyframes RightToLeft {
0% {
opacity: 0;/* 透明 */
transform: translateX(50px);/* X軸方向に50px */
}
100% {
opacity: 1;/* 不透明 */
transform: translateX(0);/* X軸方向に0px */
}
}
これがサンプルの形だ。「opacity」に加えて「transform」というもので動きをつけている。
transform
「transform」に関する具体的な説明は割愛するが、とにかく覚えておくといいのが、値に「translateX()」でX軸(横に)動く、「translateY()」でY軸(縦に)動く、ということ。
translateX(50px) /* 右に50px */
translateX(-50px) /* 左に50px */
translateY(50px) /* 上に50px */
translateY(-50px) /* 下に50px */
このように、マイナスを使うことで左や下も可能。
任意の名前を使う所
では最後に、任意の名前「RightToLeft」とかを使う所について説明する。
簡単に言うと、動かしたい要素何でもOK。
たとえば、「記事タイトル」を右から左へ動かしたい場合。
※はてなブログの場合※
.page-entry .entry-title {
animation-name: RightToLeft;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}
これを付け足す。
非常に簡単だ。ヘッダーを上から下に動かしたいのであれば、まず「@keyframes 任意の名前」を作っておいて、あとはヘッダーのCSSに「任意の名前」と「時間」を付け足せばOK。
はてなブログ用テンプレ
ではここで、はてなブログ用に汎用性の高いテンプレートを用意しておく。class名さえ変更すれば、WordPressユーザーでも簡単に使うことができるので、ぜひ参考に。
/**********アニメーション設定**********/
/*右から左*/
@keyframes RightToLeft {
0% {
opacity: 0;/* 透明 */
transform: translateX(50px);/* X軸方向に50px */
}
100% {
opacity: 1;/* 不透明 */
transform: translateX(0);/* X軸方向に0px */
}
}
/*上から下*/
@keyframes SlideDown {
0% {
opacity: 0;/* 透明 */
transform: translateY(-50px);/* Y軸方向に-50px */
}
100% {
opacity: 1;/* 不透明 */
transform: translateY(0);/* Y軸方向に0px */
}
}
/*下から上*/
@keyframes SlideUp {
0% {
opacity: 0;/* 透明 */
transform: translateY(50px);/* Y軸方向に50px */
}
100% {
opacity: 1;/* 不透明 */
transform: translateY(0);/* Y軸方向に0px */
}
}
/**********アニメーション設定end**********/
/*ヘッダーを上から下へ*/
#blog-title {
animation-name: SlideDown;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}
/*グローバルナビを上から下へ*/
#top-editarea {
animation-name: SlideDown;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}
/*記事一覧を下から上へ*/
.page-archive .archive-entries .archive-entry {
animation-name: SlideUp;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}
/*記事タイトルを右から左へ*/
.page-entry .entry-title {
animation-name: RightToLeft;/* アニメーション名 */
animation-duration: 2s;/* アニメーション時間 */
}
これを全部コピーし、以下に貼り付けるだけで完了
管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」
さいごに
今回のテクニックは、ページを更新した際に発生する仕様である。つまり、これらのアニメーションを認識できるのは"ファーストビュー"に限る。
そして、そのファーストビューこそがブログの顔と言っても過言ではない。てゆーか、顔だ。
ファーストビューでどれだけハートをキャッチできるかが、あなたのブログをモテブログかブスブログかを決定づける。
別におしゃれである必要はない。別に大袈裟である必要もない。ただ、ささやかなアニメーションを添えるだけ。それだけでモテブログになるには必要十分である。
この記事のタイトルのように「本当は教えたくない」とか言っているタイトルのほとんどは、内心では「本当は一人でも多くの人に拡散してほしい」と思っている。
この記事が良かったら、是非ブックマークとシェアをして頂ければ幸いだ。