クリエイターのためのWebテク講座 -テキストエフェクトを作ってみよう

今回は、transitionプロパティを使って、実際に案件でも使えそうなテキストエフェクトを作ってみます。

テキストエフェクトの実装

このサンプルでは、横並びに配置したテキストを、JavaScriptを使って、一つずつtransitionさせています。今回のエフェクトも、transitionプロパティを使うと、数行程度のJavaScriptで実装できてしまいます。

※今回も、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。残念ながら現時点ではIEは「transitionプロパティ」には対応していません。

では早速記述を見てみます。

<style>
#wrap
{
    margin:50px;
}
#wrap div
{
    display:none;
    float:left;
    transform:translate(0px,-50px);
    opacity:0;
    transition:all 500ms ease-out;
}
p{
    font-size:12px;
    cursor:pointer;
    width:100px;
    padding:5px;
    text-align:center;
    background:#CCC;
}
</style>

</head>
<body>
    <p>開始</p>
    <div id="wrap">
        <div class="text0">W</div>
        <div class="text1">e</div>
        <div class="text2">b</div>
        <div class="text3">テ</div>
        <div class="text4">ク</div>
        <div class="text5">講</div>
        <div class="text6">座</div>
    </div>
</body>

テキストを、個々のdivタグに入れて、float配置し、translateで位置を、opacityで透過の設定を行います。ここで、なぜdivのfloatにするかというと、translateの設定がブロックレベル要素にしか対応していなかったためです。

図にすると下のようになります。

また、各div要素にdisplay:none;を設定していますが、これに関しては後のJavaScriptの解説の時に説明します。

ではJavaScriptの記述を見てみましょう。

<script>
$(function ()
{
    $("p").bind("click" , function(e)
    {
        textEffect();
    });
    //時間差で表示blockに戻す。
     setTimeout(function(){
        for(var i = 0 ; i < 7 ; i++)
        {
            var target = ".text" + i;
            $(target).css("display" , "block");
        }
    }, 100);
});
//テキストエフェクトを実装
function textEffect()
{
    //アニメーションの実行を200ミリ秒間隔で実行
    var id = setInterval(loop , 200);
    var counter = 0;
    function loop()
    {
        var target = ".text" + counter;
        $(target).css({"opacity":"1" , "transform":"translate(0px,0px)"});

        counter++;
        //カウンタが、テキストの数より大きい場合、処理を止める。
        if(counter > 6)
        {
            clearInterval(id);
        }
    }
}
</script>

まずは、ドキュメントが読み込まれたら、以下の処理で初期化します。

$(function ()
{
    $("p").bind("click" , function(e)
    {
        textEffect();
    });
    //時間差で表示blockに戻す。
     setTimeout(function(){
        for(var i = 0 ; i < 7 ; i++)
        {
            var target = ".text" + i;
            $(target).css("display" , "block");
        }
    }, 100);
});

Pタグにクリックイベントを渡して、「setTimeout」で、時間差でテキストを表示状態に直します。

「setTimeout」は、ある処理を時間差で実行したいときに利用します。

書式は、

「setTimeout(実行したい関数 , 実行までの時間[1/100秒単位])」

なぜわざわざこんな処理を入れるかというと、ドキュメントが読み込まれた直後に、translate(0px,-50px)、opacity:0のtransitionが実行されてしまうためです。

ですので、最初は非表示にしておいて、アニメーションが実行されても見えないようにしておきます。

複雑なtransitionを組んだ場合は、親要素ごと非表示にするといいでしょう。

あとは、for文を使って、テキストにスタイルを当てています。一応、初心者の為に、簡単に解説すると、for文とは、

for(変数宣言、初期化 ;ループ条件 ; ループ時実行処理)
{
処理
}

という記述を行い、ループ条件を満たすまで処理を繰り返します。このとき、変数宣言、初期化した変数を使えるため

var target = ".text" + i;

この記述で、「text0」「text1」にアクセスできる訳です。

次に、テキストエフェクトの処理の解説に入ります。

//テキストエフェクトを実装
function textEffect()
{
//アニメーションの実行を200ミリ秒間隔で実行
var id = setInterval(loop , 200);
var counter = 0;
function loop()
{
var target = ".text" + counter;
$(target).css({"opacity":"1" , "transform":"translate(0px,0px)"});

counter++;
//カウンタが、テキストの数より大きい場合、処理を止める。
if(counter > 6)
{
clearInterval(id);
}
}
}

「setInterval」を使って時間差で、テキストのプロパティを変更して、transitionを実行します。

「setInterval」は「setTimeout」と似た記述をしますが、「setTimeout」と違うのは、名前が示す通り、設定した時間をインターバルにして、指定した処理を繰り返します。

つまり、今回のコードでは、

var id = setInterval(loop , 200);

「loop」という関数を200ミリ秒ごとに繰り返すという意味です。さらに「setTimeout」と違う点が、「var id = 」で取得したidを使い

clearInterval(id);

上記記述で、繰り返し処理を止めることができる点です。まあ、当然といえば当然で、繰り返し処理なのですから、実行を止められないと、処理が重くなって、最悪ブラウザが落ちてしまうなんてこともありますからね。

今回は、繰り返し処理をするたびに「counter」という変数を監視して、テキストの数を超える場合に処理を止めるようにしています。

今回のサンプルでは、デバイステキストを使っているので、ブラウザによっては半角英語の位置がおかしくなったりするかと思います。

実際に案件で使おうと思ったら、Webフォントなどと組み合わせて使ったり、画像を使うなりの工夫は必要になるでしょう。しかし、CSS3のtransitionを使えば、今までFlashかjQueryのanimateくらいしか選択肢がなかったアニメーションエフェクトを実装できます。

特にスマートフォン端末では、jQueryのanimateだと、処理が重くてガクガクでした。しかし、transitionプロパティを使うことで、スマートフォンでもオープニングエフェクトを実装することができるということです。

河野　義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナー（WCBセミナー）の講師としてもおなじみ。

クリエイター向け転職・派遣情報サイト「マイナビクリエイター」より転載