https://www.biofin.org/wp-content/themes/undp/assets/js/immersive-hero.js?ver=1.4.24

1/**
2 * UNDP Immersive Hero — Frontend JavaScript
3 *
4 * Classic parallax: the background media is oversized (130% height) and
5 * absolutely positioned inside a normal, overflow-hidden 100vh hero. Each
6 * scroll frame, this translates the media by a fraction of how far the
7 * hero has scrolled, so it visibly lags behind the page — the standard
8 * "background moves slower than foreground" effect. The translate is
9 * clamped to the media's oversize buffer so it never reveals empty space
10 * at the top/bottom edges.
11 */
12
13( function () {
14    'use strict';
15
16    const PARALLAX_STRENGTH = 0.3; // 0 = no movement, 1 = moves with scroll 1:1
17    const MAX_OFFSET_RATIO  = 0.15; // matches the 15% oversize buffer in CSS
18
19    function initHero( hero ) {
20        const media = hero.querySelector( '.undp-immersive-hero__media' );
21        if ( ! media ) return;
22
23        function update() {
24            const rect      = hero.getBoundingClientRect();
25            const heroHeight = hero.offsetHeight || window.innerHeight;
26            const maxOffset  = heroHeight * MAX_OFFSET_RATIO;
27
28            const raw = -rect.top * PARALLAX_STRENGTH;
29            const translateY = Math.max( -maxOffset, Math.min( maxOffset, raw ) );
30
31            media.style.transform = `translateY(${ translateY }px)`;
32        }
33
34        let ticking = false;
35        function onScroll() {
36            if ( ! ticking ) {
37                requestAnimationFrame( () => {
38                    update();
39                    ticking = false;
40                } );
41                ticking = true;
42            }
43        }
44
45        window.addEventListener( 'scroll', onScroll, { passive: true } );
46        window.addEventListener( 'resize', update );
47
48        // Run once on load in case the hero is already partly scrolled.
49        update();
50    }
51
52    function init() {
53        const heroes = document.querySelectorAll( '.undp-immersive-hero' );
54        heroes.forEach( initHero );
55    }
56
57    if ( document.readyState === 'loading' ) {
58        document.addEventListener( 'DOMContentLoaded', init );
59    } else {
60        init();
61    }
62
63} )();