Dawnのカスタムリキッドセクションでテキストにフェードを付けたい

[ashmari]

Dawnのカスタムリキッドセクションでテキストにフェードを付けようと試みましたが、

スクロールでclassを付与するJQueryを効かすことが出来ず困っております。

CSSのみでフェードさせることは出来ましたが、読み込んだ時点でスタートし、

セクションに到達した時点で動きが終わっているので、意味が無い状況です。

セクションに到達したタイミングでclassを付与する方法は無いでしょうか？

お力添え頂けると助かります。

どうぞよろしくお願いいたします。

[Jizo_Inagaki · Accepted solution]

以下のIntersection Observer APIなどで概ね対応できると思います。

https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

[ashmari]

ご回答ありがとうございます。

申し訳ございません、私の説明が不十分でしたので、状況を具体的に記述させて頂きます、

custum-liquid.liquid の

<div class="section-{{ section.id }}-padding">

に xxxxxTrigger というクラスを追加し、スクロールで アニメーションを動かすクラス XXXXX に置き換えようと考えました。

<div class="section-{{ section.id }}-padding xxxxxTrigger">

しかし機能せず、セクション自体が空白で表示されている状態です。

xxxxxTrigger の部分に直接 xxxxx を置けば、アニメーションは動きます。

jsは以下で記述しております。

function xxxxx(){

  $('.xxxxxTrigger').each(function(){
    const position = $(this).offset().top;
    const scroll =  $(window).scrollTop();
    const windowHeight = $(window).height();

    if(scroll > position - windowHeight + 100){
      $(this).addClass('xxxxx');
    }else{
      $(this).removeClass('xxxxx');
    }
  });

}

$(window).scroll(function(){
  xxxxx();
});

shopify外のページでテストしたところ、問題なく動きました。

初心者なので、根本的に間違っているのかもしれませんが

何卒お力添え頂けますと幸いです。

どうぞよろしくお願いいたします。

[ashmari]

度々すみません、先程説明させて頂いた件ですが、

jsの読み込み設定などを再度やり直したところ、正常に動き解決いたしました。

お騒がせしてしまいすみませんでした。

どうぞよろしくお願いいたします。