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