@quinti
Beispiel mit HTML Widget
8a8e32f0-dce3-4b56-b8a9-512ee39fa30f-image.png
src muss man anpassen und skript hinzufügen
<div id="fadebox" class="fade-container">
<img src="https://192.168.178.170/download/bilder/ffn.png" class="fade-img img1 active">
<img src="https://192.168.178.170/download/bilder/NDR2.png" class="fade-img img2">
</div>
<style>
#fadebox {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#fadebox img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 2s ease-in-out; /* Dauer = 1 Sekunde */
}
#fadebox img.active {
opacity: 1;
}
</style>
a01d02d1-c3ec-4e5f-a980-16fccfc058c7-image.png
let state = 0;
setInterval(() => {
state = 1 - state; // toggle 0/1
document.querySelector(".img1").classList.toggle("active", state === 0);
document.querySelector(".img2").classList.toggle("active", state === 1);
}, 4000); // alle 10 Sekunden
vis-html-img-faden.gif
