あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】テキストを一文字ずつ立体的にフェードインするテクニック/Scale fadeIn text

【jQuery】テキストを一文字ずつ立体的にフェードインするテクニック/Scale fadeIn text

スポンサーリンク

実装内容

よくあるテキストを「一文字ずつフェードイン」するアニメーションに立体感をつけてみました。

実装所要時間:10分程度

実装方法

実装に必要なスクリプトはたったのこれだけです。

$(function(){
  $('.text').children().addBack().contents().each(function() {
      $(this).replaceWith($(this).text().replace(/(\S)/g, '$&'));
  });
});
$(window).on('load', function(){
  $(".text-move").addClass("active");
});

【簡単な解説】
まずは、jQueryでテキストを一文字ずつspanで囲んでいます。その後、.addClassでactiveというクラスを付与してアニメーションを発火しています。
アニメーションはCSS3のアニメーションを使用し、transform: scale(1.25) →scale(1)で奥行。translate(8px, 4px)で少しずらすことで良い感じに動きをつけています。

スポンサーリンク