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是窗口的高度。

c = Math.ceil(b);

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

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

这会滚动百分比。

我将无法为您解码所有内容。你应该掌握数学和编程知识。

解构这个视差的js公式

1 个答案: