CSS/JS「スクロールすると、線が左から横にのびる」動きについて

Question

実現したいこと

スクロールすると、H2の線が左から右にのびる

前提

HTML・CSS・JSで実装

発生している問題

「線が左から右にのびる」動きが一斉に行われてしまう。
スクロールで各エリアに画面に入ったときに動くようにしたい。

該当のソースコード

HTML=============================

<section class="p-top__vision">
<h2 class="p-top__vision-title js-scrollAnimation">VISION</h2>
<p class="p-top__vision-description">テキストテキストテキスト</p>
</section>

<section class="p-top__service">
<h2 class="p-top__service-title js-scrollAnimation">SERVICE</h2>
<p class="p-top__service-description">テキストテキストテキスト</p>
</section>

SCSS=============================

.border {
  position: relative;
  width: 100%;
}

.border:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: solid 2px #000;
  animation: border_anim 2s linear forwards;
}

@keyframes border_anim {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

JS=============================

var $target = $('.js-scrollAnimation');
var offset = 100;

$(window).on('scroll', function () {

  var scroll = $(window).scrollTop();
  var h = $(window).height();

  $target.each(function () {
    var pos = $(this).offset().top;
    if (scroll > pos - h + offset) {
      $(this).addClass('border');
    }
  })

}).trigger('scroll');

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、画面内に入った時に「線が左から右にのびる」動きをしました。
つまり、問題が再現しませんでした。

なお、ご提示のコードそのままでは、開いたときにすでに画面内に入っているので、改行などを挟んで試しています。

Answer 1

こんな感じですか？

<style>
section{
  height:120%;
}
.border {
  position: relative;
  width: 100%;
}

.border:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: solid 2px #000;
  animation: border_anim 2s linear forwards;
}

@keyframes border_anim {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
const e_scroll = new CustomEvent("HTMLEvents");
e_scroll.initEvent('scroll', true, true );
window.addEventListener('DOMContentLoaded',()=>{
  window.dispatchEvent(e_scroll);
});
window.addEventListener('scroll',()=>{
  const observer = new IntersectionObserver(changes=>{
    for (let change of changes) {
      change.target.classList.toggle('border',change.intersectionRatio > 0);
    }
  });
  document.querySelectorAll('.js-scrollAnimation').forEach(target=>observer.observe(target));
});
</script>

<section class="p-top__vision">
<h2 class="p-top__vision-title js-scrollAnimation">VISION</h2>
<p class="p-top__vision-description">テキストテキストテキスト</p>
</section>

<section class="p-top__service">
<h2 class="p-top__service-title js-scrollAnimation">SERVICE</h2>
<p class="p-top__service-description">テキストテキストテキスト</p>
</section>

<section class="p-top__service">
<h2 class="p-top__service-title js-scrollAnimation">TEST</h2>
<p class="p-top__service-description">テキストテキストテキスト</p>
</section>

Comments

[pobi]

ありがとうございます！
問題解消することができました！大変助かりました！

もう1点お伺いしたいのですが、
スクロールイベントを1回だけにする記述を加えたいのですが、
教えていただくこと可能でしょうか？

[yambejp]

一回引かれたborderは消さないということですね？

change.target.classList.toggle('border',change.intersectionRatio > 0);
の行を以下に変更してください
if(change.intersectionRatio > 0) change.target.classList.add('border');

[pobi]

早速ありがとうございます。
実装したかった動きができました・・・！
本当にありがとうございます！