オークニズム

はてなブログでのカスタマイズやブログ運営ノウハウをメインに、オークニが気になったモノ、コトをシェアするブログ。

オークニズム

オークニのイズム満載ブログカスタマイズ

【本当は教えたくないCSSコピペ】ページを開くとスーッてスライドするアニメーション

【本当は教えたくない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」

さいごに

今回のテクニックは、ページを更新した際に発生する仕様である。つまり、これらのアニメーションを認識できるのは"ファーストビュー"に限る。

そして、そのファーストビューこそがブログの顔と言っても過言ではない。てゆーか、顔だ。

ファーストビューでどれだけハートをキャッチできるかが、あなたのブログをモテブログかブスブログかを決定づける。

別におしゃれである必要はない。別に大袈裟である必要もない。ただ、ささやかなアニメーションを添えるだけ。それだけでモテブログになるには必要十分である。

この記事のタイトルのように「本当は教えたくない」とか言っているタイトルのほとんどは、内心では「本当は一人でも多くの人に拡散してほしい」と思っている。

この記事が良かったら、是非ブックマークとシェアをして頂ければ幸いだ。

- 特に人気のカスタマイズ -