MediaWiki:Common.js

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

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

$(() => {
    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', '/archium/dags-hero.png').css('object-fit', 'cover');
   // const $img = $('<img></img>').attr('src', '/archium/dags-hero3.png').css('object-fit', 'cover').css("filter", "drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 10px)");
   // const $img = $('<img></img>').attr('src', '/archium/dags-hero4.png').css('object-fit', 'contain');
   // const $img = $('<img></img>').attr('src', '/archium/dags-hero5.png').css('object-fit', 'cover');
   // const $img = $('<img></img>').attr('src', '/archium/dags-hero6.png').css('object-fit', 'contain');
    const $img = $('<img></img>').attr('src', '/archium/heroimg.png').css('object-fit', 'contain');
    $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 = 900; // 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');
});
*/

Suche

MediaWiki:Common.js