文字が流れる・逆バージョン編


1 文字が流れる・逆バージョン
前回、「文字が右から左へ流れる」編をご紹介しました。
折角ですので、その逆バージョンも、以下に紹介します。


   出発するぞ~!  じゃあ


👆上のテキストが左から右へと流れています。
「右から左へ」バージョンのソースをほんの少し入れ替えただけです。

以下にそのソースを紹介します。





2 ソースです
HTMLのソース
<p class="marquee-animl">
<span>(ここに流したいテキスト文が入る)</span>
</p>



CSSのソース
.marquee-animl {
  overflow: hidden;
  color: rgb(51,51,51); 
}

.marquee-animl span {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: marquee 14s linear infinite;
}

@keyframes marquee-animl  {
  from {
    transform: translate(-100%);
  }
  to {
    transform: translate(0%);
  }
}

「右から左へ」と異なる点は、ソースの下部の「@keyframes marquee」の中身の数値
「0%」を「-100%」に
「-100%」を「0%」に
入れ替えただけです。

※なお、「右から左へ」へと「左から右へ」との違いを示すために「.marquee-anim」の「クラス名」を「.marquee-animl」に変えています。(好みの名前でOKです)

sea-3058780_1920.jpg
Quang Nguyen vinhによるPixabayからの画像


3 別の方法・<marquee>タグ編
実は、もっとシンプルな<marquee>タグを使う方法があるのですが、HTML5ではこの機能は廃止されました。
まだ動作するブラウザーもありますが、いつ使えなくなるか分からないので、使わないよう方が無難です。

とても面倒くさいですが、上で紹介したCSSを使う方法が今後のことを考えると確実です。
でも、私のブラウザーは、多くの方が使用しているChromeですが、問題なく動作していますので以下にそのシンプルな方法を紹介します。
Edge、IEでも試してみましたが動作しました。

右から左へ
お~い! 待ってくれ~ 


左から右へ
   出発するぞ~!  じゃあ
以下にソースを紹介します。


4 ソースです・<marquee>タグ編
HTMLのソース・右から左へ
<marquee>
<span>(ここに流したいテキスト文が入る)</span>
</marquee>



HTMLのソース・左から右へ
<marquee direction="right">
<span>(ここに流したいテキスト文が入る)</span>
</marquee>

開始<marquee>タグ中に「direction="right"」を挿入すると右方向に流れます。
違いは、この部分だけです。


5 左右往復も・<marquee>タグ編
左右往復させると、こうなります。

右へ、左へ
 あっちを立てれば~ こっちが立たず~ 


HTMLのソース・右へ、左へ
<marquee  behavior="alternate">
<span>(ここに流したいテキスト文が入る)</span>
</marquee>

開始<marquee>タグ中に「behavior="alternate"」を挿入しました。
往復回数を指定するときは、続けて「loop="数値"」を挿入します。
数値の回数分だけ往復します。
指定が無ければ、無限に往復します。

"文字が流れる・逆バージョン編"へのコメントを書く

お名前:[必須入力]
メールアドレス:
ホームページアドレス:
コメント:[必須入力]