Weblasts

IEを無視したらbackground-clipでかっこいいテキストアニメーションができる件

画像を文字でクリッピングマスクしたようにできる「background-clip」

IEには対応していないので使いにくかったですが、もう対応していないサイトもちらほら出てきたのでそろそろ使いどきかもしれません。

ただ使う方法だけだとつまらないので、応用としてテキストアニメーションさせてみます

background-clip

background-clipプロパティは、背景の適用範囲を指定するプロパティで、指定できる値は以下のとおりです。

border-box
(デフォルト値)
背景がborderの下までになる
padding-box 背景がborderの内側までになる
content-box 背景がコンテンツの大きさと同じになる
text 背景がテキストで切り抜かれる
※ ベンダープレフィックスも指定しないとChromeで動かない

使用例

よく使うであろう「text」の使用例を紹介しておきます

ベースのHTMLはこちら

css

下準備として、このようなスタイルを指定しておきます

ここまでの見た目
果物

準備ができたら、実際に切り抜くための指定を追加します。
※ 追加分は色を変えています

ベンダープレフィックスなしだと動かないブラウザ(そもそもIEは対応不可)もあるのできっちり入れつつ、画像を見えるようにするため、文字色を透明にする必要があります。

rgbaを使ってアルファチャンネルを調整する方法もイケます

完成したもの
果物

background-clip + アニメーション

アニメーションと組み合わせて、左から右に向かって文字が徐々に出てくるようにしてみます。

スクロールイベントと組み合わせるといい感じになりますが、このページに組み込むのが面倒なので、ボタンでアニメーションさせるようにしています

完成サンプル
background-clipプロパティは、背景の適用範囲を指定するプロパティで、指定できる値は以下のとおりです。

ベースのHTMLはこちら

アニメーションのcss

background-sizeで、背景画像のサイズを操作することによって、左から右に向かって文字が徐々に出てくるようにしますので予めx軸方向は0にしておきます。

背景画像はここでは縦横1pxの黒い画像にしています

label要素がクリックされたときにアニメーションするようにchecked疑似クラスと組み合わせています

スクロールと組み合わせる場合はjavascriptとの併用になりますが、面白くかっこいい動きを出せるのではないかと思います。

よくある要素ごとニョキッと出てくるものと差別化もできると思います