Slide Masking Effect

2014-07-09 #Markup #CSS3

See the Pen IdfDw by u (@is8r) on CodePen.

Flashの案件をしてた時によく作った文字が横からスライドして色が変わるテキストエフェクト。CSSでも案外簡単に実装できました。


作り方

色が変わっている部分は上に乗った別の色のテキストをマスクで隠したり出したりしているだけだったりします。 なので、

  • 要素を複製する
  • マスクをかける
  • マスクにアニメーションをつける

の3ステップで実装可能となっております。


要素を複製する

上に乗せる別の色のテキストの方はbefore疑似要素を使用して生成します。 まず下記のようにカスタムデータ属性data-hoverを作成して、コピー用のテキストを指定して、

<a href="#" data-hover="Text Effect">Text Effect</a>

次にCSS側でbefore疑似要素を使用して先ほどのデータ属性のコピーを生成します。contentの中身は先ほどのdata-hoverattrを使って引っぱってこれば良いだけです。

.text-effect
  &:before
    content: attr(data-hover)

あとは元の要素の上に載せておいて、マスクで表示非表示を切り替えられるようにしておきます。 position: absoluteで重ねて上に載せてmax-widthで横幅を調整、はみ出た分をoverflow: hiddenで隠れるようにするだけです。

アニメーションをつける

動きはmax-widthの変化をtransitionで調整するだけです。

+transition(max-width 0.2s ease-out)

Mixin作った

簡単に使えるようにMixinにしておきました。

=slidemasking-effect($c-def: #111, $c-act: #f1f, $border: null)
  position: relative
  overflow: hidden
  color: $c-def
  text-decoration: none
  &:before
    +transition(max-width 0.2s ease-out)
    content: attr(data-hover)
    position: absolute
    top: 0
    left: 0
    overflow: hidden
    white-space: nowrap
    max-width: 0
    color: $c-act
  &:hover
    &:before
      max-width: 100%
  @if $border
    border-bottom: $border solid $c-def
    &:before
      border-bottom: $border solid $c-act

下線を入れたい場合は、そのままだと下線の色が変わらないので、text-decoration: noneborder-bottomで線を加えるようにしています。

Profile
😛

石原 悠 / Yu Ishihara

デザインとプログラミングとヨーグルト作りが好きです。