HTML: テキスト効果

この記事はテキスト効果を作る方を説明します。

1. Marqueeタグを使う

Marqueeタグでテキストは右から左までで、左から右までで、上から下までで、下から上まででをスクロールできます。特にイメージもできます。
Marqueeタグはnon-standard HTMLですが、ほとんどブラウザのサポートがあります。

a.スクロール

無限です。

<marquee behavior="scroll" direction="left">Home up!</marquee>

デモ：https://jsfiddle.net/thanh1992/u6x0f3k5/
directionを変更できます。

b.スライドイン

一回だけです。

<marquee behavior="slide" direction="right">Home up!</marquee>

デモ：https://jsfiddle.net/thanh1992/p386ps8f/
directionを変更できます。

c.オルタネイト

テキストは代替の右から左まででをスクロールした後、左から右まででをスクロールします。無限です。

<marquee behavior="alternate">Home up!</marquee>

デモ：https://jsfiddle.net/thanh1992/27gxrz93/

d.速度

Scrollamountを使う

Scrollamountはpixels/frame速度です。

<marquee behavior="scroll" direction="left" scrollamount="10">Home up!</marquee>

デモ：https://jsfiddle.net/thanh1992/dpL1mzmL/

scrolldelayを使う

Scrolldelayはframe１からframe２までかかる時間

<marquee behavior="scroll" direction="left" scrolldelay="100" scrollamount="2">Home up!</marquee>

デモ：https://jsfiddle.net/thanh1992/mcwpu88f/

e.マウスでstop　start

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
Home up!
</marquee>

デモ： https://jsfiddle.net/thanh1992/evhgyuk6/

2. CSSを使う

CSSのanimation機能を使います。
以下はオルタネイト効果です。
HTML:

<div class="wrapper">
  <span class="marquee">Home up!</span>
</div>

CSS:

.wrapper{
    max-width: 400px;
    text-align: right;
}

.marquee {
    white-space: nowrap;
    animation: alternateText 4s linear infinite;
}

@keyframes alternateText {
    0%   {margin-right:0;}
    50%  {margin-right:100%;}
    100% {margin-right:0;}
}    

デモ： https://jsfiddle.net/thanh1992/mrxdcdqm/