【javascript】jQueryでクラスを切り替え、CSS3でアニメーションさせるテキストロゴ

css, jQuery, WEB制作

jQueryでCSSを操作してアニメーション効果を出す手法が、ちょっと前から流行っていまして、簡単に出来るテキストアニメーションを作ってみました。

概要としてはこんな感じです。

setIntervalを使い一定時間で動作させる。
jQueryでクラス名を切り替える(ランダム)
transitionやanimateを設定でアニメーションさせる

今回のデモでは、css3 transitionを使って実装しました。

スポンサーリンク

デモ

※Resultボタンを押して動作を確認
こちらの例では、分かりやすくコードの実行時間を早くしています。

Resultタブを開いて、マウスをテキストに何回か乗せて動作を確認してみてください。
一定時間でクラス名を切り替えているので、アニメーションが変わります。

コード解説

このテキストエフェクトのHTMLは以下の様になっています。

<h1 id="site-title4" class="animate-style">
    <a href="#">
        <span>C</span>
        <span>r</span>
        <span>e</span>
        <span>a</span>
        <span>t</span>
        <span>i</span>
        <span>v</span>
        <span>e</span>
        <span>T</span>
        <span>i</span>
        <span>p</span>
        <span>s</span>
    </a>
</h1>

1文字づつspanタグで分けています。
これはHTML側で分けてもいいのですがSEO的に気になる場合はjavascriptで、動的にspanで分けた方がいいと思います。

次にCSSです。

全ソースはデモの方で見れますので、一部コードを元に紹介します。

#site-title0 a > span:nth-child(odd){
  color:#999;
  -webkit-transition:1s;
  transition:1s;
  text-shadow:0px -25px 0px rgba(255,255,255,0),0 25px 0px rgba(255,255,255,0),0 0 0px #fff,0 0px 0px #000;
  }
#site-title0 a > span:nth-child(even){
  color:#999;
  -webkit-transition:1s;
  transition:1s;
  text-shadow:-25px 0px 0px rgba(0,0,0,0),25px 0px 0px rgba(0,0,0,0),0 0 0px #fff,0 0px 0px #000;
  }

#site-title0 a:hover > span:nth-child(odd){
  color:#333;
  text-shadow:0px 0px 1px rgba(0,0,0,0.5),0 1px 1px rgba(0,0,0,0.5),1px 3px 3px #fff,1px 3px 3px #fff;
  }
#site-title0 a:hover > span:nth-child(even){
  color:#333;
  text-shadow:0px 0px 1px rgba(0,0,0,0.5),0px 1px 1px rgba(0,0,0,0.5),1px 3px 3px #fff,1px 3px 3px #fff;
  }
■ポイント
span:nth-child(odd)とspan:nth-child(even)で奇数・偶数番目の要素にそれぞれのスタイルを指定。
#site-title0 a:hover > span:nth-child(odd)と(even)で、マウスオーバー時のスタイルを指定。
位置調整なども含め、text-shadowの記述のみで行っている。

CSSを調整して、各文字の色を変更したり、大きさやを変えることも出来ます。

今回はtransitionのデモのみですが、animateを使えば更に表現の幅が広がりますね。

最後にjavascript

(function ($) {
  $(function(){
    var switchInterval = 2000;
    var interval = setInterval(function() {
      var target = $(".animate-style");
      var rand = Math.floor( Math.random() * 5 );
      var rand_number = target.attr("id").slice(-1);

      if(rand_number == rand){
        if(rand > 4){
          var rand = -1;
        } else{
          var rand = +1;
        }
        
        target.attr("id","site-title"+rand);

      } else{
          target.attr("id","site-title"+rand);
      }
    }, switchInterval);
  });;
}(jQuery));
■ポイント
setInterval(function() {で指定時間ごとにコードを動作させる。
Math.randomで指定範囲の乱数生成
同じ数値を生成する事もあるので、条件分岐で回避

まとめ

完全に自動化までは行きませんが、お手軽に出来るテキストエフェクトでした。
もっと凝って作ればすんごいアニメーションが作れると思います。

この記事が気に入ったら
『いいね』しよう!