Web

文字にgifアニメをのせてみた

タイトルの通り、
html・css・gifのみで、アニメーションがテキストの形に切り抜かれたように見える方法を試してみました。
参考:https://codepen.io/methodoccasion/pen/ZWqbRb

デモ:開いてみて!

今回の場合、外部GIFファイルを設定しています。
ソースコード参考
【html】

大枠を囲うのが
div id="container"

Cの文字は
div class="moveBox"
div class="C" C

Oの文字は
div class="moveBox"
div class="O" O

このようにクラス名を付けました。

【css】

html {
background-color: #292731;
}
.D{
background:url("http://i.giphy.com/8SylEdgXn0BIQ.gif") repeat;
background-position:10px;
-webkit-background-clip: text;
color: transparent;
font-size:400px;
font-family:Helvetica;
font-weight:bold;
margin:0 auto;background-position-x: 52%;
background-position-y: 48px;
}

.moveBox {
margin:0 auto;
width:300px;
}

このくらいで、JSは必要ありません。
あとはGIFアニメを用意してcssに記述のあるパスを書き換えればいいだけです。

サイズもフォントサイズを小さめにしても良いですが、
背景のGIFアニメの位置は「background-position」で数値を調整してくださいね。

お問い合わせフォーム

気になる方はコチラからお問い合わせ!
必須お名前
必須メールアドレス
必須郵便番号
必須ご住所
必須電話番号
ご相談内容
必須メッセージ本文

コメントを残す

*