javascript - 解构这个视差的js公式

Question

我喜欢这个网站中使用的 JS 视差技术 https://www.beamland.com/

基于滚动设置的div，更改css VH，显示下面的内容。

我正在尝试重现类似的内容，但我无法获得计算可见屏幕高度与滚动高度以及文档整个高度的公式。

所以我在该网站的底层进行了挖掘，但我不明白正在进行什么样的计算才能达到效果。

BEAM.initParallax = function() {
    function a() {
        var a = q - 1,
            b = a / j,
            c = Math.ceil(b),
            d = 100 - a % j / j * 100 + "vh",
            e = 100 * b + 4e3 / j + "vh";
        r = !1, "Mobile Safari" !== h.browser.name && "Android" !== h.os.name || (e = a + 30 + "px"), c < 1 && (c = 1), a % j === 0 && a > 0 && c++;
        for (var f = 0; f < m.length; f++) f + 1 > c ? m[f].style.height = "100vh" : f - 1 < c && (m[f].style.height = "0vh");
        m[c - 1] && (m[c - 1].style.height = d), o.removeClass("is-active"), $(o[c - 1]).addClass("is-active"), b < s ? (l.removeAttr("style").addClass("stuck"), n.removeClass("faded")) : l[0].hasAttribute("style") || (n.addClass("faded"), l.removeClass("stuck").css("top", e))
    }

    function b() {
        if (s = 3.887, k <= 1024) {
            s = 3.915;
            var a = Math.abs(j - document.getElementsByClassName("Parallax-spacer")[0].style.height);
            $(".Parallax-spacer").css("height", j + "px"), a > 20 && Math.ceil((q - 1) / j) >= 4 && (p < q && (a *= -1), window.scrollTo(0, q - 4 * a))
        }
    }

    function c() {
        return "Android" === h.os.name ? i.outerHeight() : i.innerHeight()
    }

    function d() {
        return "Android" === h.os.name ? i.outerWidth() : i.outerWidth()
    }

    function e() {
        p = q, q = window.scrollY, f()
    }

    function f() {
        r || window.requestAnimationFrame(a), r = !0
    }
    if ($(".Parallax-Hero").length) {
        var g = new UAParser,
            h = g.getResult(),
            i = $(window),
            j = c(h),
            k = d(h),
            l = $("div.Nav-Main"),
            m = $(".Parallax-panel"),
            n = $(".Parallax-wayfinder"),
            o = n.find(".Parallax-pagination--dot"),
            p = 0,
            q = 0,
            r = !1,
            s = 0;
        b(), $(".Parallax-pagination--dot").on("mouseup touchend", function(a) {
            a.preventDefault();
            var b = $(".Parallax-pagination--dot").index(this),
                c = b * j + 1;
            $("html, body").animate({
                scrollTop: c + "px"
            }, 500)
        }), i.on("scroll", function() {
            e()
        }), i.on("resize", function() {
            j = c(h), k = d(h), b(), e()
        }), window.requestAnimationFrame(a)
    }

我什至在codepen上查看了各种其他视差和代码效果，但我没有找到与此效果类似的东西来理解计算。有人可以帮我揭开其中的逻辑吗？谢谢

Answer 1

这是一个缩小的代码。出于开发目的，您最好重命名变量，以便于阅读。

m = $(".Parallax-panel"),
becomes:
parallaxPanel = $(".Parallax-panel"),
then
m.length
is
parallaxPanel.length

q = window.scrollY
becomes
windowScrollY = window.scrollY
then 
a = windowScrollY - 1;

j = c(h),
becomes
windowHeight = c(h),

试试这个广告，看看您是否能更好地理解。

更新:

我建议这种命名约定的原因是为了让您更好地理解这些计算。

b = a / j;

这还不清楚，但是:

b = (windowScrollY - 1) / windowHeight;

更明显。 window.ScrollY 是文档当前从原点垂直滚动的像素数。 window.outerHeight 是窗口的高度。

c = Math.ceil(b);

b 是 float ，所以现在 c 是整数。

d = 100 - a % j / j * 100 + "vh";
d = 100 - (windowScrollY - 1) % windowHeight / windowHeight * 100 + "vh";

这给出了滚动的百分比。

我无法为您全部解码。您应该具备数学和编程知识才能做到这一点。