CSS3 : 文字列のワイプ表示

最近たまに見る、ブロックがワイプで入ってきて文字が表示されるタイプの表現を目コピしたサンプル。

See the Pen Wipe in text by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

スクロールしていけば画面内に入った時に表示するようにコントロールもしています。

HTML

<h1><span class="wipein show">
<h2><span class="wipein">

HTMLはワイプインさせたい文字列を<span>で囲みwipeinというクラスを付けるのみ。showも付与されることで表示されます。

CSS

.wipein {
  position: relative;
  color: transparent;
}
.wipein:after {
  display: block;
  content: "";
  height: 100%;
  background: #000;
  position: absolute;
  top: 0;
}
.wipein.show {
  animation: wipecolor .7s ease-in-out both;
}
.wipein.show:after {
  animation: wipebar .7s ease-in-out both;
}

クラス.wipeinは大きく3つのポイントで構成しています。

• まず、.wipeinを指定された文字列をcolor: transparentで消しておきます。
• ワイプしてくるブロックを.wipein:afterの疑似要素で作ります。
• .wipeinクラスに、JSで.showクラスを付与した時、ワイプ表示するアニメーションを設定しています。

.showが付与された時のアニメーションは以下のように作っています。

@keyframes wipebar {
  0% {
    left: 0;
    right: 100%;
  }
  50% {
    left: 0;
    right: 0;
  }
  100% {
    left: 100%;
    right: 0;
  }
}
@keyframes wipecolor {
  0% {
    color: transparent;
  }
  50% {
    color: transparent;
  }
  51% {
    color: #000;
  }
  100% {
    color: #000;
  }
}

wipebarはワイプしてくるブロックのアニメーションです。左から右に伸びて現れ、左から右に縮んで消える動きですが、これはwidthによる幅の制御ではできません。leftとrightの制御で実現します。

wipecolorは文字を透明から黒にしています。0%から50%まではブロックが伸びるまで透明のまま待ち、51%のブロックが伸びきった瞬間に黒くすることで文字を表示させています。 一見opacityでも同じことができそうですが、opacityを使うとブロックまで透明になってしまいます。なのでcolor:transparentで文字のみ狙い撃ちで透明にしています。