Adminator
1e51ef7def
- Konzept/, didaktik_geografie/, didaktik_simulation/, v2-modules/, v2-platform/ - 12 code-workspace-Files - STATUS-*.md - viele M/D/R-Änderungen an bereits getrackten Files - .gitignore verstärkt: **/.humaninput/, **/secret_keys.txt Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
133 lines
7.2 KiB
PHP
133 lines
7.2 KiB
PHP
<?php
|
||
/**
|
||
* Public Hero Background (atmosphärischer Hintergrund)
|
||
* ----------------------------------------------------
|
||
* Wiederverwendung der Landingpage-Hero-Animation (Meer, Schiffe, Vögel,
|
||
* Fachbegriffe-Drift) als dekorativer Hintergrund für Overlay-Seiten
|
||
* — z.B. Login als Modal über der Landingpage (siehe N.6.3 / L.38).
|
||
*
|
||
* Erwartet im eltern-Scope:
|
||
* $bp BASE_PATH (Default-Fallback)
|
||
*
|
||
* Output: ein <div class="hero-bg"> mit Atmosphäre — KEIN Content (kein H1, kein CTA).
|
||
* Wer das Snippet einbindet, legt sein Overlay (Modal, Card etc.) darüber.
|
||
*/
|
||
if (!isset($bp)) $bp = defined('BASE_PATH') ? BASE_PATH : '';
|
||
?>
|
||
<div class="hero-bg" aria-hidden="true">
|
||
<div class="hero-bg-words">
|
||
<span class="hero-bg-word hbw-1">Klimawandel</span>
|
||
<span class="hero-bg-word hbw-2">Topografie</span>
|
||
<span class="hero-bg-word hbw-3">Mitentscheidung</span>
|
||
<span class="hero-bg-word hbw-4">Klimazonen</span>
|
||
<span class="hero-bg-word hbw-5">Hochwasserschutz</span>
|
||
<span class="hero-bg-word hbw-6">Pumpspeicher</span>
|
||
</div>
|
||
|
||
<div class="hero-bg-bird hero-bg-bird-1">
|
||
<svg viewBox="0 0 24 16" width="32" height="22"><path d="M0,8 Q6,2 12,8 Q18,2 24,8 Q18,6 12,6 Q6,6 0,8 Z" fill="#1f4e5a"/></svg>
|
||
</div>
|
||
<div class="hero-bg-bird hero-bg-bird-2">
|
||
<svg viewBox="0 0 24 16" width="26" height="18"><path d="M0,8 Q6,2 12,8 Q18,2 24,8 Q18,6 12,6 Q6,6 0,8 Z" fill="#4a7c8a"/></svg>
|
||
</div>
|
||
<div class="hero-bg-bird hero-bg-bird-3">
|
||
<svg viewBox="0 0 24 16" width="22" height="16"><path d="M0,8 Q6,2 12,8 Q18,2 24,8 Q18,6 12,6 Q6,6 0,8 Z" fill="#1f4e5a"/></svg>
|
||
</div>
|
||
<div class="hero-bg-sea"></div>
|
||
|
||
<div class="hero-bg-boat hbboat-container"><div class="hero-bg-boat-inner">
|
||
<img src="<?= $bp ?>/assets/img/containerschiff.svg" alt="" width="320" height="60">
|
||
</div></div>
|
||
<div class="hero-bg-boat hbboat-sail"><div class="hero-bg-boat-inner">
|
||
<img src="<?= $bp ?>/assets/img/segelyacht.svg" alt="" width="170" height="125">
|
||
</div></div>
|
||
<div class="hero-bg-boat hbboat-sail-2"><div class="hero-bg-boat-inner">
|
||
<img src="<?= $bp ?>/assets/img/segelyacht-race.svg" alt="" width="170" height="125">
|
||
</div></div>
|
||
</div>
|
||
|
||
<?php if (empty($GLOBALS['__hero_bg_css'])): $GLOBALS['__hero_bg_css'] = true; ?>
|
||
<style>
|
||
/* Hero-Background — atmosphärischer Layer, soll seinen Container füllen.
|
||
Klassen mit "hero-bg-" / "hbboat-" / "hbw-" Prefix, damit kein Konflikt
|
||
mit der Landingpage-Hero entsteht (falls je auf derselben Seite). */
|
||
.hero-bg {
|
||
position: absolute; inset: 0; pointer-events: none;
|
||
overflow: hidden; z-index: 0;
|
||
background: linear-gradient(180deg, #f5f1e6 0%, #f7f6f3 60%, #eef5f7 100%);
|
||
}
|
||
.hero-bg-sea {
|
||
position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
|
||
background: linear-gradient(180deg, transparent, rgba(74,124,138,0.08) 30%, rgba(74,124,138,0.18) 100%);
|
||
}
|
||
|
||
/* Boote — outer Wrapper macht horizontale Drift, inner Element macht Wippen */
|
||
.hero-bg-boat { position: absolute; will-change: transform; opacity: .9; left: -300px; }
|
||
.hero-bg-boat-inner { display: inline-block; will-change: transform; }
|
||
|
||
/* Segelyacht 1 — fern, segelt nach rechts */
|
||
.hbboat-sail { bottom: 30%; animation: hbgDriftRight 75s linear infinite;
|
||
opacity: .7; filter: saturate(.85); transform-origin: left center; }
|
||
.hbboat-sail .hero-bg-boat-inner { animation: hbgBobSail 5.5s ease-in-out infinite; transform-origin: left center; }
|
||
|
||
/* Race-Yacht 26 — vorne, segelt nach links */
|
||
.hbboat-sail-2 { bottom: 18%; left: auto; right: -300px; opacity: .95;
|
||
animation: hbgDriftLeft 55s linear infinite; animation-delay: -22s;
|
||
transform-origin: right center; }
|
||
.hbboat-sail-2 .hero-bg-boat-inner { animation: hbgBobSail2 4.2s ease-in-out infinite; transform-origin: right center; }
|
||
|
||
/* Containerschiff — Horizont, sehr langsam */
|
||
.hbboat-container { bottom: 37%; left: auto; right: -400px; opacity: .35;
|
||
filter: saturate(.4);
|
||
animation: hbgPassContainer 360s linear infinite;
|
||
transform-origin: right center; }
|
||
.hbboat-container .hero-bg-boat-inner { animation: hbgBobContainer 9s ease-in-out infinite; transform-origin: right center; }
|
||
|
||
@keyframes hbgDriftRight { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100vw + 500px)); } }
|
||
@keyframes hbgDriftLeft { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100vw - 500px)); } }
|
||
@keyframes hbgPassContainer {
|
||
0% { transform: translateX(0); }
|
||
33% { transform: translateX(calc(-100vw - 700px)); }
|
||
100% { transform: translateX(calc(-100vw - 700px)); }
|
||
}
|
||
@keyframes hbgBobSail { 0%,100% { transform: scale(.32) translateY(0); } 50% { transform: scale(.32) translateY(-10px); } }
|
||
@keyframes hbgBobSail2 { 0%,100% { transform: scale(.5) translateY(0); } 50% { transform: scale(.5) translateY(-8px); } }
|
||
@keyframes hbgBobContainer { 0%,100% { transform: scale(.28) translateY(0); } 50% { transform: scale(.28) translateY(-2px); } }
|
||
|
||
/* Vögel */
|
||
.hero-bg-bird { position: absolute; top: 0; left: 0; width: 32px; will-change: transform; opacity: .55; }
|
||
.hero-bg-bird-1 { animation: hbgBirdFly1 18s linear infinite; animation-fill-mode: backwards; }
|
||
.hero-bg-bird-2 { animation: hbgBirdFly2 22s linear infinite; animation-delay: 6s; animation-fill-mode: backwards; transform-origin: 50% 50%; }
|
||
.hero-bg-bird-3 { animation: hbgBirdFly3 25s linear infinite; animation-delay: 12s; animation-fill-mode: backwards; }
|
||
@keyframes hbgBirdFly1 { 0% { transform: translate(-60px, 40px) rotate(8deg); } 100% { transform: translate(calc(100vw + 60px), 30px) rotate(-3deg); } }
|
||
@keyframes hbgBirdFly2 { 0% { transform: translate(calc(100vw + 60px), 80px) rotate(-5deg) scaleX(-1); } 100% { transform: translate(-60px, 70px) rotate(2deg) scaleX(-1); } }
|
||
@keyframes hbgBirdFly3 { 0% { transform: translate(-60px, 110px) rotate(-2deg); } 100% { transform: translate(calc(100vw + 60px), 130px) rotate(4deg); } }
|
||
|
||
/* Fachbegriffe-Drift */
|
||
.hero-bg-words { position: absolute; inset: 0; pointer-events: none; }
|
||
.hero-bg-word {
|
||
position: absolute; font-family: 'Fraunces', Georgia, serif;
|
||
font-weight: 700; font-style: italic; color: #4a7c8a;
|
||
opacity: .07; white-space: nowrap; will-change: transform;
|
||
font-size: clamp(1.4rem, 3vw, 2.8rem);
|
||
}
|
||
.hbw-1 { top: 18%; left: -300px; animation: hbgWordDrift 80s linear infinite; }
|
||
.hbw-2 { top: 32%; left: -300px; animation: hbgWordDrift 95s linear infinite; animation-delay: -25s; }
|
||
.hbw-3 { top: 58%; left: -300px; animation: hbgWordDrift 110s linear infinite; animation-delay: -55s; }
|
||
.hbw-4 { top: 72%; left: -300px; animation: hbgWordDrift 70s linear infinite; animation-delay: -10s; }
|
||
.hbw-5 { top: 8%; left: -300px; animation: hbgWordDrift 100s linear infinite; animation-delay: -65s; }
|
||
.hbw-6 { top: 45%; left: -300px; animation: hbgWordDrift 88s linear infinite; animation-delay: -38s; }
|
||
@keyframes hbgWordDrift { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100vw + 600px)); } }
|
||
|
||
/* Mobile + Reduzierte Bewegung */
|
||
@media (max-width: 700px) {
|
||
.hero-bg-bird, .hero-bg-word { display: none; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.hero-bg-boat, .hero-bg-boat-inner, .hero-bg-bird, .hero-bg-word {
|
||
animation: none !important;
|
||
}
|
||
}
|
||
</style>
|
||
<?php endif; ?>
|