Question

如何将.animate()与window.scrollY || window.pageYOffset结合使用？

我想要类似Apple Music网站上的卡片滚动效果，但是它是使用node.js构建的，理解起来很复杂。我更喜欢普通的javascript。

Apple Music：https://www.apple.com/apple-music/

Codepen是我的代码（没用，但可以使用）。

https://codepen.io/Danny1897/full/MRrLVN

下面是Apple node.js代码的片段。


// NOTE: they number all script blocks (405) and run it like that
405: [function(t, e, i) {
    "use strict";

    // NOTE: call function
    l = function(t) {
        function e(t) {
            r(this, e);
            var i = n(this, (e.__proto__ || Object.getPrototypeOf(e)).call(this, t));

            // NOTE: gets elements
            return i.options = t, i.headline = t.el.querySelector(".headline"), i.cards = t.el.querySelectorAll("ul li"), i.cardsWrapper = t.el.querySelector(".cards-wrapper"), i.currentBreakpoint = t.pageMetrics.breakpoint, i.cardIndex = i.cards.length - 1, i.cards[i.cardIndex].classList.add("last-card"), i.cardHeight = {

                // NOTE: sets sizes of cards depend on device
                L: 530,
                M: 420,
                S: 456
            }, i.itemHeight = {
                L: 800,
                M: 600,
                S: 620
            }, i.topOffset = {
                L: 270,
                M: 170,
                S: 170

                // NOTE: IMPORTANT : get top position of window and cards (MATH)
                // ALSO : calls to add/update/change 'keyframes'
            }, i.topPosition = window.getComputedStyle(i.cards[0], null).getPropertyValue("top"), i.focusHandler = i.focusHandler.bind(i), document.addEventListener("focus", i.focusHandler, !0), i.addKeyframes(), i.addAirpodKeyframes(), i.positionCards(t.pageMetrics), i
        },


        //
        }, {
        key: "_getTopPosition",
        value: function(t) {
            var e = 0;
            do isNaN(t.offsetTop) || (e += t.offsetTop); while (t = t.offsetParent);
            return e
        },


        //
        }, {
        key: "addKeyframes",
        value: function() {
            var t = this;
            this.cards.forEach(function(e, i) {
                i < t.cardIndex && (t.anim.addKeyframe(e, {
                    start: "0rh - " + t.topPosition + " + " + (t.topOffset.L + t.itemHeight.L * i) + "px",
                    end: "0rh - " + t.topPosition + " + " + (t.topOffset.L + t.cardHeight.L + t.itemHeight.L * i) + "px",
                    scale: [1, .95],
                    y: ["0px", "-40px"],
                    ease: .9,
                    relativeTo: ".cards-wrapper",
                    breakpointMask: "XL",
                    disabledWhen: "card-flow"
                }), ...

This code is not mine. Text was cut to better understand.

我的期望：https://www.loom.com/share/be083a2e653e41a1b8197a57a54d3bd5

（使用Loom录制的屏幕）▲

类似地解决的问题：Flip animation based on scroll position

（堆栈溢出）▲

如何将`.animate（）`与`window.scrollY ||结合使用window.pageYOffset`？

0 个答案: