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

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

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

スポンサーリンク

この記事は2018年9月2日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

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

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

実装所要時間: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)によって位置を少しずらすことで動きをつける

スポンサーリンク