【コピペで実装】テキストが左右から流れるように出現するアニメーション

July 21, 2024October 18, 2024

URLをコピーしました！

今回は画面をスクロールして、指定のテキストのところに画面が来たら左右どちらからか流れるようにテキストが出現するアニメーションの紹介をします。

基本的にはセクションのタイトルなどにこのアニメーションを指定して使用します。

先に動きを確認して欲しいので完成版のコードを用意しました！

コピペで実装できるようにしているので、ぜひ活用してください。

コード完成版

・右側Resultタブの「Run Pen」ボタンをクリックして、質問のボックスをクリックして挙動を確認してください！

※今回はスクロールしてからアニメーションが動くようになっているので画面をスクロールするのを忘れずに行ってください。

・左側のHTML,CSS,JSタブをクリックすると、それぞれのコードが表示されます。VScodeなどでそのままコピペしたらすぐに実装できます！

See the Pen Untitled by teppei (@kawatetu) on CodePen.

順番に解説していきます！

コード解説

HTML

 <!-- Aboutセクション -->
  <section class="content-block">
    <h2 class="content-title">
      <span class="animate-wrapper slide-right">
        <span class="animate-inner slide-right-inner">About</span>
      </span>
    </h2>
  </section>
  
  <!-- Newsセクション -->
  <section class="content-block">
    <h2 class="content-title">
      <span class="animate-wrapper slide-left">
        <span class="animate-inner slide-left-inner">News</span>
      </span>
    </h2>
  </section>

　<!-- Serviceセクション -->
  <section class="content-block">
    <h2 class="content-title">
      <span class="animate-wrapper slide-left">
        <span class="animate-inner slide-left-inner">Service</span>
      </span>
    </h2>
  </section>

コードの内容

<section>：各部分（「About」や「News」）を分けるためのブロックです。
class="content-block"：セクションを見やすく整理するためのCSS用の名前です。
<h2>：各セクションのタイトル。
class="content-title"：タイトルのフォントサイズ等はこちらで変更してください。
<span>：CSSアニメーションのために、文字列を包むタグ。
slide-left/slide-right：それぞれ左や右から文字をスライドさせるアニメーションを意味します。
slide-left-inner / slide-right-inner：親要素のアニメーションの影響を受けないよう、文字自体にも個別の動きをつけます。

CSS

全体のアニメーションを設定するCSS

.animate-wrapper {
  overflow: hidden; /* 枠からはみ出る部分を隠す */
  display: inline-block;
}

.animate-inner {
  display: inline-block;
  opacity: 0; /* 最初は透明にしておく */
}

animate-wrapper：中にある要素が枠からはみ出しても、見えなくなるように設定します。
animate-inner：文字自体の要素を最初は「透明」にしておき、アニメーションで表示するようにします。

左から右へのアニメーションの設定

.slide-left {
  opacity: 0;
}

.slide-in-from-left {
  animation: slideFromLeft 0.8s forwards;
}

@keyframes slideFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

slide-left：最初は透明な状態です。
slide-in-from-left：@keyframesのアニメーションで、「左から右へ移動しながら表示」します。
@keyframes：アニメーションの動き。
translateX(-100%)：画面の外（左側）からスタートし、元の位置（translateX(0)）に移動。

右から左へのアニメーションの設定

.slide-right {
  opacity: 0;
}

.slide-in-from-right {
  animation: slideFromRight 0.8s forwards;
}

@keyframes slideFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

右から左へ移動するバージョンも同じように設定しています。

JavaScript

JavaScriptは 「いつ」「どのように動くか」を指定 する役割を担います。

function runAnimations() {
  // 右から左へ動くアニメーション
  $('.slide-right').each(function () {
    let elementTop = $(this).offset().top - 50;
    let scrollPosition = $(window).scrollTop();
    let windowHeight = $(window).height();

    if (scrollPosition >= elementTop - windowHeight) {
      $(this).addClass('slide-in-from-right');
      $(this).children('.slide-right-inner').addClass('slide-in-from-left');
    } else {
      $(this).removeClass('slide-in-from-right');
      $(this).children('.slide-right-inner').removeClass('slide-in-from-left');
    }
  });

  // 左から右へ動くアニメーション
  $('.slide-left').each(function () {
    let elementTop = $(this).offset().top - 50;
    let scrollPosition = $(window).scrollTop();
    let windowHeight = $(window).height();

    if (scrollPosition >= elementTop - windowHeight) {
      $(this).addClass('slide-in-from-left');
      $(this).children('.slide-left-inner').addClass('slide-in-from-right');
    } else {
      $(this).removeClass('slide-in-from-left');
      $(this).children('.slide-left-inner').removeClass('slide-in-from-right');
    }
  });
}

// スクロール時にアニメーションを実行
$(window).scroll(function () {
  runAnimations();
});