みなさんこんにちは！おさかなです！
今回は「Moving Letters」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・テキストアニメーションのテンプレートを探している方
・HTML/CSS/JavaScriptで作る、文字アニメーションを探している方
・おしゃれなテキストアニメーションを使いたい方
「Moving Letters」って何？
「Moving Letters」とは(@tobiasahlin)さんが提供する、かっこいい「テキストアニメーション」が探せるサイトのことです。HTML/CSS/JavaScriptをコピーするだけで、簡単にアニメが実装できます！(いいね)
実際に使ってみよう！
アニメーションを探そう！
それでは早速サイトにアクセスしましょう！
ページをスクロールすると…こんな感じで様々な「文字アニメーション」が見れます！(おお！)
(どれもおしゃれだなぁ…✨)
気になるデザインを見つけたら「クリック」します。(ポチっと)
このようにアニメーションの「ソースコード」が表示されました！
コードは「HTML」「CSS」「JavaScript」の3ブロックに分かれています。(ふむふむ…。)
実装する際には、右側のコードを「コピー」しておきましょう！
(ひと休み💤)
コピーしたコードを貼り付けよう！
テキストエディタを開いて、先ほどコピーしたコードを貼り付けていきます。
こちらはHTML
ファイルを分けた方がコードがすっきりとしますが、今回は<head>の中にある「<style>タグ内」に、CSSを貼り付けました…！(よいしょ！)
続いてJavaScriptについても、body末尾の「<script>タグ内」に貼り付けます。
これで挙動をチェックすると……アニメーションが表示されるので、みなさんも是非試してみてください！(お疲れ様でした🍮)
↓実際に作成したものがこちら
Hello Goodbye
You say goodbye i say hello~♪
この曲って直訳すると、意味わからなすぎるよな。笑
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
↓制作に携わった記事
邪王真眼のサーヴァントたちよ、集え
— アニメイトタイムズ公式 (@animatetimes) November 14, 2022
熱気に包まれた『中二病でも恋がしたい！』シリーズ10周年記念イベント 「“極東魔術昼寝結社の夏”の秋の祝祭」が開催【注目ワード】#chu2koihttps://t.co/HTTA0Iv49d
