Alchemie・Refugium
neue Wege 3
height: 100px;
display: flex;
align-items: center;
overflow: hidden;
font-family: inherit;
background: transparent;
}
/* Nativer SVG-Wind-Container */
.wind-animation-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 120px;
height: 60px;
opacity: 0;
transition: left 0.8s ease-in-out, opacity 0.4s ease;
pointer-events: none;
z-index: 2;
}
/* Die einzelnen Windlinien im SVG animieren */
.wind-line {
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
/* Klasse wird via JS getriggert, wenn der Wind bläst */
.wind-animation-container.blowing .wind-line {
animation: windSweep 2s ease-in-out forwards;
}
@keyframes windSweep {
0% {
stroke-dashoffset: 100;
opacity: 0;
}
30% {
opacity: 0.8;
}
70% {
opacity: 0.8;
}
100% {
stroke-dashoffset: -100;
opacity: 0;
}
}
/* Der interaktive Text */
.gluecks-text-link {
position: absolute;
left: 5%;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
font-weight: 600;
color: #4D6EA1; /* Dein Accent Blue */
text-decoration: none;
letter-spacing: 0.05em;
cursor: pointer;
white-space: nowrap;
/* Perfekter Reveal-Effekt von links nach rechts */
clip-path: inset(0 100% 0 0);
transition: clip-path 2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
opacity: 0;
z-index: 1;
}
.gluecks-text-link.visible {
opacity: 1;
clip-path: inset(0 0% 0 0);
}
Place your daily harbor observations here.
const windContainer = document.getElementById('windContainer');
const gluecksText = document.getElementById('gluecksText');
// Die 3 Stationen von links nach rechts unter dem Header
const positions = ['5%', '25%', '45%'];
function runWindSequence() {
let currentStep = 0;
function playNextStep() {
if (currentStep {
currentStep++;
playNextStep();
}, 2200);
} else {
// Alle 3 Schritte vorbei: Wind unsichtbar machen
windContainer.style.opacity = '0';
windContainer.classList.remove('blowing');
// Text nach einer kurzen Verzögerung wieder elegant verschwinden lassen
setTimeout(() => {
gluecksText.classList.remove('visible');
}, 2500);
}
}
playNextStep();
}
// ZYKLUS-MANAGEMENT:
// Ändere die 30000 (30 Sek) auf 1000 (1 Sek), wenn du es sofort beim Laden testen willst!
setTimeout(() => {
runWindSequence();
// Danach alle 60 Sekunden wiederholen
setInterval(runWindSequence, 60000);
}, 30000);
// Modal Steuerung
function openHeutePopup() { document.getElementById('heuteModal').style.display = 'flex'; }
function closeHeutePopup() { document.getElementById('heuteModal').style.display = 'none'; }
window.addEventListener('click', function(event) {
var modal = document.getElementById('heuteModal');
if (event.target == modal) { closeHeutePopup(); }
});
neue Wege 3