Forum - Fliege im Forum

<div id="meinBild" style="position:absolute;">
    <img src="https://files.homepagemodules.de/b135428/f180t3130p47069n24_ogNeExys.gif">
</div>
 
<script>
(function() {
    var bild = document.getElementById("meinBild");
 
    function neuePosition() {
        var x = Math.floor(Math.random() * (window.innerWidth - 150));
        var y = Math.floor(Math.random() * (window.innerHeight - 150));
 
        bild.style.left = x + "px";
        bild.style.top = y + "px";
    }
 
    function zyklus() {
        neuePosition();                 // neue Position
        bild.style.display = "block";   // Bild anzeigen
 
        setTimeout(function() {
            bild.style.display = "none"; // nach 9 Sekunden ausblenden
 
            setTimeout(zyklus, 5000);    // nach 5 Sekunden wieder erscheinen
        }, 9000);
    }
 
    zyklus();
})();
</script>
 
 

<!-- 
WICHTIGER DSGVO-TIPP: 
Lade das Fliegen-GIF am besten herunter und lade es im eigenen Xobor-Adminbereich unter "Layout -> Bilder hochladen" hoch. 
Ersetze dann unten den src-Link durch deinen eigenen Foren-Link, um Abmahnungen wegen fremder Daten-Nachladung zu vermeiden!
-->
 
<div id="meinBild" style="position: fixed; z-index: 9999; opacity: 0; pointer-events: auto; transition: opacity 0.5s ease-in-out;">
    <img src="https://files.homepagemodules.de/b135428/f180t3130p47069n24_ogNeExys.gif" alt="Animation" style="width: 45px; height: auto; cursor: pointer;">
</div>
 
<style>
/* Schont mobile User: Blendet die Fliege auf Smartphones und Tablets komplett aus */
@media (max-width: 1024px) {
    #meinBild { display: none !important; }
}
</style>
 
<script>
(function() {
    // 1. SCHUTZ: Suchmaschinen-Bots & Mobilgeräte sofort ignorieren
    if (/bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent)) return;
    if (window.innerWidth <= 1024) return;
 
    var bild = document.getElementById("meinBild");
    if (!bild) return;
 
    var timerAktiv = null;
    var timerInaktiv = null;
    var istPausiert = false;
 
    // Funktion für die Zufallsposition
    function neuePosition() {
        // -80 sorgt dafür, dass die Fliege nicht halb aus dem Bildschirmrand verschwindet
        var x = Math.floor(Math.random() * (window.innerWidth - 80));
        var y = Math.floor(Math.random() * (window.innerHeight - 80));
 
        bild.style.left = x + "px";
        bild.style.top = y + "px";
    }
 
    // Der Haupt-Flugzyklus
    function zyklus() {
        // Altslasten aufräumen, um Doppelschleifen bei schnellen Seitenwechseln im Forum zu verhindern
        clearTimeout(timerAktiv);
        clearTimeout(timerInaktiv);
 
        // 2. SCHUTZ: Pausieren, wenn der Foren-Tab inaktiv ist (schont die PC-Leistung der User)
        if (document.hidden || istPausiert) {
            timerInaktiv = setTimeout(zyklus, 3000);
            return;
        }
 
        neuePosition();                 
        bild.style.opacity = "1"; // Sanftes Einblenden statt hartem Aufploppen
 
        timerAktiv = setTimeout(function() {
            if (!istPausiert) {
                bild.style.opacity = "0"; // Sanftes Ausblenden
                timerInaktiv = setTimeout(zyklus, 5000); // 5 Sekunden Pause, bis sie neu erscheint
            }
        }, 9000); // 9 Sekunden lang sichtbar
    }
 
    // INTERAKTION: Wenn der User mit der Maus über die Fliege fährt, bleibt sie "erschrocken" stehen.
    // So blockiert sie niemanden beim Lesen eines Beitrags.
    bild.addEventListener("mouseenter", function() {
        istPausiert = true;
        clearTimeout(timerAktiv);
    });
 
    // Wenn die Maus weggeht, fliegt sie nach kurzer Verzögerung weiter
    bild.addEventListener("mouseleave", function() {
        istPausiert = false;
        timerAktiv = setTimeout(function() {
            bild.style.opacity = "0";
            timerInaktiv = setTimeout(zyklus, 2000);
        }, 2000);
    });
 
    // Tab-Wechsel Überwachung live steuern (CPU-Schutz aktivieren/deaktivieren)
    document.addEventListener("visibilitychange", function() {
        if (document.hidden) {
            clearTimeout(timerAktiv);
            clearTimeout(timerInaktiv);
            bild.style.opacity = "0";
        } else {
            zyklus();
        }
    });
 
    // Skript erst starten, wenn das Forum vollständig geladen ist
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", zyklus);
    } else {
        zyklus();
    }
})();
</script>