CODEWITHSUNDEEP
javascriptfrontendparallax
Littlemad
Littlemad

Reputation: 711

Deconstructing the js formula for this parallax

I love this JS Parallax technique used in this website https://www.beamland.com/

Based on scrolling a set div, change in css VH, showing what is under.

I am trying to reproduce something similar, but I am failing to get the formula of calculating the height of the visible screen vs the scroll, vs the whole height of the document.

So I digged under the hood of that website, but I am not understanding what kind of calculation is being done to achieve the effect.

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)
    }

I even looked at various other parallax and code effect on codepen, but I don't find something similar to this effect, to understand the calculation. Can someone help me to unveil the logic? Thank you

Upvotes: 0

Views: 474

Answers (1)

Stoycho Trenchev
Stoycho Trenchev

Reputation: 555

This is a minified code. For development purposes, you better rename the variables so you could read easily. 

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),

Try this ad see if you could understend better.

Update:

The reason I suggested this naming convention is for you to understand these calculations better.

b = a / j;

This is not clear, but:

b = (windowScrollY - 1) / windowHeight;

is more obvious. window.ScrollY is the number of pixels the document is currently scrolled vertically from the origin. window.outerHeight is window's height.

c = Math.ceil(b);

b is float so now c is an integer.

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

This gives percentage scrolled.

I won't be able to decode it all for you. You should have math and programming knowledge to do it.

Upvotes: 1

Related Questions