HTML&CSS WEBデザイン

【一文字ずつ】テキストアニメーション(javascript/css)コピペOK

使用頻度が多いテキストアニメーションをコピペで使えるようにまとめました!

段落事に順番に文字が左から右へ流れる

J QUERYのCDNコードをheader.phpの<head></head>の中に記載します。
最新コードはこちらからGoogle jQuery CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

文字が1文字ずつタイピングの様に出てくる!

J QUERYのCDNコードをheader.phpの<head></head>の中に記載します。
最新コードはこちらからGoogle jQuery CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

手書き風で流れるような文字アニメーション

SVGアニメーションの作り方についてはこちらの記事より
SVGアニメーションの作り方(手書き風)

流れるように一文字ずつ大→小さくなる

CSSのみで実装されているので軽くて使いやすいです。

下から上に一文字ずつ出てくるテキストアニメーション

cssとjavascriptで作成されてるアニメーションです。
参考にしたのはこちら文字を1文字ずつアニメーションさせる方法と、そのバリエーション・考え方を紹介!(YOU TUBEで詳しく解説してあるので勉強になります。)

-HTML&CSS, WEBデザイン

S