エンジニアの金山(@spicato_kana)です! 今回は、タイトルの通り簡単なテキストアニメーションを紹介します。 元々は個人のストレス発散のために作っていたのですが、どうせならブログにして公開しようと思いまとめてみました。 CodePen を用いて実際の画面とコードを見ながらちょっとした解説を交えていきたいと思います。 JavaScript は、クラスの付け外しでしようしていますので必要に応じてスクロールに連動させたり、クリックイベント後に発火させたり調整して頂ければなと思います! 1. 下から1つずつ表示させる😄 最初から文字を1文字ずつspanタグで区切っていますが、Splitting.js のようなプラグインを使用するか、こちらの記事のように自作するのもおすすめです! ちょっと変えれば今回のようにCSS変数を使ってインデックスを付与できると思います。 .char { disp
![『CSSで作る簡単なテキストアニメーション10選(コードあり)』を作ってみた! | スピッカート](https://cdn-ak-scissors.b.st-hatena.com/image/square/487a311ff698d22f8e55bab8a8911593f039bd10/height=288;version=1;width=512/https%3A%2F%2Fspicato.com%2Fwp%2Fwp-content%2Fuploads%2F2024%2F05%2Fthumbnail.png)