Izanagi's site

jQueryを使って文字を１文字ずつ浮き上がらせる！

みなさんこんにちは！
イザナギです。
最近、デモでウェブアプリケーションを作成しているのですが、アニメーションをどうしようかで結構悩んでいました。
アニメーションといっても、フェードイン・文字の色の変更出会ったり様々な種類がありますからね。
結構迷ってしまいました。
でも結局は、実装しやすそうな「文字を１文字ずつ浮き上がらせる」ということをやることに決めました。
なので、今回はjQueryを使って「文字を１文字ずつ浮き上がらせる」というアニメーションをつけてみたいと思います！

文字の分割について

今回は下のような、HTMLに実装していきたいと思います。



１文字ずつ浮き上がってきます

では、jQueryの実装に入っていきます。
まずはじめに、h1タグの要素を変数に入れていきます。


var 変数① = $("h1");

その次に先ほど習得したタグの要素から文字のデータを抜き取ります。


var 変数② = 変数①.text();

抜きとった文字データを一文字ずつに分割して配列にして変数に代入します。


var 変数③ = 変数②.split('');

配列に入っている文字一つ一つにタグを追加していきます。
今回は<span>を利用します。


var 変数④ = "";
for (var i = 0;i < 変数③.length;i++) {
  変数④ += (${変数③[i]});
}

最後にh1タグにさっき作成した配列を戻します。


$("h1").html(変数④);

これで、文字の分割作業は終わりました。まとめるとこんな感じですね。


$(function () {
   var 変数１ = $("h1");
   var 変数２ = 変数１.text();
   var 変数３ = 変数２.split('');
   var 変数４ = "";
   for (var i = 0;i < 変数３.length;i++) {
     変数４ += (  $ {変数３[i]} );
   }
   $("h1").html(変数４);
 });

変数名は自分で好みのものをつけて見てください！
Googleで開いてみて検証してみてください。
<h1>タグの中に一文字ずつ<span>で囲まれているはずです。

一文字ずつ浮かび上がらせる

では、今回の実装で一番苦戦した「一文字ずつ浮かび上がらせる」を実装していきたいと思います！
はじめにコードを貼っておきます。


$("span").css({
    opacity: 0
});
var n = 0;

function func() {
    $("span").eq(n).css({
        opacity: '0.0'
    }).animate({
        opacity: '1'
    }, 1500);
    n++;
    var tid = setTimeout(function () {
        func();
    }, 500);
    if (n > 変数４.length) {
        clearTimeout(tid);
    }
}
func();

まずはじめの１行目でspanタグを透明にしています。
４行目の「$(&#8220;span&#8221;).eq(n).css({opacity:&#8217;0.0&#8242;}).animate({opacity: &#8216;1&#8217;}, 1500);」は「.eq(n)」でspanタグのn番目の要素を指定します。
そのあとに、「.css({opacity:&#8217;0.0&#8242;}).animate({opacity: &#8216;1&#8217;}, 1500);」をつけて、透明度を徐々に上げていっています。
今回は処理を一定時間をおいて繰り返すようにしているので「setTimeout」メソッドを利用しています。
「setInterval」を使うという手もありましたが、「setInterval」だと前の処理を待たずに処理が実行されてしまうらしいので利用しませんでした。
そして、そのあとに「clearTimeout」を使い「setTimeout」を終了しています。

まとめ

今回のコードをまとめると


$(function () {
    var 変数１ = $("h1");
    var 変数２ = 変数１.text();
    var 変数３ = 変数２.split('');
    var 変数４ = "";
    for (var i = 0; i < 変数３.length; i++) {
        変数４ += (   $ {変数３[i]}  );
    }
    $("h1").html(変数４);
    $("span").css({
        opacity: 0
    });
    var n = 0;

    function func() {
        $("span").eq(n).css({
            opacity: '0.0'
        }).animate({
            opacity: '1'
        }, 1500);
        n++;
        var tid = setTimeout(function () {
            func();
        }, 500);
        if (n > 変数４.length) {
            clearTimeout(tid);
        }
    }
    func();
});

ぜひ参考にして見てください！
それでは今回はここで筆を置かせていただきます。
最後まで記事をご覧いただきありがとうございました！

2024 - Izanagi's Site