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による幅の制御ではできません。leftrightの制御で実現します。

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