0

いくつかのスライドがあるセクションに到達するまで通常どおりスクロールするページが必要です。ここでのスクロール動作は、スライドが終了するまで fullpage.js のようなものに変更され、その後、通常のスクロール動作が復元されます。

ページの HTML 構造https://codepen.io/skb089/full/poPbdqe

3 つのアイテム: .a-item、.b-itemおよび.c-itemfullpage.js のような機能が必要なスライドであり.normal-scroll、ページを通常どおりスクロールする部分です。

これまでのところ、私は試しました：

マウス コントロールが有効になっている Swiper Js ですが、エッジでのリリース機能は非常にバグが多く、適切に動作しません。ここで強調表示されている問題ですが、提供された解決策がうまくいきません。

オブジェクトがビューポートに完全に入っていることを確認し、jqueryマウスホイールを使用してスクロールを無効にしてから、スクロール方向やその他の条件に基づいてループで各スライドを表示する交差点オブザーバーですが、スクロールが速すぎると交差点オブザーバーが右側で起動しません時間のどちらかであり、恐ろしく一貫性のない経験につながります。

var Options = {
  root: null,
  rootMargin: "0px",
  threshold: 0.99,
};    
observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        const ratio = entry.intersectionRatio;
        const section = entry.target;
        if (ratio >0.99) {
          disableScroll()
        }
        else {
             console.log("no")
         }
      });
    }, Options);
    
    var abc= document.querySelector(".abc");
    observer.observe(abc);

これを回避しようとしましたが、何も変わりませんでした

次に、Gsap の ScrollTrigger を使用してセクションをピン留めできますが、タイムラインが意図したとおりに機能しません。アニメーション化するには常にスクロールする必要があり、スクロールが速すぎるとセクションがスキップされます。方向によるラベルへのスナップもスムーズではなく、しばしば遅れます。

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: "#items",
    pin: "#items",
    start: "top top",
    end: "bottom 40%",
    scrub: 1,
    snap: {
      snapTo: "labelsDirectional",
    },
  },
});

tl.addLabel("a")
  .to(".nav-dot.a", { outline: "1px solid white" })
  .addLabel("b")
  .to(".a-item", { autoAlpha: 0 })
  .to(".nav-dot.a", { outline: "1px solid transparent" })
  .from(".b-item", { autoAlpha: 0 })
  .to(".nav-dot.b", { outline: "1px solid white" })
  .addLabel("c")
  .to(".nav-dot.b", { outline: "1px solid transparent" })
  .to(".b-item", { duration: 0.1, autoAlpha: 0 })
  .from(".c-item", { duration: 0.1, autoAlpha: 0 })
  .to(".nav-dot.c", { outline: "1px solid white" })
  .addLabel("end");

これに対するいくつかの解決策は高く評価されます。

4

0 に答える 0