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

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

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

スポンサーリンク

コーディングテクニックの実装内容

今回は、WEBページでよく見かける「テキストを一文字ずつフェードイン」させるアニメーションに立体感をつけてみました。

実装所要時間:10分程度

CSS,JavaScriptの記述内容

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

$(function(){
  $('.text').children().addBack().contents().each(function() {
      $(this).replaceWith($(this).text().replace(/(\S)/g, '<span class="text-move">$&</span>'));
  });
   setTimeout(function(){
      $(".text").addClass("active");
  },100);
});

実装のポイント

  • 1) jQueryでpタグ内のテキストを一文字ずつspanで囲む
  • 2) pタグに.addClass()でクラスactiveを付与
  • 3) クラスactiveが付与されたpタグのspanにCSS3のアニメーションを使用。transform: scale(1.25) →scale(1)で奥行感をだし、translate(8px, 4px)によって位置を少しずらすことで動きをつける

おすすめ記事

スポンサーリンク