解构这个视差的js公式

Question

我喜欢这个网站使用的 JS Parallax 技术 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是window的身高。

c = Math.ceil(b);

b 是浮点数，所以现在 c 是整数。

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

这给出了滚动百分比。

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

解构这个视差的js公式

Deconstructing the js formula for this parallax

javascript

frontend

parallax