MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */

// Add favicon
var link = document.createElement('link');
link.rel = 'icon';
link.type = 'image/x-icon';
link.href = '/images/favicon.png';
document.getElementsByTagName('head')[0].appendChild(link);

// PARALLAX SCROLL WITH JS (GREENSKINS)
document.addEventListener('DOMContentLoaded', function () {
    // Only run on desktop
    if (window.innerWidth <= 768) return;

    const container = document.querySelector('.parallax-bg-container');
    if (!container) return;

    const back  = container.querySelector('.layer-back');
    const mid   = container.querySelector('.layer-mid');
    const front = container.querySelector('.layer-front');

    // Initial styles
    container.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-1; perspective:1000px; overflow:hidden; pointer-events:none;';
    [back, mid, front].forEach(layer => {
        layer.style.cssText = 'position:fixed; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; width:100%; height:100%;';
    });

    // Set images + depth
    back.style.backgroundImage  = 'url("/images/2/21/GreenskinsBG.png")';
    back.style.transform        = 'translateZ(-400px) scale(1.5)';
    back.style.zIndex           = '1';

    mid.style.backgroundImage   = 'url("/images/4/49/Greenskins1.png")';
    mid.style.transform         = 'translateZ(-200px) scale(1.3)';
    mid.style.zIndex            = '2';

    front.style.backgroundImage = 'url("/images/2/26/Greenskins2.png")';
    front.style.transform       = 'translateZ(0) scale(1)';
    front.style.zIndex          = '3';

    // Scroll handler
    let ticking = false;
    function updateParallax() {
        const scroll = window.scrollY;

        back.style.transform  = `translateZ(-400px) scale(1.5) translateY(${scroll * 0.3}px)`;
        mid.style.transform   = `translateZ(-200px) scale(1.3) translateY(${scroll * 0.5}px)`;
        front.style.transform = `translateZ(0) scale(1) translateY(${scroll * 0.7}px)`;

        ticking = false;
    }

    window.addEventListener('scroll', () => {
        if (!ticking) {
            requestAnimationFrame(updateParallax);
            ticking = true;
        }
    });

    // Initial call
    updateParallax();
});