[javascript,cssアニメーション]草からテキストが生えてくるアニメーション

テキストを入力するだけでメッセージ動画が作れるサービスTeloppyを運営しております！
その中で用いたアニメーションのコードを一部紹介したいと思います！

まずは、コードの完成形です。

See the Pen Untitled by Teloppy テロッピー | 自分だけのメッセージ動画を作ろう (@teloppy_com) on CodePen.

htmlのタグの

<div class="catch">草からテキストが出てくる</div>
<div class="shadow">草からテキストが出てくる</div>

catchは背景画像と同化した文字、shdowは、影だけの文字と役割が分け、それを重ねることで実現しています。

そして重要になるcssがこの記述です。

body {
 background:url(https://drive.google.com/uc?export=view&id=19JvBpXFksnKhWWLNuOE6YZYdvD2z060A);
  background-size:160px auto;
}
.catch{
   background:url(https://drive.google.com/uc?export=view&id=19JvBpXFksnKhWWLNuOE6YZYdvD2z060A);
  background-size: 160px auto;
  background-clip: text;
  -webkit-background-clip: text;
}

ここの、background-clip:textの部分は、文字の背景を画像にするときに用いる記述であり、bodyの背景と.catchの背景を同じにすることで同化させています。

.catchにtext-shadowつければ一番早いんですが、 background-clip: textを用いた場合、文字に影をつけることができないので、影用の要素である.shadowを重ねることで擬似的に影をつけているという訳です。(.catchが上に来るようにz-indexで調整が必要)

.catch,.shadow{
  text-align:center;
  font-size:7vw;
  position:absolute;
  width: 100%;
  top:50%;
  transform:translateY(-50%);
  font-weight: bold;
  color:transparent;
  transition:all 0.3s;
}

で、あとはjsで.shadowにis-visibleをつけてやれば出来上がりです。

.shadow.is-visible{
  text-shadow: 0 5px 5px #0D3400;
}

background-size:160px auto;ここの部分をカスタマイズすると草感が変わりますので試してみてください

また、こんな感じでホバーアクションにしても良さげです。

.shadow:hover{
  text-shadow: 0 5px 5px #0D3400;
}

Teloppyではこんな感じのアニメーションを多く作ってます。twitterのフォローもお願いします