Liquid、JavaScriptなどに関する質問
Dawnのカスタムリキッドセクションでテキストにフェードを付けようと試みましたが、
スクロールでclassを付与するJQueryを効かすことが出来ず困っております。
CSSのみでフェードさせることは出来ましたが、読み込んだ時点でスタートし、
セクションに到達した時点で動きが終わっているので、意味が無い状況です。
セクションに到達したタイミングでclassを付与する方法は無いでしょうか?
お力添え頂けると助かります。
どうぞよろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
以下のIntersection Observer APIなどで概ね対応できると思います。
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API
成功
以下のIntersection Observer APIなどで概ね対応できると思います。
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API
ご回答ありがとうございます。
申し訳ございません、私の説明が不十分でしたので、状況を具体的に記述させて頂きます、
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外のページでテストしたところ、問題なく動きました。
初心者なので、根本的に間違っているのかもしれませんが
何卒お力添え頂けますと幸いです。
どうぞよろしくお願いいたします。
度々すみません、先程説明させて頂いた件ですが、
jsの読み込み設定などを再度やり直したところ、正常に動き解決いたしました。
お騒がせしてしまいすみませんでした。
どうぞよろしくお願いいたします。
Shopifyペイメント決済サービスを利用していて、ストアの管理画面の通知セクションに突然「Shopifyペイメントの使用を継続するために必要な情報」というバナーメッセージが表示さ...
By Mirai Dec 3, 2023すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023