CSSアニメーションの処理を個別に適用し、コードを効率的に書きたい

Question

作成したプログラム

画面をスクロールすると見出しにアニメーションが適用されるプログラムをJSで作成しました。

実現したいこと

画面をスクロールし、画面に入った見出しに順次アニメーションを適用していく、という形にしたいのですが、
今のコードですと全ての見出しに一斉にアニメーションが発生してしまいます。

それぞれのアニメーションをeach(function(){})で囲って個別に適用させる方法も考えましたが、
同じ処理を何度も記述しなければいけなくなり、効率が悪いです。

より効率的なコードの記述がありましたら、ご教示頂けますと幸いです。

$(function(){

var enHdBlock = $(".en_hd_block");

$(window).scroll(function(){
  var windowHeight = $(window).height();
  var target = enHdBlock.offset().top;
  var scroll = $(window).scrollTop();
  if(scroll > target - windowHeight + 100){
    enHdBlock.addClass("en_hd_block_on");
    enHdBlock.delay(500).queue(function(){
      $(".en_hd_font").css({
        opacity: '1'
      });
      enHdBlock.addClass("en_hd_block_end");
    });
  }
});

});

<!----このようなコードが画面に何個もある---->
<section class="section_1">
 <h2 class="en_hd_block">
 <span class="en_hd_font">Heading1</span>
 </h2><!--/.en_hd_block -->
</section>

<section class="section_2">
 <h2 class="en_hd_block">
 <span class="en_hd_font">Heading2</span>
 </h2><!--/.en_hd_block -->
</section>

.en_hd_block{
	display: inline-block;
	font-size: 12rem;
	font-weight: 900;
	color: #b34b4b;
	font-family: 'Roboto', sans-serif;
	margin-bottom: 4rem;
	position: relative;
}

.en_hd_block .en_hd_font{
	opacity: 0;
}

.en_hd_block::before{
	content: '';
	display: block;
	width: 0;
	height: 100%;
	background: #b34b4b;
	position: absolute;
	top: 0;
	left: 0;
	transition: 0.6s cubic-bezier(0.76, 0, 0.24, 1);*/
}

.en_hd_block_on::before{
	width: 100%;
}

.en_hd_block_end::before{
	width: 0;
	left: auto;
	right: 0;
}

コード

Comments

[Lhankor_Mhy]

enHdBlock には何が入っているのですか？

[Keichi_Negishi]

失礼しました。
記述が漏れていました。

var enHdBlock = $(".en_hd_block");

となっています。

Answer 1

Intersection Observer を使うことをおすすめします。

Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる | コリス

【JavaScript】Intersection Observer APIを使ってtargetを遅延読込させたい - Qiita

IntersectionObserverを使って要素の交差を検知してアニメーションさせる｜sumi｜note

Comments

[Keichi_Negishi]

ご回答ありがとうございます。
試してみます。

Answer 2

Intersection Observerを使うことには同意ですか、
現象のコードを活かすなら、each()メソッドで各要素をループ処理すればいいでしょう。

$(function () {

    var enHdBlock = $(".en_hd_block");

    $(window).scroll(function () {
        var windowHeight = $(window).height();
        var scroll = $(window).scrollTop();
        enHdBlock.each(function () {
            var target = $(this).offset().top;
            if (scroll > target - windowHeight + 100) {
                $(this).addClass("en_hd_block_on");
                $(this).delay(500).queue(function () {
                    $(this).children(".en_hd_font").css({
                        opacity: '1'
                    });
                    $(this).addClass("en_hd_block_end");
                });
            }
        });
    });
});

Comments

[Keichi_Negishi]

このように書けば良かったのですね。
Intersection Observerの使い方でつまづいていた所でした。
ありがとうございます！