FROM CACHE - jp_header

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

解決済

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

ashmari
観光客
15 0 1

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

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

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

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

 

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

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

 

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

  • CSS
1 件の受理された解決策

Jizo_Inagaki
Shopify Partner
1059 398 707

成功

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

3件の返信3

Jizo_Inagaki
Shopify Partner
1059 398 707

成功

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
ashmari
観光客
15 0 1

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

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

 

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
観光客
15 0 1

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

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

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

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