MediaWiki:Common.js

/* Das folgende JavaScript wird für alle Benutzer geladen. */

$(() => {
    $('img#watermark').remove();
    const $watermark = $('<img></img>')
    	.attr('src', '/archium/Logo.svg')
    	.attr('id', 'watermark')
    	.attr('style', `
        	position: fixed;
  			top: 120px;
            left: 50px;
            width: 250px;
            height: 250px;
            opacity: .7;
            filter: grayscale(1) contrast(2) drop-shadow(3px 3px 5px black);
            mix-blend-mode: multiply;
        `);
    
    $('body').prepend($watermark);
    
});


$(() => {
    const enabled = $('#enableHeroImage').length;
    const action = new URLSearchParams(window.location.search).get('action')
    
    if (!(enabled && (!action || action == 'view' ))) {
        return;
    } 
    
    const $container = $('#heroImg').html('');
    const $img = $('<img></img>')
        .attr('src', '/i/c/c1/HeroImageHauptseite.png');
    $container.append($img);

    $(window).on('scroll', function() {
        var scrollTop = $(this).scrollTop(); // how far the user has scrolled
        var fadeStart = 0; // start fading at scrollY=0
        var fadeEnd = 300; // fully invisible at scrollY=300

        var opacity = 1 - (scrollTop - fadeStart) / (fadeEnd - fadeStart);
        opacity = Math.max(0, Math.min(1, opacity));

        $('#heroImg img').css('opacity', opacity);
    });
});


$(() => {
    $(window).on('scroll resize', function() {
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();

        $('.fancyimage').each(function() {
            var $el = $(this);
            var elTop = $el.offset().top;
            var elHeight = $el.outerHeight();
            var elBottom = elTop + elHeight;

            // distance from top/bottom edges
            var distanceTop = elBottom - scrollTop; // pixels visible from top
            var distanceBottom = scrollTop + windowHeight - elTop; // pixels visible from bottom

            // opacity calculation based on 10% height from edge
            var threshold = 0.1 * elHeight; // 10% of element height
            var visiblePx = Math.min(distanceTop, distanceBottom, elHeight); // max visible inside viewport

            // linear mapping: fully visible → 1, less than threshold → 0
            var opacity = (visiblePx - threshold) / (elHeight - threshold);
            opacity = Math.max(0, Math.min(1, opacity));

            $el.css('opacity', opacity);
        });
    });

    $(window).trigger('scroll');
});