【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

ある要素がスクロール位置まできたら左から右へ流れるようなアニメーション(テキストエフェクト)を実装したい。

本記事ではCSS・jQueryを使ってこのような悩みを解決します。

実装サンプル

See the Pen
左から右テキストエフェクト
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

スクロールすると、テキストが左から右へ流れるようにアニメーションされてる事がわかります。

実装方法は以下の通りです。

HTML

  <span class="leftAnime">
    <span class="leftAnimeInner">
      左から右テキストエフェクト
    </span>
  </span>

まず最初にアニメーションを実装したいHTML要素にleftAnimeクラス、その子要素にleftAnimeInnerクラスを付与します。

CSS

  /*左から右テキストエフェクト*/
  .leftAnime {
    opacity: 0;
    overflow: hidden;
    display: inline-block;
  }

  .leftAnimeInner {
    display: inline-block;
  }

//次章で追加するクラス
  .slideAnimeLeftRight {
    animation-name: slideTextX100;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }

  @keyframes slideTextX100 {
    from {
      transform: translateX(-100%);
      /*要素を左の枠外に移動*/
      opacity: 0;
    }

    to {
      transform: translateX(0);
      /*要素を元の位置に移動*/
      opacity: 1;
    }
  }

//次章で追加するクラス
  .slideAnimeRightLeft {
    animation-name: slideTextX-100;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }


  @keyframes slideTextX-100 {
    from {
      transform: translateX(100%);
      /*要素を右の枠外に移動*/
      opacity: 0;
    }

    to {
      transform: translateX(0);
      /*要素を元の位置に移動*/
      opacity: 1;
    }
  }

上記CSSを前章で追加したクラス・次章のjQueryで追加するクラスに付与します。

簡単に説明すると@keyframestransform: translateX();プロパティを使って要素を最初に枠外へ移動します。

この時、leftAnimeクラスは左枠外へ移動、子要素のleftAnimeInnerクラスは右枠外へ移動します。

要素がスクロール位置まできたらアニメーションプロパティを付与し、要素を元の位置に戻します。

JQuery

function slideAnime() {
  //テキストが左から右に流れるアニメーション
  $('.leftAnime').each(function () {
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
   //要素がスクロール位置まできたら   
    if (scroll >= elemPos - windowHeight) {
      //クラス付与
      $(this).addClass("slideAnimeLeftRight");
      $(this).children(".leftAnimeInner").addClass("slideAnimeRightLeft"); 
    } else {
      //クラス削除
      $(this).removeClass("slideAnimeLeftRight");
      $(this).children(".leftAnimeInner").removeClass("slideAnimeRightLeft");

    }
  });

}

//スクロールしたらアニメーションさせる
$(window).scroll(function () {
  slideAnime();
});
// ページが読み込まれたらアニメーションさせる
$(window).on('load', function () {
  slideAnime();
});

jQueryを使って要素位置までスクロールしたらクラスを付与します。

leftAnimeクラスにはslideAnimeLeftRightクラスを付与。

子要素のleftAnimeInnerクラスにはslideAnimeRightLeftクラスを付与します。

スクロール位置が要素を離れたら上記付与したクラスを削除します。

以上の実装手順で、要素位置まできたら左から右へ流れるようなテキストアニメーションの完成です。

まとめ

webページをエレガントに見せたいときなどに役立つかもです。

以上で解説を終わります。

Ads

関連記事

JavaScript プログラミング

bxsliderでスライダー内画像のaタグリンクが効かない時の対処方法【結論slickを使おう】

2022.01.28
120
WordPress プログラミング

【簡単】Custom Post Type UI で カスタム投稿タイプのアーカイブページに親ページ(任意の固定ページ)を設定する方法

更新日:2022.04.13
394
HTMLCSS

【コピペ用】ハンバーガーメニューをCSSのみで実装する方法

2022.06.05
340
WordPress プログラミング

【BreadcrumbNavXT】パンくずをJSONLD形式構造化で表示する方法

2022.01.02
31