スクロールと同時にカードが重なっていくアニメーションを作りたいです。

Question

実現したいこと

画面をスクロールするとカードが1枚ずつ現れ、カードが重なっていくようなアニメーションを作りたいです。
最終的な完成系は画像をご覧ください。参考サイトのURLも記載いたします。

URL：https://scroll-driven-animations.style/demos/stacking-cards/css/

発生している問題・分からないこと

参考先サイトのコードを使用してもいいと考えたのですが、ブラウザによっては動かない可能性が出てきたので一旦、自作で作成してみました。CSSのposition:stickyで再現してみました。

カード１とカード２に関して、画面内に入ってきたらopacityとscaleの値がスクロール量に応じて変わるようにしています。

カード４はカード３をstickyさせるために用意したダミーのカードです。

それぞれのカードのstickyする位置をずらしてカードが重なっているように見せています。
ですが、参考先のサイトのようにすべてのカードが出たらカードがstickyした状態で画面が下にスクロールしてほしいのにカード３だけがstickyせずにスクロールするような形になってしまっているのでそこを改善したいです。

該当のソースコード

/*==============================================================
HTML
==============================================================*/
<ul id="cards" class="p-home-about__list">
  <li class="p-home-about__card card1"></li>
  <li class="p-home-about__card card2"> </li>
  <li class="p-home-about__card card3"></li>
  <li class="p-home-about__card card4"></li>
</ul>


/*==============================================================
スタッキングカードアニメーションのCSSカスタマイズ
==============================================================*/
.p-home-about__card {
    cursor: pointer;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 40px 0px rgba(11, 39, 94, 0.1);
    width: 305px;
    height: 600px;
    padding: rem(24);
    margin: 0 auto;
    transform: scale(1);
    opacity: 1;
    transition:
        transform 0.1s linear,
        opacity 0.1s linear; /* 滑らかに変化 */
    will-change: transform, opacity; /* ハードウェアアクセラレーション */
    position: sticky;
    top: calc(50% - 300px);

    @include responsive(lg2) {
        width: 845px;
        height: 712px;
        padding: rem(40) rem(44);
        margin: 0 auto;
        top: calc(50% - 356px); /* 712pxのカード高さの半分を引く */
    }

    &.card1 {
        top: calc(50% - 300px);

        @include responsive(lg2) {
            top: calc(50% - 356px); /* 712pxのカード高さの半分を引く */
        }
    }
    &.card2 {
        top: calc(50% - 244px);

        @include responsive(lg2) {
            top: calc(50% - 287px); /* 712pxのカード高さの半分を引く */
        }
    }
    &.card3 {
        top: calc(50% - 188px);

        @include responsive(lg2) {
            top: calc(50% - 218px); /* 712pxのカード高さの半分を引く */
        }
    }

    &.card4 {
        box-shadow: none;
        opacity: 0 !important;
    }
}


/*==============================================================
JavaScript
==============================================================*/
$(document).ready(function () {
  const $cards = $(".p-home-about__card"); // カード要素
  const cardOffset = 0.8; // カードが画面内80%に入るタイミングで発火

  // スクロール時の処理
  $(window).on("scroll", function () {
    const windowHeight = $(window).height(); // 画面の高さ
    const scrollTop = $(window).scrollTop(); // 現在のスクロール位置

    $cards.each(function (index) {
      const $card = $(this);
      const cardTop = $card.offset().top; // カードの上端位置

      // card3は何も変更しない
      if ($card.hasClass("card3")) {
        $card.css({
          transform: "scale(1)",
          opacity: 1,
        });
        return; // 処理をスキップ
      }

      // カードの中央がビューポート内に入ったかチェック
      const startPoint = cardTop - windowHeight * cardOffset;
      const endPoint =
        cardTop + $card.outerHeight() - windowHeight * cardOffset;

      if (scrollTop >= startPoint && scrollTop <= endPoint) {
        // 進捗率の計算（0 ～ 1 の間でスムーズに変化）
        const progress = (scrollTop - startPoint) / (endPoint - startPoint);
        const scaleValue = 1 - progress * (index === 0 ? 0.2 : 0.1); // scaleの変化
        const opacityValue = 1 - progress * (index === 0 ? 0.3 : 0.2); // opacityの変化

        // スタイルを適用（スムーズに変化）
        $card.css({
          transform: `scale(${scaleValue})`,
          opacity: opacityValue,
        });
      } else if (scrollTop < startPoint) {
        // 初期値にリセット（画面外の時）
        $card.css({
          transform: "scale(1)",
          opacity: 1,
        });
      }
    });
  });
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ネットでカードスタッキングのアニメーションの方法を調べてみましたが、どれもうまくいかず自作した結果がこれです。

補足

特になし

Comments

[Lhankor_Mhy]

rem ミックスインの定義をご提示ください。

[Lhankor_Mhy]

また、質問から外れるかもしれませんが、スクロールタイムラインのポリフィルはあるみたいです。
https://coliss.com/articles/build-websites/operation/javascript/scroll-timeline-polyfill.html

[F_Yohei]

ご質問いただきありがとうございます！
remはそのままの数値でpxに直していただければ大丈夫です。

padding: rem(24);→padding: 24px;
padding: rem(40) rem(44);→padding: 40px 44px;

[F_Yohei]

ポリフィルの件ありがとうございます！
あったんですね...見落としていました。。。

[Lhankor_Mhy]

『カード３だけがstickyせずに』という現象が、今ひとつはっきりしない感じです。scale の影響で、#cards の終わりに来ると card3 が card2 を追い越しますが、その現象のことでしょうか？

ご参考にされているページは、scale を当てるカードの外側にラッパー要素があり、そちらが position:sticky になっているため、『追い越し』は起きませんが、その辺りを見直してみてはどうでしょうか。

[F_Yohei]

おっしゃる通りでその現象のことであっています。

[F_Yohei]

参考サイトは最後のカードが重なって下にスクロールするときに最後のカードが前のカードを追い越さずにスクロールしています。
このような動きを表現したいです。

[Lhankor_Mhy]

前述の通り、scale を当てる要素の外側に sticky を当てるのがいいかと。

[F_Yohei]

ulタグにstickyを当ててみましたが状況変わらずでした。

[Lhankor_Mhy]

そういうことではないですね。回答します。

[F_Yohei]

おぉー！！なるほど！
いま出先なので帰ったら試してみます！

Answer 1

このように、リストアイテムをstickyとして、その内側にカードを置くのはどうでしょうか。

    <ul id="cards" class="p-home-about__list">
        <li class="p-home-about__card card1">
            <div></div>
        </li>
        <li class="p-home-about__card card2">
            <div></div>
        </li>
        <li class="p-home-about__card card3">
            <div></div>
        </li>
        <li class="p-home-about__card card4">
            <div></div>
        </li>
    </ul>

        .p-home-about__card {
            transform: scale(1);
            opacity: 1;
            transition: transform 0.1s linear, opacity 0.1s linear;
            /* 滑らかに変化 */
            will-change: transform, opacity;
            /* ハードウェアアクセラレーション */
            position: sticky;
            top: calc(50% - 300px);

            div {
                cursor: pointer;
                background: #fff;
                border-radius: 20px;
                box-shadow: 0px 0px 40px 0px rgba(11, 39, 94, 0.1);
                width: 305px;
                height: 600px;
                padding: 24px;
                margin: 0 auto;

            }
        }

Comments

[F_Yohei]

試してみたのですが、挙動は変わりませんでした🙇‍♂️

[Lhankor_Mhy]

そうなんですね。ちょっと、問題の認識がすれ違ってそうな気がしてきました。
サンプルを置いておきますので、ご確認いただいた方がよさそうですね。

修正前
https://codepen.io/lhankor_mhy/pen/MYgbOyz

修正後
https://codepen.io/lhankor_mhy/pen/QwLGObm

修正前はcard3が追い抜いていますが、修正後はcard3が追いついたところで止まっていると思うのですが、そういう話ではないのですか？