スクロールしたらテキストが横に流れるアニメーション

どうも、くまだです。

ネタが思い浮かばないので、過去1年ぐらい前に案件で使ったものを書きます。

タイトルのとおりで、スクロールしたら文章が横に流れる演出のアニメーションです。

アンダーラインのアニメーションの記事はこちらです。

アンダーラインのアニメーション

仮に参考サイトからコードをコピペしても、コードの一部を弄って自分なりのコードに改変するのも勉強になります。特に、動作確認をするのには。ここを変えたら、動きはど…

weblife.ppmp556.com

スクロールしたらテキストが横に流れるアニメーション

まずはどんな感じか動画でどうぞ。

上部の黒い部分はヘッダーのつもりです。

最初の数行がいきなり複数行でてきていますが、FVがないからです。

動画ではやりませんでしたが、FVがあれば、徐々にスクロールしていけば1行目から徐々に出てくるはず…。

コードは以下のとおりです。

〇HTML

  <header class="header">

  </header>



  <div class="interrog__txtarea">
    <p class="interrog__text js-move" data-area="文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。">
      文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。</p>
    <p class="interrog__text js-move" data-area="文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。">
      文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。</p>
    <p class="interrog__text js-move" data-area="文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。">
      文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。</p>
    <p class="interrog__text js-move" data-area="文章が左から出ます。文章が左から出ます。">文章が左から出ます。文章が左から出ます。</p>
    <p class="interrog__text js-move" data-area="文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。">
      文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。</p>
    <p class="interrog__text js-move" data-area="文章が左から出ます。文章が左から出ます。">文章が左から出ます。文章が左から出ます。</p>
    <p class="interrog__text js-move" data-area="文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。">
      文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。</p>
    <p class="interrog__text js-move" data-area="文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。">
      文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。</p>
    <p class="interrog__text js-move" data-area="文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。">
      文章が左から出ます。文章が左から出ます。文章が左から出ます。文章が左から出ます。</p>
    <p class="interrog__text js-move" data-area="文章が左から出ます。文章が左から出ます。">文章が左から出ます。文章が左から出ます。</p>

  </div>

〇CSS

.header {
  width: 100%;
  background: gray;
  height: 80px;
}

.interrog__txtarea {
  height: 1000px;
  display: flex;
  flex-direction: column;
  margin-top: 100px;
  text-align: center;

}


.interrog__text {
  display: inline-block;
  position: relative;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;

  text-align: left;
  white-space: nowrap;
  filter: blur(6px);
  margin-bottom: 50px;
}



.interrog__text.active {
  transform: translateY(0);
  filter: blur(0);
  transition: transform 0.8s;
}

.interrog__text.active::before {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: top left;
  animation: 2s scroll forwards .4s;
  content: attr(data-area);

}



@keyframes scroll {
  0% {
    width: 0%;
    transition: 4s;
  }

  100% {
    width: 100%;
    color: #000;
    transition: 4s;
  }
}

〇JavaScript（jQuery）

$(function () {
  $(window).scroll(function () {
    $(".js-move").each(function () {
      const text = $(this).offset().top;
      const scroll = $(window).scrollTop();
      const windowHeight = $(window).height();
      if (scroll > text - windowHeight + windowHeight / 4) {
        $(this).addClass("active");
      }
    });
  });
});

基本的にはkeyframesでアニメーションの設定をしています。JSでは発火のタイミングを設定しているだけです。

ある程度のスクロールしたらjs-moveクラスがついたものにactiveクラスが付与されて、CSSの以下の部分の処理が行われます。

.interrog__text.active {
  transform: translateY(0);
  filter: blur(0);
  transition: transform 0.8s;
}

.interrog__text.active::before {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: top left;
  animation: 2s scroll forwards .4s;
  content: attr(data-area);

}

背景が白なのでわかりにくいですが、背景に画像や白以外のものがあれば、もう少し動きはわかりやすかったかも。

背景をわかりやすく赤にしてみました（チカチカする…）

ちなみに最初に出てくる白い文章は、data-areaのものです。

それをkeyframesで0%→100%にいく中で、widthが0%から100%になり、そのついでに文字色を黒にしている感じです。

超ざっくりでしたが、ここまで読んでくださりありがとうございました。