/* * reveal.css - Vollbild Parallax Reveal (additiv im Child Theme dirkdittrich) * ----------------------------------------------------------------------------- * Ein Foto fuellt randlos die volle Breite (wie der Hero) und exakt die * Viewport-Hoehe. Beim Scrollen driftet das Bild langsamer als der uebrige * Inhalt und erzeugt so spuerbare Tiefe. Kein Text-freier Zwang mehr: unten * kann ein handschriftlicher Schriftzug liegen. * * WICHTIG - keine sticky-Technik: * Das Theme setzt auf und overflow-x: hidden (teils !important, * gegen horizontales Scrollen). Das macht position: sticky unzuverlaessig * (v.a. Firefox) und hinterliess einen schwarzen Leerbereich. Deshalb ist die * Sektion jetzt eine knappe 100vh-Bahn mit overflow: hidden, das Foto ist * groesser als die Bahn und wird per transform gedriftet. Das braucht kein * sticky und funktioniert ueberall. * * Bewegung: primaer CSS scroll-driven animation (animation-timeline), Fallback * reveal.js (requestAnimationFrame + translate3d). prefers-reduced-motion: * ruhiges Standbild. */ .dd-photoreveal { position: relative; width: 100%; height: var(--dd-photoreveal-h, 100vh); margin: 0; overflow: hidden; /* Bahn schneidet den Bild-Ueberhang sauber ab */ background: #000; /* kein weisses Aufblitzen vor dem Bild-Load */ view-timeline-name: --dd-photoreveal; view-timeline-axis: block; } /* * Das Foto ist etwas hoeher als die Bahn (120% statt 100%), damit es driften * kann, ohne dass oben oder unten eine Kante frei wird. Bewusst NICHT groesser: * je mehr Ueberhang, desto staerker der Anschnitt der Motive. 120% ist der * Kompromiss zwischen spuerbarer Parallax und geschuetzten Gesichtern. * Ruhelage vertikal zentriert (top: -10% => Ueberhang je 10%). * * WICHTIG fuer den Zufallsmodus: object-position bleibt center und die Drift * ist im Moment der vollen Sichtbarkeit (Mitte der Bahn) = 0, dann sitzt das * Motiv am ruhigsten und wird am wenigsten angeschnitten. */ .dd-photoreveal__img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; object-position: center 25%; transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; } /* * Bevorzugt: CSS scroll-driven animation. * Drift -10% .. +10% der Bildhoehe (ca. +/-12vh), innerhalb des 10%-Ueberhangs. * Deutlich sichtbar, aber schont die Motive mehr als die fruehere 13%-Drift. */ @supports (animation-timeline: view()) { .dd-photoreveal__img { animation: dd-photoreveal-drift linear both; animation-timeline: --dd-photoreveal; animation-range: entry 0% exit 100%; } @keyframes dd-photoreveal-drift { from { transform: translate3d(0, -10%, 0); } to { transform: translate3d(0, 10%, 0); } } } /* * Handschriftlicher Schriftzug am unteren Bildrand (optional, ueber das * Shortcode-Attribut text). Liegt ueber einem sanften Verlauf, damit die * Schrift auf jedem Foto lesbar bleibt (Kontrast). */ .dd-photoreveal__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14vh 6vw 6vh; display: flex; justify-content: center; text-align: center; pointer-events: none; /* Kraeftigerer Verlauf, damit der Goldton auch auf hellen/goldenen Fotos sicher lesbar bleibt (Kontrast). */ background: linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.62) 72%, rgba(0,0,0,0) 100%); } .dd-photoreveal__caption span { font-family: 'Ephesis', cursive; color: #e8cf92; /* Gold, konsistent mit der Startseite */ font-size: clamp(2.4rem, 7vw, 5.5rem); line-height: 1.05; /* Echte dunkle Kontur um JEDE Glyphe (auch die Oberkante) plus mehrschichtiger Schatten -> die duenne Schreibschrift bleibt auf JEDEM Foto lesbar, auch auf heller Wiese oder Himmel (Dirk 15.07., Pruef-Agent). */ paint-order: stroke fill; -webkit-text-stroke: 0.6px rgba(0,0,0,0.55); text-shadow: 0 0 3px rgba(0,0,0,0.95), 0 0 7px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.98), 0 2px 12px rgba(0,0,0,0.9), 0 4px 34px rgba(0,0,0,0.72); /* Einblenden beim Hereinscrollen: sanft aufsteigend */ opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease, transform 1.1s ease; } /* Klasse wird per IntersectionObserver (reveal.js) gesetzt, sobald sichtbar. */ .dd-photoreveal.is-inview .dd-photoreveal__caption span { opacity: 1; transform: translateY(0); } /* * Barrierefreiheit: reduzierte Bewegung => kein Parallax, kein Aufsteigen, * ruhiges Standbild und sofort sichtbarer Schriftzug. */ @media (prefers-reduced-motion: reduce) { .dd-photoreveal__img { animation: none !important; top: 0; height: 100%; transform: none !important; will-change: auto; } .dd-photoreveal__caption span { opacity: 1; transform: none; transition: none; } }