スクロールテキストを作成する方法
私のように25年以上Webアプリケーションを開発してきた人なら、HTML、CSS、JavaScriptの使い方はもはや当たり前のようになっています。この記事では、これらのツールを使ってスクロールテキストを作成する簡単な方法をいくつかご紹介します。初心者の方でも、サイトに素敵な効果を加えたい方でも、きっと役立つ方法が見つかるはずです。
サイトに掲載したり、GiphyやInstagramにアップロードしたりするためのスクロールテキストが必要なだけなら、PSDDudeの無料スクロールテキストジェネレーターを強くお勧めします。
今日は、スクロールテキストに関連する次のトピックについて説明します。
- HTML スクロールテキスト
- CSS のみのスクロールテキスト
- JS を使用したスクロールテキスト
- jQuery スクロールテキスト
- HTML5 Canvas スクロールテキスト
HTML スクロール テキスト
ウェブページにスクロールテキストを素早く簡単に追加したいなら、HTMLタグを1つだけ使う昔ながらの方法があります。この方法は非推奨のため、最近のプロジェクトにはお勧めしませんが、知っておくと便利です。とはいえ、CSSやJavaScriptを使わずにスクロールテキストを追加する最も速い方法です。
HTML <marquee> タグ（非推奨）
テキストの周囲に <marquee> タグを追加すると、スクロール効果を作成できます。
例: <marquee> Scrolling Text </marquee>
See the Pen HTML Scrolling Text by Ion Emil Negoita (@inegoita) on CodePen.
注: このタグは非推奨なので、最新の Web 開発では使用しないでください。
CSS スクロールテキスト
CSS アニメーションと を使用してスクロール効果を作成します。@keyframes
See the Pen CSS Moving Text animation With @keyframes by Ion Emil Negoita (@inegoita) on CodePen.
基本的にこのコードは、translateX トランスフォームプロパティをアニメーション化することで、CSS スクロールテキストを作成します。CSS スクロールテキストの速度は、animation プロパティのタイミングによって決まります。アニメーションの継続時間が短いほどテキストのスクロール速度が速くなり、値が大きいほどテキストの動き
また、アニメーションで translateX トランスフォームを translateY と入れ替えると、水平スクロール テキストではなく垂直スクロール テキストが表示されます。
HTML + CSS + JavaScript スクロールテキストソリューション
基本的には、スクロールテキストにしたい長いテキストが入ったdiv要素があります。オーバーフロー部分を非表示にし、コンテナのスクロール量を20ミリ秒ごとに10ピクセルずつ増加させます。これらの値を調整して、テキストのスクロール速度を変えてみましょう。
See the Pen HTML + CSS + JavaScript Scrolling Text by Ion Emil Negoita (@inegoita) on CodePen.
jQuery Scrolling Text
jQuery.animate は任意の要素プロパティをアニメーション化できるため、今回は scrollLeft プロパティをアニメーション化します。これをループとして設定し、10000ms 経過後に scrollLeft の位置を 0 にリセットします。
See the Pen jQuery Scrolling Text by Ion Emil Negoita (@inegoita) on CodePen.
参考URL
