Slide Masking Effect
この記事は最終更新日から9年以上経過しています。
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-hover
をattr
を使って引っぱってこれば良いだけです。
コピーしました
.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: none
とborder-bottom
で線を加えるようにしています。
Comment
comments powered by Disqus