2015年一発目のエントリーですが、特に何事もなく普通の記事を書きます。

このサイトでも利用していますが、ページ遷移時に一瞬だけ(暗くなって)文字が表示されるやつのやり方です。HTMLとCSSだけで実装してまして、JSは使いません。

一瞬だけテキストを表示するやつ

こういうやつです → DEMO
※読み込みに時間が掛る場合、表示されない可能性があります。何も変化がない場合は再読込みをしてみてください。

CSSの animation を利用しています。特に難しいことはしてなくて、visibility と opacity をうまい具合にしているだけですね。

HTML

HTMLは以下の通り。

<div class="flash-title">
  <p>表示させたいテキスト</p>
</div>

親要素(div)にクラスを付けるだけです。

CSS

CSSは以下の通り。

.flash-title {
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  -webkit-animation: fade-in-out 3s ease 2s forwards;
  animation: fade-in-out 3s ease 2s forwards;
  visibility: hidden;
  z-index: 1;
}

.flash-title p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 90px;
  color: #fff;
}

@-webkit-keyframes fade-in-out {
  0% {visibility: hidden; opacity: 0;}
  50% {visibility: visible; opacity: 1;}
  100% {visibility: hidden; opacity: 0;}
}

@keyframes fade-in-out {
  0% {visibility: hidden; opacity: 0;}
  50% {visibility: visible; opacity: 1;}
  100% {visibility: hidden; opacity: 0;}
}

display を table とすることで縦位置を中央にもっていくことができ、かつ複数行にも対応できるようになります(その為IE8以下は当然未対応ですが…)。フォントのサイズは適当に調整してください。

animation の値を変更すれば、表示している時間(3s)と表示するまでの時間(2s)を変更することができます。ページが重かったりすると読み込みに時間がかかるので、表示するまでの時間は長めのにとった方がいいでしょう。というか、その場合はJSで全ての読み込みが完了してから表示させた方がいいでしょうね。

おわり

以上です。CSSをコピペしてクラスを付与するだけなので、とても簡単に実装できるかと思います。テキストを変えて色々なページで使い回すことも可能です。ちょっとしたアクセントになるので個人的には結構気に入っているんですよね。

スクロールにあわせて表示させる方法も載せたかったのですが、それは次回ということで。