User:Editingthingsforlife/vector-2022.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.

// Eerie JavaScript effects for Descent Wiki

// Wait for the DOM to load
$(document).ready(function() {
    // 1. Subtle Background Flicker
    const backgroundContainer = $('#mw-content-text');
    if (backgroundContainer.length) {
        setInterval(function() {
            backgroundContainer.css('opacity', Math.random() * 0.1 + 0.9); // Random opacity between 0.9 and 1
        }, 3000 + Math.random() * 2000); // Flicker every 3-5 seconds
    }

    // 2. Hover Distortion on Sidebar Links
    const sidebarLinks = $('.vector-menu-portal .vector-menu-content li a');
    sidebarLinks.each(function() {
        $(this).on('mouseover', function() {
            $(this).css({
                'transform': 'translateX(' + (Math.random() * 4 - 2) + 'px)', // Slight horizontal glitch
                'filter': 'brightness(0.8)' // Dim on hover
            });
        }).on('mouseout', function() {
            $(this).css({
                'transform': 'translateX(0)',
                'filter': 'brightness(1)'
            });
        });
    });

    // 3. Delayed Text Fade-In for Main Content
    const mainContent = $('.mw-parser-output');
    mainContent.css('opacity', 0); // Start hidden
    setTimeout(function() {
        mainContent.animate({ opacity: 1 }, 2000); // Fade in over 2 seconds
    }, 1000); // Delay by 1 second
});