2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

HTML、CSS、JSでスクロールテキストを作成する方法

Posted at

スクロールテキストを作成する方法

私のように25年以上Webアプリケーションを開発してきた人なら、HTML、CSS、JavaScriptの使い方はもはや当たり前のようになっています。この記事では、これらのツールを使ってスクロールテキストを作成する簡単な方法をいくつかご紹介します。初心者の方でも、サイトに素敵な効果を加えたい方でも、きっと役立つ方法が見つかるはずです。

:point_right: サイトに掲載したり、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

news-ticker.jpg

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?