Dawnのカスタムリキッドセクションでテキストにフェードを付けようと試みましたが、
スクロールでclassを付与するJQueryを効かすことが出来ず困っております。
CSSのみでフェードさせることは出来ましたが、読み込んだ時点でスタートし、
セクションに到達した時点で動きが終わっているので、意味が無い状況です。
セクションに到達したタイミングでclassを付与する方法は無いでしょうか？
お力添え頂けると助かります。
どうぞよろしくお願いいたします。
Topic summary
Dawnテーマのカスタムリキッドセクションで、スクロール時にテキストにフェードアニメーションを適用しようとしている問題。
当初の問題:
- CSSのみでフェードは実装できたが、読み込み時点でアニメーションが完了してしまう
- jQueryでスクロール時にクラスを付与する方法が機能せず、セクション自体が空白表示される状態
xxxxxTriggerクラスをxxxxxクラスに置き換えてアニメーションを動かす意図
提案された解決策:
- Intersection Observer APIの使用が推奨される
最終結果:
- 質問者がjsの読み込み設定を再度やり直したところ、正常に動作するようになり解決
- コード例としてjQueryのスクロールイベントとクラス付与のロジックが共有されている
以下のIntersection Observer APIなどで概ね対応できると思います。
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API
ご回答ありがとうございます。
申し訳ございません、私の説明が不十分でしたので、状況を具体的に記述させて頂きます、
custum-liquid.liquid の
に xxxxxTrigger というクラスを追加し、スクロールで アニメーションを動かすクラス XXXXX に置き換えようと考えました。
しかし機能せず、セクション自体が空白で表示されている状態です。
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外のページでテストしたところ、問題なく動きました。
初心者なので、根本的に間違っているのかもしれませんが
何卒お力添え頂けますと幸いです。
どうぞよろしくお願いいたします。
度々すみません、先程説明させて頂いた件ですが、
jsの読み込み設定などを再度やり直したところ、正常に動き解決いたしました。
お騒がせしてしまいすみませんでした。
どうぞよろしくお願いいたします。