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

CSS,JavaScript,cssアニメーション,JavaScriptアニメーション

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

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

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のフォローもお願いします

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。

あなたにマッチした記事をお届けします
ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
便利な情報をあとで効率的に読み返せます
気に入った記事を「ストック」することで、あとからすぐに検索できます

より詳しく

ユーザー登録ログイン

@teloppy_com

テキストを入力するだけでメッセージ動画を作れるサービスを運営しております！

この記事にコメントはありません。

あなたもコメントしてみませんか :)

ユーザー登録

すでにアカウントを持っている方はログイン

記事投稿イベント開催中

React 18、あなたならどう使いこなす？

2022/05/31~2022/07/18

Azure Machine Learning を使って機械学習に関するナレッジをシェアしよう

2022/06/02~2022/07/18

すべて見る

記事の改善

編集リクエストを送る

記事の情報

編集履歴編集リクエスト一覧 LGTMしたユーザー一覧 Markdown で本文を見る