jQuery 文字間スペースを置換して特定要素で囲んでテキストデザイン + テキストをフリップアニメーションさせてみる。

どうもこんにちは。Toshikuraです。今回のTipsは【jQuery 文字間スペースを置換して特定要素で囲んでテキストデザイン + テキストをフリップアニメーションさせてみる。】です。ちょっとタイトルだと想像できないとは思いますが…結構面白い効果及びデザインができるので記事化しておきます。ちなみにNYに行った際、TVCMでこの表現が使われていました。もしかしたら今後役に立つかもしれません。

実装方法

HTML

<p class="flipping">Grumpy wizards make toxic brew for the evil Queen and Jack.</p>

JS

$(function(){
    $(‘.flipping’).each(function(){
        $(this).wrapInner(‘<span></span>’)
        var txt = $(this).html();
        $(this).html(
            txt.replace(/s/g,'</span><span>’)
        );
    });
});

CSS

.flipping span{
    display: inline-block;
    margin:3px;
    padding:0 9px;
    background: #000;
    color: #fff;
}

発展編 – フリップアニメーション

文字間にスペースを空ける事はできましたがさすがにこれだけじゃつまらないかと思います。そこでここでは【jQuery Transit】と組み合わせてパラパラフリップして順番に文字が出てくるアニメーションを追加してみました。スライダー系と相性が良さそうですので試してみても面白いかと思います。短めで違う方法も有りですが見てわかる優先で。

HTML

<div class="goflip">GO!</div>
<div class="backflip">BACK!</div>
<p class="flipping flipper">A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent.</p>

JS

$(function(){
    $(‘.flipping’).each(function(){
        $(this).wrapInner(‘<span></span>’)
        var txt = $(this).html();
        $(this).html(
            txt.replace(/s/g,'</span><span>’)
        );
    });
    $(‘.flipper > span’).css({
        perspective: ‘300px’,
        rotateX: ’90deg’
    });
    $(‘.goflip’).click(function(){
        var spNum = $(‘.flipper > span’).size() – 1;
        var i = 0;
        setInterval(function(){
            if(i <= spNum){
                $(‘.flipper > span:eq(‘+i+’)’).transition({
                    perspective: ‘300px’,
                    rotateX: ‘0deg’
                },500);
                i++;
            }
        },50);
    });
    $(‘.backflip’).click(function(){
        var spNum = $(‘.flipper > span’).size() – 1;
        setInterval(function(){
            if(spNum >= 0){
                $(‘.flipper > span:eq(‘+spNum+’)’).transition({
                    perspective: ‘300px’,
                    rotateX: ‘-90deg’
                },500);
                spNum–;
            }
        },50);
    });
});

jQuery及びjQuery Transitのプラグインファイルの読み込みをお忘れなく。詳しくはデモをご確認ください。

以上になります。