IEを無視したらbackground-clipでかっこいいテキストアニメーションができる件
画像を文字でクリッピングマスクしたようにできる「background-clip」
IEには対応していないので使いにくかったですが、もう対応していないサイトもちらほら出てきたのでそろそろ使いどきかもしれません。
ただ使う方法だけだとつまらないので、応用としてテキストアニメーションさせてみます
background-clip
background-clipプロパティは、背景の適用範囲を指定するプロパティで、指定できる値は以下のとおりです。
| border-box （デフォルト値） |
背景がborderの下までになる |
|---|---|
| padding-box | 背景がborderの内側までになる |
| content-box | 背景がコンテンツの大きさと同じになる |
| text | 背景がテキストで切り抜かれる ※ ベンダープレフィックスも指定しないとChromeで動かない |
使用例
よく使うであろう「text」の使用例を紹介しておきます
ベースのHTMLはこちら
|
1 |
<div class="text">果物</div> |
css
下準備として、このようなスタイルを指定しておきます
|
1 2 3 4 5 6 7 |
.text { background-image: url(1.jpg); background-size: cover; display: inline-block; font-size: 100px; font-weight: bold; } |
準備ができたら、実際に切り抜くための指定を追加します。
※ 追加分は色を変えています
|
1 2 3 4 5 6 7 8 9 10 |
.text { background-image: url(1.jpg); background-size: cover; display: inline-block; font-size: 100px; font-weight: bold; background-clip: text; -webkit-background-clip: text; color: transparent; } |
ベンダープレフィックスなしだと動かないブラウザ（そもそもIEは対応不可）もあるのできっちり入れつつ、画像を見えるようにするため、文字色を透明にする必要があります。
rgbaを使ってアルファチャンネルを調整する方法もイケます
background-clip ＋ アニメーション
アニメーションと組み合わせて、左から右に向かって文字が徐々に出てくるようにしてみます。
スクロールイベントと組み合わせるといい感じになりますが、このページに組み込むのが面倒なので、ボタンでアニメーションさせるようにしています
ベースのHTMLはこちら
|
1 2 3 |
<input type="checkbox" name="btn" class="btn" id="btn"> <div class="text" id="text">background-clipプロパティは、背景の適用範囲を指定するプロパティで、指定できる値は以下のとおりです。</div> <label for="btn" id="label"></label> |
アニメーションのcss
background-sizeで、背景画像のサイズを操作することによって、左から右に向かって文字が徐々に出てくるようにしますので予めx軸方向は0にしておきます。
背景画像はここでは縦横1pxの黒い画像にしています
label要素がクリックされたときにアニメーションするようにchecked疑似クラスと組み合わせています
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
#btn { display: none; } #text { background-image: url(1.gif); background-size: 0,100%; background-clip: text; -webkit-background-clip: text; background-repeat: no-repeat; color: transparent; font-weight: bold; } #label { display: inline-block; margin-left: 30px; margin-top: 50px; background-color: #000; color: #fff; width: 150px; padding: 10px 0; text-align: center; -webkit-transition: .4s; transition: .4s; cursor: pointer; } #label::after { content: '動かす'; } #btn:checked ~ #text { -webkit-transition: 1s linear; transition: 1s linear; background-size: 100%,100%; } #btn:checked ~ #label::after { content: '戻す'; } |
スクロールと組み合わせる場合はjavascriptとの併用になりますが、面白くかっこいい動きを出せるのではないかと思います。
よくある要素ごとニョキッと出てくるものと差別化もできると思います
