【無料】テキストアニメーションが見つかる【Moving Letters】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Moving Letters」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・テキストアニメーションのテンプレートを探している方
・HTML/CSS/JavaScriptで作る、文字アニメーションを探している方
・おしゃれなテキストアニメーションを使いたい方

「Moving Letters」って何?

Moving Letters」とは(@tobiasahlin)さんが提供する、かっこいい「テキストアニメーション」が探せるサイトのことです。HTML/CSS/JavaScriptをコピーするだけで、簡単にアニメが実装できます!(いいね)

Moving Letters
Text animated with JavaScript & anime.js
【テンプレートあり】ロゴ・デザイン作成ツール【DESIGNEVO】とは?
みなさんこんにちは!おさかなです!今回は「DESIGNEVO」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・企業・イベントのロゴを作成したい方・ロゴデザインを考え中の方・デザインツールを...

実際に使ってみよう!

アニメーションを探そう!

それでは早速サイトにアクセスしましょう!

ページをスクロールすると…こんな感じで様々な「文字アニメーション」が見れます!(おお!)

(どれもおしゃれだなぁ…✨)

気になるデザインを見つけたら「クリック」します。(ポチっと)

このようにアニメーションの「ソースコード」が表示されました!

コードは「HTML」「CSS」「JavaScript」の3ブロックに分かれています。(ふむふむ…。)

実装する際には、右側のコードを「コピー」しておきましょう!

【ぐるぐる】「読み込み中」のアニメーションが見つかる!【CSS loaders and Spinners】とは?
みなさんこんにちは!おさかなです!今回は「CSS loaders and Spinners」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・読み込み中のデザインを探している方・ローディング...

(ひと休み💤)

コピーしたコードを貼り付けよう!

テキストエディタを開いて、先ほどコピーしたコードを貼り付けていきます。
こちらはHTML

ファイルを分けた方がコードがすっきりとしますが、今回は<head>の中にある「<style>タグ内」に、CSSを貼り付けました…!(よいしょ!)

続いてJavaScriptについても、body末尾の「<script>タグ内」に貼り付けます。
これで挙動をチェックすると……アニメーションが表示されるので、みなさんも是非試してみてください!(お疲れ様でした🍮)

動くWebデザイン アイディア帳 実践編 | 久保田 涼子, 杉山 彰啓 |本 | 通販 | Amazon
Amazonで久保田 涼子, 杉山 彰啓の動くWebデザイン アイディア帳 実践編。アマゾンならポイント還元本が多数。久保田 涼子, 杉山 彰啓作品ほか、お急ぎ便対象商品は当日お届けも可能。また動くWebデザイン アイディア帳 実践編もアマゾン配送商品なら通常配送無料。

↓実際に作成したものがこちら

Hello Goodbye

おさかな
おさかな

You say goodbye i say hello~♪

ナビまる
ナビまる

この曲って直訳すると、意味わからなすぎるよな。笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【ゲーム制作】ノーコード開発ツール【Breshna】とは?
みなさんこんにちは!おさかなです!今回は「Breshna」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ノーコードでミニゲームを作成したい方・神経衰弱やシューティングゲームを作りたい方・...

↓制作に携わった記事

おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました