/* landschaft.css — der Urlaubsmodus. * * Vorher lag die Seite am Meer (public/archiv/strand.css). Jetzt sieht man * aus einem Fenster hinaus, und draussen zieht eine Landschaft vorbei. * * Dieselbe Klasse wie vorher, `html.urlaub`. Der Schalter im Eck-Menue und * der Stand in data/deko.json wissen also gar nicht, dass sich etwas * geaendert hat: der Schalter sagt "Urlaubsmodus an", und welche Datei * eingebunden ist, entscheidet, wie Urlaub aussieht. * * =========================================================================== * WARUM HIER NICHTS AM HAENGT — die teuerste Lektion dieser Datei * * Erste Fassung: Himmel auf `body`, Landschaft auf `body::before/::after`. * Auf dem iPhone sah das beim Wischen zwischen Menue und Chat fuer ein paar * Bilder so aus: die Huegel und Baeume standen als dunkle Umrisse auf einer * WEISSEN Flaeche, der Himmel war weg. Zwei Ursachen, beide am : * * 1. `uebergang.js` schiebt die Seite mit einem `transform` auf dem . * Ein `background-attachment: fixed` auf einem transformierten Element * faellt weg — auf iOS ersatzlos. Uebrig blieb die weisse Leinwand. * 2. `menu.html` startet mit `body { opacity: 0 }` und blendet ein. Eine * Deckung unter 1 macht aus dem einen eigenen Stapelkontext: * alles, was darin auf einem negativen z-index liegt, wird mit * verblasst — und `position: fixed` darin richtet sich ausserdem nach * dem statt nach dem Bildschirm, faehrt also mit. * * Deshalb liegt jetzt alles, was stehen bleiben soll, am : * * html.urlaub der Himmel (als Hintergrund des Wurzelelements) * html.urlaub::before die Ferne z-index -4 * html.urlaub::after die Naehe z-index -3 * .fenster Rahmen + Baum z-index -2 * * Der Hintergrund liegt bewusst auf und NICHT mehr auf . In * CLAUDE.md stand lange "html darf keinen Hintergrund haben, sonst * verschwindet alles Negative". Das galt, solange der Schmuck an `body` * hing: dann malte der Hintergrund des ueber die negativen Ebenen * darunter. Jetzt ist es umgekehrt richtig — der Hintergrund des * Wurzelelements ist die Leinwand und wird ZUERST gemalt, die negativen * Ebenen darueber. Bedingung dafuer ist nur, dass der selbst keinen * eigenen Hintergrund mehr hat; genau das macht die Regel weiter unten. * * `.fenster` ist das einzige, was noch im steckt (ein
in jeder * Seite — ein Element AUSSERHALB von gibt es in HTML nicht, und die * beiden Pseudo-Elemente von sind vergeben). Rahmen und naher Baum * fahren beim Seitenwechsel also 260 ms lang mit. Das ist die kleinste der * Unschoenheiten: der Rahmen ist eine ruhige Flaeche am Bildschirmrand, der * Baum steht 86 % der Zeit ohnehin ausserhalb des Bildes. * =========================================================================== * * WO DIE BAENDER LIEGEN — in Pixeln vom UNTEREN Rand, nicht in Prozent. * Der Baer im Menue sitzt mit den Fuessen bei `window.innerHeight - 30` * (menu.html, groundY), also in einem festen Abstand. Waere die Wiese ein * Prozentband, saesse er auf einem hohen Bildschirm im Himmel. * * Horizont 230 / 168 px <- dort stehen die Huegel * Ferne Wiese 230 → 120 / 168 → 88 * Baumreihe bei 120 / 88 <- die zweite Ebene * Nahe Wiese 120 → 0 / 88 → 0 * * Wer eine Zahl aendert, muss die zugehoerige Ebene mitnehmen und das * `clip-path` der Sterne. */ /* ------------------------------------------------------- Der Himmel, am Tag Auf , damit ihn kein `transform` und keine Deckung am erwischt. `fixed` bleibt hier gefahrlos: das Wurzelelement wird nicht geschoben. */ html.urlaub { background: /* Nachmittagssonne, hoch rechts. Weich – sie soll waermen, nicht blenden; am Strand war der erste Versuch ein Scheinwerfer. */ radial-gradient(circle at 84% 15%, rgba(255, 246, 214, .85) 0%, rgba(255, 246, 214, 0) 28%), linear-gradient(180deg, #7fb8dd 0%, #a8d3e8 40%, /* Dunst: der Himmel wird zum Horizont hin blasser, sonst steht das Land wie ausgeschnitten davor. */ #dfe7dd calc(100% - 230px), /* Horizont – hier MUSS die Kante hart sein, sonst verlaeuft Himmel in Wiese und beides wird Brei. */ #a4bc8c calc(100% - 230px), #93ae78 calc(100% - 120px), /* Die nahe Wiese ist satter und dunkler: was naeher ist, ist kraeftiger. */ #86a46b calc(100% - 120px), #6f8f56 100%); background-attachment: fixed; } /* Bei Nacht bleiben die Farben der Seite die der Nacht (nacht.css), nur draussen ist es dunkel. */ html.urlaub.nacht { background: radial-gradient(circle at 81% 14%, rgba(226, 236, 255, .50) 0%, rgba(226, 236, 255, 0) 7%), radial-gradient(circle at 81% 14%, rgba(180, 205, 250, .15) 0%, rgba(180, 205, 250, 0) 22%), linear-gradient(180deg, #060c22 0%, #0d1836 40%, #16264a calc(100% - 230px), #111d33 calc(100% - 230px), #0c1626 calc(100% - 120px), #0a1421 calc(100% - 120px), #070f18 100%); background-attachment: fixed; } /* Und der bekommt gar keinen mehr. Ohne diese Zeile malte der Pfirsich-Verlauf der Seite (bzw. nachts der dunkelblaue) ueber alles, was auf negativem z-index darunter liegt — die ganze Landschaft waere unsichtbar. */ html.urlaub body { background: none !important; } /* ==================================================== Was vorbeizieht (1) Die Ferne: zwei Huegelzuege und Baeume, alles in EINER Zeichnung. Das ist die Lehre vom Strand, und sie gilt hier genauso: was zusammengehoert, gehoert in ein Bild. Lagen dort Sandkante und Schaum auf zwei Ebenen mit eigenen Zeiten, liefen sie sich staendig durchs Bild ("die sind versetzt"). In einer Zeichnung KANN nichts verrutschen. Bewegt wird mit `transform: translateX()`, nicht mit `background-position`: eine Verschiebung macht der Compositor, ohne einen einzigen Pixel neu zu malen. Damit es nahtlos umlaeuft, ist das Element eine Kachel BREITER als der Bildschirm und wandert um genau eine Kachel. 1440 breit und nicht 480: eine 480er Kachel wiederholt sich auf einem 1400-px-Bildschirm dreimal, und ein Muster, das dreimal nebeneinander steht, erkennt man als Muster — egal wie gut die Streuung darin ist. Die Zeit waechst mit, damit die Geschwindigkeit bleibt: 14,1 px je Sekunde. Gezeichnet wird die Kachel von werkzeug/landschaft-kacheln.js. */ html.urlaub::before { content: ""; --kachel: 1440px; position: fixed; left: 0; /* Die Kachel ist 60 hoch, ihr Boden liegt bei y=52. 222 + (60-52) = 230, also genau auf dem Horizont. Die untersten 8 px sind gefuellt und dichten gegen die Wiese ab. */ bottom: 222px; width: calc(100% + var(--kachel)); height: 60px; z-index: -4; pointer-events: none; background-repeat: repeat-x; background-size: var(--kachel) 60px; /* Die Huegelkurven passen an sich selbst: bei x=0 und x=1440 liegen sie auf derselben Hoehe UND haben dieselbe Steigung. Ohne das gaebe es alle 1440 px einen sichtbaren Knick. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='60' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q90 20 180 36 Q270 50 360 28 Q450 10 540 34 Q630 52 720 32 Q810 16 900 38 Q990 54 1080 30 Q1170 12 1260 36 Q1350 60 1440 40 L1440 60 L0 60 Z' fill='%23aec49a'/%3E%3Cpath d='M0 47 Q120 36 240 46 Q360 55 480 44 Q600 34 720 47 Q840 57 960 45 Q1080 35 1200 46 Q1320 58 1440 47 L1440 60 L0 60 Z' fill='%2397b183'/%3E%3Cg fill='%237d6b52'%3E%3Crect x='1212.9' y='41' width='0.9' height='5'/%3E%3Crect x='746.1' y='40.1' width='1.4' height='6.1'/%3E%3Crect x='814.2' y='38.8' width='1' height='7.5'/%3E%3Crect x='758.4' y='40.1' width='1.6' height='6.7'/%3E%3Crect x='770.4' y='41.3' width='1.1' height='6'/%3E%3Crect x='524.1' y='40.9' width='1.3' height='7'/%3E%3Crect x='813' y='41.5' width='1.2' height='6.4'/%3E%3Crect x='819' y='38.2' width='1.4' height='9.9'/%3E%3Crect x='1229.5' y='40' width='1.2' height='8.8'/%3E%3Crect x='100.7' y='42' width='1.3' height='7.2'/%3E%3Crect x='1179.2' y='42.4' width='1.3' height='7.2'/%3E%3Crect x='108.1' y='41.9' width='1.5' height='8.1'/%3E%3Crect x='783.7' y='40.8' width='2.4' height='10.1'/%3E%3Crect x='798.3' y='37.3' width='1.9' height='14'/%3E%3Crect x='793.9' y='42.7' width='1.5' height='8.6'/%3E%3Crect x='736.6' y='43.7' width='1.4' height='7.8'/%3E%3Crect x='533.7' y='36.2' width='1.2' height='15.7'/%3E%3Crect x='1195.7' y='43.4' width='1.6' height='8.7'/%3E%3Crect x='124' y='39.2' width='1.8' height='13.1'/%3E%3Crect x='1013.7' y='31.6' width='1.6' height='20.9'/%3E%3Crect x='843.1' y='43.7' width='1.6' height='9.2'/%3E%3Crect x='142.1' y='39.5' width='1.9' height='13.4'/%3E%3Crect x='334.4' y='40.7' width='1.7' height='12.4'/%3E%3Crect x='93.6' y='44.4' width='1.6' height='9'/%3E%3Crect x='777.6' y='41.6' width='2.8' height='12'/%3E%3Crect x='726.3' y='43.7' width='1.8' height='10'/%3E%3Crect x='1394' y='45.8' width='1.4' height='8'/%3E%3Crect x='785.8' y='39.4' width='3.4' height='14.7'/%3E%3Crect x='115.7' y='45.2' width='1.7' height='9.4'/%3E%3Crect x='1196' y='46' width='1.6' height='8.9'/%3E%3Crect x='90' y='45.3' width='1.8' height='10.1'/%3E%3Crect x='136.7' y='40.6' width='2.1' height='15.3'/%3E%3Crect x='528.4' y='35.2' width='1.6' height='20.7'/%3E%3C/g%3E%3Cg fill='%236f9060'%3E%3Cpath d='M1213.4 36 L1211 40.2 L1215.7 40.2 Z'/%3E%3Cpath d='M1213.4 38.8 L1210.1 43.1 L1216.7 43.1 Z'/%3E%3Cpath d='M1213.4 41.6 L1209.1 45.9 L1217.6 45.9 Z'/%3E%3Cpath d='M770.9 35.3 L768.1 40.3 L773.7 40.3 Z'/%3E%3Cpath d='M770.9 38.7 L767 43.7 L774.9 43.7 Z'/%3E%3Cpath d='M770.9 42 L765.9 47.1 L776 47.1 Z'/%3E%3Cpath d='M524.7 33.9 L521.5 39.8 L527.9 39.8 Z'/%3E%3Cpath d='M524.7 37.8 L520.1 43.7 L529.3 43.7 Z'/%3E%3Cpath d='M524.7 41.7 L518.8 47.6 L530.6 47.6 Z'/%3E%3Cpath d='M813.5 35.1 L810.6 40.5 L816.5 40.5 Z'/%3E%3Cpath d='M813.5 38.7 L809.3 44.1 L817.8 44.1 Z'/%3E%3Cpath d='M813.5 42.3 L808.1 47.7 L818.9 47.7 Z'/%3E%3Cpath d='M101.3 34.8 L98 40.9 L104.7 40.9 Z'/%3E%3Cpath d='M101.3 38.9 L96.6 44.9 L106 44.9 Z'/%3E%3Cpath d='M101.3 42.9 L95.2 49 L107.4 49 Z'/%3E%3Cpath d='M1179.8 35.2 L1176.5 41.3 L1183.2 41.3 Z'/%3E%3Cpath d='M1179.8 39.3 L1175.1 45.3 L1184.6 45.3 Z'/%3E%3Cpath d='M1179.8 43.3 L1173.8 49.4 L1185.9 49.4 Z'/%3E%3Cpath d='M108.8 33.8 L105.1 40.6 L112.6 40.6 Z'/%3E%3Cpath d='M108.8 38.3 L103.5 45.2 L114.1 45.2 Z'/%3E%3Cpath d='M108.8 42.9 L102 49.7 L115.6 49.7 Z'/%3E%3Cpath d='M794.6 34.1 L790.7 41.3 L798.6 41.3 Z'/%3E%3Cpath d='M794.6 38.9 L789 46.2 L800.3 46.2 Z'/%3E%3Cpath d='M794.6 43.8 L787.4 51 L801.9 51 Z'/%3E%3Cpath d='M737.3 35.9 L733.7 42.5 L740.9 42.5 Z'/%3E%3Cpath d='M737.3 40.3 L732.2 46.9 L742.4 46.9 Z'/%3E%3Cpath d='M737.3 44.7 L730.8 51.2 L743.9 51.2 Z'/%3E%3Cpath d='M1196.5 34.7 L1192.4 42 L1200.5 42 Z'/%3E%3Cpath d='M1196.5 39.6 L1190.8 46.9 L1202.2 46.9 Z'/%3E%3Cpath d='M1196.5 44.5 L1189.1 51.8 L1203.8 51.8 Z'/%3E%3Cpath d='M843.9 34.5 L839.7 42.2 L848.2 42.2 Z'/%3E%3Cpath d='M843.9 39.7 L837.9 47.4 L849.9 47.4 Z'/%3E%3Cpath d='M843.9 44.8 L836.2 52.5 L851.6 52.5 Z'/%3E%3Cpath d='M94.4 35.4 L90.2 43 L98.5 43 Z'/%3E%3Cpath d='M94.4 40.5 L88.5 48 L100.3 48 Z'/%3E%3Cpath d='M94.4 45.5 L86.8 53 L101.9 53 Z'/%3E%3Cpath d='M727.2 33.6 L722.5 42.1 L731.8 42.1 Z'/%3E%3Cpath d='M727.2 39.3 L720.6 47.7 L733.7 47.7 Z'/%3E%3Cpath d='M727.2 44.9 L718.7 53.3 L735.6 53.3 Z'/%3E%3Cpath d='M1394.7 37.8 L1391 44.6 L1398.4 44.6 Z'/%3E%3Cpath d='M1394.7 42.3 L1389.4 49 L1399.9 49 Z'/%3E%3Cpath d='M1394.7 46.8 L1388 53.5 L1401.4 53.5 Z'/%3E%3Cpath d='M116.6 35.8 L112.2 43.7 L120.9 43.7 Z'/%3E%3Cpath d='M116.6 41.1 L110.4 49 L122.7 49 Z'/%3E%3Cpath d='M116.6 46.3 L108.6 54.3 L124.5 54.3 Z'/%3E%3Cpath d='M1196.8 37 L1192.6 44.5 L1200.9 44.5 Z'/%3E%3Cpath d='M1196.8 42 L1190.9 49.5 L1202.6 49.5 Z'/%3E%3Cpath d='M1196.8 47 L1189.3 54.5 L1204.3 54.5 Z'/%3E%3Cpath d='M90.9 35.2 L86.2 43.7 L95.5 43.7 Z'/%3E%3Cpath d='M90.9 40.9 L84.3 49.4 L97.5 49.4 Z'/%3E%3Cpath d='M90.9 46.5 L82.4 55 L99.3 55 Z'/%3E%3C/g%3E%3Cg fill='%2387a672'%3E%3Cellipse cx='746.8' cy='39.9' rx='5.1' ry='3.3'/%3E%3Cellipse cx='744' cy='42.1' rx='3.1' ry='2.4'/%3E%3Cellipse cx='749.6' cy='42.1' rx='3.1' ry='2.4'/%3E%3Ccircle cx='814.7' cy='39.4' r='3.5'/%3E%3Ccircle cx='812.2' cy='41.7' r='2.4'/%3E%3Ccircle cx='817.1' cy='41.7' r='2.4'/%3E%3Cellipse cx='759.2' cy='39.9' rx='5.6' ry='3.6'/%3E%3Cellipse cx='756.1' cy='42.4' rx='3.4' ry='2.7'/%3E%3Cellipse cx='762.3' cy='42.4' rx='3.4' ry='2.7'/%3E%3Ccircle cx='819.7' cy='39' r='4.7'/%3E%3Ccircle cx='816.4' cy='42.1' r='3.2'/%3E%3Ccircle cx='823' cy='42.1' r='3.2'/%3E%3Ccircle cx='1230.1' cy='40.8' r='4.2'/%3E%3Ccircle cx='1227.2' cy='43.5' r='2.8'/%3E%3Ccircle cx='1233.1' cy='43.5' r='2.8'/%3E%3Cellipse cx='784.9' cy='40.4' rx='8.4' ry='5.4'/%3E%3Cellipse cx='780.3' cy='44.1' rx='5.1' ry='4'/%3E%3Cellipse cx='789.5' cy='44.1' rx='5.1' ry='4'/%3E%3Ccircle cx='799.3' cy='38.5' r='6.6'/%3E%3Ccircle cx='794.7' cy='42.8' r='4.5'/%3E%3Ccircle cx='803.9' cy='42.8' r='4.5'/%3E%3Cellipse cx='534.4' cy='41.4' rx='3' ry='7.3'/%3E%3Ccircle cx='124.9' cy='40.3' r='6.2'/%3E%3Ccircle cx='120.6' cy='44.3' r='4.2'/%3E%3Ccircle cx='129.2' cy='44.3' r='4.2'/%3E%3Cellipse cx='1014.5' cy='38.5' rx='3.9' ry='9.7'/%3E%3Ccircle cx='143.1' cy='40.6' r='6.3'/%3E%3Ccircle cx='138.6' cy='44.7' r='4.3'/%3E%3Ccircle cx='147.5' cy='44.7' r='4.3'/%3E%3Ccircle cx='335.3' cy='41.8' r='5.9'/%3E%3Ccircle cx='331.1' cy='45.6' r='4'/%3E%3Ccircle cx='339.4' cy='45.6' r='4'/%3E%3Cellipse cx='779' cy='41.2' rx='10' ry='6.4'/%3E%3Cellipse cx='773.5' cy='45.6' rx='6' ry='4.8'/%3E%3Cellipse cx='784.5' cy='45.6' rx='6' ry='4.8'/%3E%3Cellipse cx='787.5' cy='38.9' rx='12.2' ry='7.8'/%3E%3Cellipse cx='780.8' cy='44.3' rx='7.3' ry='5.9'/%3E%3Cellipse cx='794.2' cy='44.3' rx='7.3' ry='5.9'/%3E%3Ccircle cx='137.8' cy='41.9' r='7.2'/%3E%3Ccircle cx='132.7' cy='46.6' r='4.9'/%3E%3Ccircle cx='142.8' cy='46.6' r='4.9'/%3E%3Cellipse cx='529.2' cy='42.1' rx='3.9' ry='9.7'/%3E%3C/g%3E%3C/svg%3E"); animation: landschaft-ferne 102s linear infinite, landschaft-wanken 2.7s ease-in-out infinite; --wanken: .8px; will-change: transform; } html.urlaub.nacht::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='60' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40 Q90 20 180 36 Q270 50 360 28 Q450 10 540 34 Q630 52 720 32 Q810 16 900 38 Q990 54 1080 30 Q1170 12 1260 36 Q1350 60 1440 40 L1440 60 L0 60 Z' fill='%23142139'/%3E%3Cpath d='M0 47 Q120 36 240 46 Q360 55 480 44 Q600 34 720 47 Q840 57 960 45 Q1080 35 1200 46 Q1320 58 1440 47 L1440 60 L0 60 Z' fill='%230f1a2b'/%3E%3Cg fill='%23090f19'%3E%3Crect x='1212.9' y='41' width='0.9' height='5'/%3E%3Crect x='746.1' y='40.1' width='1.4' height='6.1'/%3E%3Crect x='814.2' y='38.8' width='1' height='7.5'/%3E%3Crect x='758.4' y='40.1' width='1.6' height='6.7'/%3E%3Crect x='770.4' y='41.3' width='1.1' height='6'/%3E%3Crect x='524.1' y='40.9' width='1.3' height='7'/%3E%3Crect x='813' y='41.5' width='1.2' height='6.4'/%3E%3Crect x='819' y='38.2' width='1.4' height='9.9'/%3E%3Crect x='1229.5' y='40' width='1.2' height='8.8'/%3E%3Crect x='100.7' y='42' width='1.3' height='7.2'/%3E%3Crect x='1179.2' y='42.4' width='1.3' height='7.2'/%3E%3Crect x='108.1' y='41.9' width='1.5' height='8.1'/%3E%3Crect x='783.7' y='40.8' width='2.4' height='10.1'/%3E%3Crect x='798.3' y='37.3' width='1.9' height='14'/%3E%3Crect x='793.9' y='42.7' width='1.5' height='8.6'/%3E%3Crect x='736.6' y='43.7' width='1.4' height='7.8'/%3E%3Crect x='533.7' y='36.2' width='1.2' height='15.7'/%3E%3Crect x='1195.7' y='43.4' width='1.6' height='8.7'/%3E%3Crect x='124' y='39.2' width='1.8' height='13.1'/%3E%3Crect x='1013.7' y='31.6' width='1.6' height='20.9'/%3E%3Crect x='843.1' y='43.7' width='1.6' height='9.2'/%3E%3Crect x='142.1' y='39.5' width='1.9' height='13.4'/%3E%3Crect x='334.4' y='40.7' width='1.7' height='12.4'/%3E%3Crect x='93.6' y='44.4' width='1.6' height='9'/%3E%3Crect x='777.6' y='41.6' width='2.8' height='12'/%3E%3Crect x='726.3' y='43.7' width='1.8' height='10'/%3E%3Crect x='1394' y='45.8' width='1.4' height='8'/%3E%3Crect x='785.8' y='39.4' width='3.4' height='14.7'/%3E%3Crect x='115.7' y='45.2' width='1.7' height='9.4'/%3E%3Crect x='1196' y='46' width='1.6' height='8.9'/%3E%3Crect x='90' y='45.3' width='1.8' height='10.1'/%3E%3Crect x='136.7' y='40.6' width='2.1' height='15.3'/%3E%3Crect x='528.4' y='35.2' width='1.6' height='20.7'/%3E%3C/g%3E%3Cg fill='%23091120'%3E%3Cpath d='M1213.4 36 L1211 40.2 L1215.7 40.2 Z'/%3E%3Cpath d='M1213.4 38.8 L1210.1 43.1 L1216.7 43.1 Z'/%3E%3Cpath d='M1213.4 41.6 L1209.1 45.9 L1217.6 45.9 Z'/%3E%3Cpath d='M770.9 35.3 L768.1 40.3 L773.7 40.3 Z'/%3E%3Cpath d='M770.9 38.7 L767 43.7 L774.9 43.7 Z'/%3E%3Cpath d='M770.9 42 L765.9 47.1 L776 47.1 Z'/%3E%3Cpath d='M524.7 33.9 L521.5 39.8 L527.9 39.8 Z'/%3E%3Cpath d='M524.7 37.8 L520.1 43.7 L529.3 43.7 Z'/%3E%3Cpath d='M524.7 41.7 L518.8 47.6 L530.6 47.6 Z'/%3E%3Cpath d='M813.5 35.1 L810.6 40.5 L816.5 40.5 Z'/%3E%3Cpath d='M813.5 38.7 L809.3 44.1 L817.8 44.1 Z'/%3E%3Cpath d='M813.5 42.3 L808.1 47.7 L818.9 47.7 Z'/%3E%3Cpath d='M101.3 34.8 L98 40.9 L104.7 40.9 Z'/%3E%3Cpath d='M101.3 38.9 L96.6 44.9 L106 44.9 Z'/%3E%3Cpath d='M101.3 42.9 L95.2 49 L107.4 49 Z'/%3E%3Cpath d='M1179.8 35.2 L1176.5 41.3 L1183.2 41.3 Z'/%3E%3Cpath d='M1179.8 39.3 L1175.1 45.3 L1184.6 45.3 Z'/%3E%3Cpath d='M1179.8 43.3 L1173.8 49.4 L1185.9 49.4 Z'/%3E%3Cpath d='M108.8 33.8 L105.1 40.6 L112.6 40.6 Z'/%3E%3Cpath d='M108.8 38.3 L103.5 45.2 L114.1 45.2 Z'/%3E%3Cpath d='M108.8 42.9 L102 49.7 L115.6 49.7 Z'/%3E%3Cpath d='M794.6 34.1 L790.7 41.3 L798.6 41.3 Z'/%3E%3Cpath d='M794.6 38.9 L789 46.2 L800.3 46.2 Z'/%3E%3Cpath d='M794.6 43.8 L787.4 51 L801.9 51 Z'/%3E%3Cpath d='M737.3 35.9 L733.7 42.5 L740.9 42.5 Z'/%3E%3Cpath d='M737.3 40.3 L732.2 46.9 L742.4 46.9 Z'/%3E%3Cpath d='M737.3 44.7 L730.8 51.2 L743.9 51.2 Z'/%3E%3Cpath d='M1196.5 34.7 L1192.4 42 L1200.5 42 Z'/%3E%3Cpath d='M1196.5 39.6 L1190.8 46.9 L1202.2 46.9 Z'/%3E%3Cpath d='M1196.5 44.5 L1189.1 51.8 L1203.8 51.8 Z'/%3E%3Cpath d='M843.9 34.5 L839.7 42.2 L848.2 42.2 Z'/%3E%3Cpath d='M843.9 39.7 L837.9 47.4 L849.9 47.4 Z'/%3E%3Cpath d='M843.9 44.8 L836.2 52.5 L851.6 52.5 Z'/%3E%3Cpath d='M94.4 35.4 L90.2 43 L98.5 43 Z'/%3E%3Cpath d='M94.4 40.5 L88.5 48 L100.3 48 Z'/%3E%3Cpath d='M94.4 45.5 L86.8 53 L101.9 53 Z'/%3E%3Cpath d='M727.2 33.6 L722.5 42.1 L731.8 42.1 Z'/%3E%3Cpath d='M727.2 39.3 L720.6 47.7 L733.7 47.7 Z'/%3E%3Cpath d='M727.2 44.9 L718.7 53.3 L735.6 53.3 Z'/%3E%3Cpath d='M1394.7 37.8 L1391 44.6 L1398.4 44.6 Z'/%3E%3Cpath d='M1394.7 42.3 L1389.4 49 L1399.9 49 Z'/%3E%3Cpath d='M1394.7 46.8 L1388 53.5 L1401.4 53.5 Z'/%3E%3Cpath d='M116.6 35.8 L112.2 43.7 L120.9 43.7 Z'/%3E%3Cpath d='M116.6 41.1 L110.4 49 L122.7 49 Z'/%3E%3Cpath d='M116.6 46.3 L108.6 54.3 L124.5 54.3 Z'/%3E%3Cpath d='M1196.8 37 L1192.6 44.5 L1200.9 44.5 Z'/%3E%3Cpath d='M1196.8 42 L1190.9 49.5 L1202.6 49.5 Z'/%3E%3Cpath d='M1196.8 47 L1189.3 54.5 L1204.3 54.5 Z'/%3E%3Cpath d='M90.9 35.2 L86.2 43.7 L95.5 43.7 Z'/%3E%3Cpath d='M90.9 40.9 L84.3 49.4 L97.5 49.4 Z'/%3E%3Cpath d='M90.9 46.5 L82.4 55 L99.3 55 Z'/%3E%3C/g%3E%3Cg fill='%230b1526'%3E%3Cellipse cx='746.8' cy='39.9' rx='5.1' ry='3.3'/%3E%3Cellipse cx='744' cy='42.1' rx='3.1' ry='2.4'/%3E%3Cellipse cx='749.6' cy='42.1' rx='3.1' ry='2.4'/%3E%3Ccircle cx='814.7' cy='39.4' r='3.5'/%3E%3Ccircle cx='812.2' cy='41.7' r='2.4'/%3E%3Ccircle cx='817.1' cy='41.7' r='2.4'/%3E%3Cellipse cx='759.2' cy='39.9' rx='5.6' ry='3.6'/%3E%3Cellipse cx='756.1' cy='42.4' rx='3.4' ry='2.7'/%3E%3Cellipse cx='762.3' cy='42.4' rx='3.4' ry='2.7'/%3E%3Ccircle cx='819.7' cy='39' r='4.7'/%3E%3Ccircle cx='816.4' cy='42.1' r='3.2'/%3E%3Ccircle cx='823' cy='42.1' r='3.2'/%3E%3Ccircle cx='1230.1' cy='40.8' r='4.2'/%3E%3Ccircle cx='1227.2' cy='43.5' r='2.8'/%3E%3Ccircle cx='1233.1' cy='43.5' r='2.8'/%3E%3Cellipse cx='784.9' cy='40.4' rx='8.4' ry='5.4'/%3E%3Cellipse cx='780.3' cy='44.1' rx='5.1' ry='4'/%3E%3Cellipse cx='789.5' cy='44.1' rx='5.1' ry='4'/%3E%3Ccircle cx='799.3' cy='38.5' r='6.6'/%3E%3Ccircle cx='794.7' cy='42.8' r='4.5'/%3E%3Ccircle cx='803.9' cy='42.8' r='4.5'/%3E%3Cellipse cx='534.4' cy='41.4' rx='3' ry='7.3'/%3E%3Ccircle cx='124.9' cy='40.3' r='6.2'/%3E%3Ccircle cx='120.6' cy='44.3' r='4.2'/%3E%3Ccircle cx='129.2' cy='44.3' r='4.2'/%3E%3Cellipse cx='1014.5' cy='38.5' rx='3.9' ry='9.7'/%3E%3Ccircle cx='143.1' cy='40.6' r='6.3'/%3E%3Ccircle cx='138.6' cy='44.7' r='4.3'/%3E%3Ccircle cx='147.5' cy='44.7' r='4.3'/%3E%3Ccircle cx='335.3' cy='41.8' r='5.9'/%3E%3Ccircle cx='331.1' cy='45.6' r='4'/%3E%3Ccircle cx='339.4' cy='45.6' r='4'/%3E%3Cellipse cx='779' cy='41.2' rx='10' ry='6.4'/%3E%3Cellipse cx='773.5' cy='45.6' rx='6' ry='4.8'/%3E%3Cellipse cx='784.5' cy='45.6' rx='6' ry='4.8'/%3E%3Cellipse cx='787.5' cy='38.9' rx='12.2' ry='7.8'/%3E%3Cellipse cx='780.8' cy='44.3' rx='7.3' ry='5.9'/%3E%3Cellipse cx='794.2' cy='44.3' rx='7.3' ry='5.9'/%3E%3Ccircle cx='137.8' cy='41.9' r='7.2'/%3E%3Ccircle cx='132.7' cy='46.6' r='4.9'/%3E%3Ccircle cx='142.8' cy='46.6' r='4.9'/%3E%3Cellipse cx='529.2' cy='42.1' rx='3.9' ry='9.7'/%3E%3C/g%3E%3C/svg%3E"); } /* ==================================================== Was vorbeizieht (2) Die naehere Baumreihe. Schneller als die Ferne — das ist die ganze Parallaxe, und mehr braucht es nicht: 102 s dort, 39 s hier. Auch das wieder EINE Zeichnung. */ html.urlaub::after { content: ""; --kachel: 1080px; position: fixed; left: 0; /* Kachel 46 hoch, ihr Boden bei y=38: 112 + (46-38) = 120, also genau die Kante zwischen ferner und naher Wiese. */ bottom: 112px; width: calc(100% + var(--kachel)); height: 46px; z-index: -3; pointer-events: none; background-repeat: repeat-x; background-size: var(--kachel) 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1080' height='46' viewBox='0 0 1080 46' preserveAspectRatio='none'%3E%3Crect y='38' width='1080' height='8' fill='%2386a46b'/%3E%3Cg fill='%236b4f36'%3E%3Crect x='95.4' y='24.1' width='1.1' height='6.1'/%3E%3Crect x='53.8' y='24.4' width='1.2' height='6.4'/%3E%3Crect x='651.9' y='20.1' width='1.6' height='11.4'/%3E%3Crect x='610.6' y='19.9' width='1.6' height='11.8'/%3E%3Crect x='670.3' y='17.8' width='1.1' height='14.1'/%3E%3Crect x='601.4' y='18' width='1.2' height='15'/%3E%3Crect x='908.3' y='10.2' width='1.8' height='23'/%3E%3Crect x='708.1' y='24.2' width='2' height='10.9'/%3E%3Crect x='632.7' y='24.3' width='1.9' height='10.8'/%3E%3Crect x='704.2' y='16.2' width='1.5' height='19.7'/%3E%3Crect x='627.3' y='25.3' width='2' height='11.1'/%3E%3Crect x='634.5' y='25' width='2.1' height='11.6'/%3E%3Crect x='57.9' y='22' width='2' height='14.6'/%3E%3Crect x='298.4' y='23.9' width='4.5' height='19.4'/%3E%3Crect x='116.9' y='26.4' width='2.5' height='17.7'/%3E%3Crect x='1025.9' y='33.6' width='1.6' height='11.3'/%3E%3C/g%3E%3Cg fill='%234f7a42'%3E%3Cpath d='M95.9 17.9 L93.1 23.1 L98.8 23.1 Z'/%3E%3Cpath d='M95.9 21.4 L91.9 26.5 L99.9 26.5 Z'/%3E%3Cpath d='M95.9 24.8 L90.8 29.9 L101.1 29.9 Z'/%3E%3Cpath d='M54.3 18 L51.4 23.4 L57.3 23.4 Z'/%3E%3Cpath d='M54.3 21.6 L50.1 27 L58.5 27 Z'/%3E%3Cpath d='M54.3 25.2 L49 30.6 L59.7 30.6 Z'/%3E%3Cpath d='M709.1 13.3 L704 22.4 L714.1 22.4 Z'/%3E%3Cpath d='M709.1 19.4 L701.9 28.5 L716.2 28.5 Z'/%3E%3Cpath d='M709.1 25.5 L699.9 34.6 L718.3 34.6 Z'/%3E%3Cpath d='M633.7 13.5 L628.7 22.6 L638.7 22.6 Z'/%3E%3Cpath d='M633.7 19.5 L626.6 28.6 L640.7 28.6 Z'/%3E%3Cpath d='M633.7 25.6 L624.6 34.7 L642.7 34.7 Z'/%3E%3Cpath d='M628.3 14.2 L623.1 23.6 L633.4 23.6 Z'/%3E%3Cpath d='M628.3 20.5 L621 29.8 L635.6 29.8 Z'/%3E%3Cpath d='M628.3 26.7 L618.9 36 L637.6 36 Z'/%3E%3Cpath d='M635.5 13.4 L630.2 23.1 L640.8 23.1 Z'/%3E%3Cpath d='M635.5 19.9 L627.9 29.6 L643.1 29.6 Z'/%3E%3Cpath d='M635.5 26.4 L625.8 36.1 L645.2 36.1 Z'/%3E%3C/g%3E%3Cg fill='%236f9455'%3E%3Ccircle cx='652.7' cy='21.1' r='5.4'/%3E%3Ccircle cx='648.9' cy='24.6' r='3.7'/%3E%3Ccircle cx='656.4' cy='24.6' r='3.7'/%3E%3Ccircle cx='611.4' cy='20.9' r='5.6'/%3E%3Ccircle cx='607.5' cy='24.5' r='3.8'/%3E%3Ccircle cx='615.3' cy='24.5' r='3.8'/%3E%3Cellipse cx='670.8' cy='22.5' rx='2.7' ry='6.6'/%3E%3Cellipse cx='602' cy='23.1' rx='2.8' ry='7'/%3E%3Cellipse cx='909.2' cy='17.9' rx='4.3' ry='10.7'/%3E%3Cellipse cx='705' cy='22.8' rx='3.7' ry='9.2'/%3E%3Ccircle cx='59' cy='23.2' r='6.9'/%3E%3Ccircle cx='54.1' cy='27.7' r='4.7'/%3E%3Ccircle cx='63.8' cy='27.7' r='4.7'/%3E%3Cellipse cx='300.6' cy='23.3' rx='16.2' ry='10.3'/%3E%3Cellipse cx='291.7' cy='30.4' rx='9.7' ry='7.8'/%3E%3Cellipse cx='309.5' cy='30.4' rx='9.7' ry='7.8'/%3E%3Ccircle cx='118.2' cy='27.9' r='8.4'/%3E%3Ccircle cx='112.3' cy='33.3' r='5.7'/%3E%3Ccircle cx='124' cy='33.3' r='5.7'/%3E%3Ccircle cx='1026.7' cy='34.6' r='5.3'/%3E%3Ccircle cx='1022.9' cy='38' r='3.6'/%3E%3Ccircle cx='1030.4' cy='38' r='3.6'/%3E%3C/g%3E%3Cg fill='%237aa35e'%3E%3Cellipse cx='1003.3' cy='31.9' rx='7.6' ry='3.5'/%3E%3Cellipse cx='67.4' cy='29.3' rx='22.2' ry='10.4'/%3E%3Cellipse cx='48.1' cy='30.7' rx='22.9' ry='10.7'/%3E%3Cellipse cx='475.3' cy='38.6' rx='8.3' ry='3.9'/%3E%3Cellipse cx='484.1' cy='41.5' rx='7.6' ry='3.5'/%3E%3C/g%3E%3C/svg%3E"); animation: landschaft-naehe 39s linear infinite, landschaft-wanken 2.7s ease-in-out infinite; --wanken: 1.6px; will-change: transform; } html.urlaub.nacht::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1080' height='46' viewBox='0 0 1080 46' preserveAspectRatio='none'%3E%3Crect y='38' width='1080' height='8' fill='%230a1421'/%3E%3Cg fill='%23090e15'%3E%3Crect x='95.4' y='24.1' width='1.1' height='6.1'/%3E%3Crect x='53.8' y='24.4' width='1.2' height='6.4'/%3E%3Crect x='651.9' y='20.1' width='1.6' height='11.4'/%3E%3Crect x='610.6' y='19.9' width='1.6' height='11.8'/%3E%3Crect x='670.3' y='17.8' width='1.1' height='14.1'/%3E%3Crect x='601.4' y='18' width='1.2' height='15'/%3E%3Crect x='908.3' y='10.2' width='1.8' height='23'/%3E%3Crect x='708.1' y='24.2' width='2' height='10.9'/%3E%3Crect x='632.7' y='24.3' width='1.9' height='10.8'/%3E%3Crect x='704.2' y='16.2' width='1.5' height='19.7'/%3E%3Crect x='627.3' y='25.3' width='2' height='11.1'/%3E%3Crect x='634.5' y='25' width='2.1' height='11.6'/%3E%3Crect x='57.9' y='22' width='2' height='14.6'/%3E%3Crect x='298.4' y='23.9' width='4.5' height='19.4'/%3E%3Crect x='116.9' y='26.4' width='2.5' height='17.7'/%3E%3Crect x='1025.9' y='33.6' width='1.6' height='11.3'/%3E%3C/g%3E%3Cg fill='%23060c14'%3E%3Cpath d='M95.9 17.9 L93.1 23.1 L98.8 23.1 Z'/%3E%3Cpath d='M95.9 21.4 L91.9 26.5 L99.9 26.5 Z'/%3E%3Cpath d='M95.9 24.8 L90.8 29.9 L101.1 29.9 Z'/%3E%3Cpath d='M54.3 18 L51.4 23.4 L57.3 23.4 Z'/%3E%3Cpath d='M54.3 21.6 L50.1 27 L58.5 27 Z'/%3E%3Cpath d='M54.3 25.2 L49 30.6 L59.7 30.6 Z'/%3E%3Cpath d='M709.1 13.3 L704 22.4 L714.1 22.4 Z'/%3E%3Cpath d='M709.1 19.4 L701.9 28.5 L716.2 28.5 Z'/%3E%3Cpath d='M709.1 25.5 L699.9 34.6 L718.3 34.6 Z'/%3E%3Cpath d='M633.7 13.5 L628.7 22.6 L638.7 22.6 Z'/%3E%3Cpath d='M633.7 19.5 L626.6 28.6 L640.7 28.6 Z'/%3E%3Cpath d='M633.7 25.6 L624.6 34.7 L642.7 34.7 Z'/%3E%3Cpath d='M628.3 14.2 L623.1 23.6 L633.4 23.6 Z'/%3E%3Cpath d='M628.3 20.5 L621 29.8 L635.6 29.8 Z'/%3E%3Cpath d='M628.3 26.7 L618.9 36 L637.6 36 Z'/%3E%3Cpath d='M635.5 13.4 L630.2 23.1 L640.8 23.1 Z'/%3E%3Cpath d='M635.5 19.9 L627.9 29.6 L643.1 29.6 Z'/%3E%3Cpath d='M635.5 26.4 L625.8 36.1 L645.2 36.1 Z'/%3E%3C/g%3E%3Cg fill='%23091220'%3E%3Ccircle cx='652.7' cy='21.1' r='5.4'/%3E%3Ccircle cx='648.9' cy='24.6' r='3.7'/%3E%3Ccircle cx='656.4' cy='24.6' r='3.7'/%3E%3Ccircle cx='611.4' cy='20.9' r='5.6'/%3E%3Ccircle cx='607.5' cy='24.5' r='3.8'/%3E%3Ccircle cx='615.3' cy='24.5' r='3.8'/%3E%3Cellipse cx='670.8' cy='22.5' rx='2.7' ry='6.6'/%3E%3Cellipse cx='602' cy='23.1' rx='2.8' ry='7'/%3E%3Cellipse cx='909.2' cy='17.9' rx='4.3' ry='10.7'/%3E%3Cellipse cx='705' cy='22.8' rx='3.7' ry='9.2'/%3E%3Ccircle cx='59' cy='23.2' r='6.9'/%3E%3Ccircle cx='54.1' cy='27.7' r='4.7'/%3E%3Ccircle cx='63.8' cy='27.7' r='4.7'/%3E%3Cellipse cx='300.6' cy='23.3' rx='16.2' ry='10.3'/%3E%3Cellipse cx='291.7' cy='30.4' rx='9.7' ry='7.8'/%3E%3Cellipse cx='309.5' cy='30.4' rx='9.7' ry='7.8'/%3E%3Ccircle cx='118.2' cy='27.9' r='8.4'/%3E%3Ccircle cx='112.3' cy='33.3' r='5.7'/%3E%3Ccircle cx='124' cy='33.3' r='5.7'/%3E%3Ccircle cx='1026.7' cy='34.6' r='5.3'/%3E%3Ccircle cx='1022.9' cy='38' r='3.6'/%3E%3Ccircle cx='1030.4' cy='38' r='3.6'/%3E%3C/g%3E%3Cg fill='%230b1626'%3E%3Cellipse cx='1003.3' cy='31.9' rx='7.6' ry='3.5'/%3E%3Cellipse cx='67.4' cy='29.3' rx='22.2' ry='10.4'/%3E%3Cellipse cx='48.1' cy='30.7' rx='22.9' ry='10.7'/%3E%3Cellipse cx='475.3' cy='38.6' rx='8.3' ry='3.9'/%3E%3Cellipse cx='484.1' cy='41.5' rx='7.6' ry='3.5'/%3E%3C/g%3E%3C/svg%3E"); } /* Genau eine Kachel je Durchlauf – sonst springt es am Ende sichtbar. Die Breite steht in --kachel, damit die Keyframes sie nicht kennen muessen; am Handy ist sie kleiner, die Regel bleibt dieselbe. */ @keyframes landschaft-ferne { to { transform: translateX(calc(-1 * var(--kachel))); } } @keyframes landschaft-naehe { to { transform: translateX(calc(-1 * var(--kachel))); } } /* ========================================================== Das Fenster Ein
in jeder Seite. Es traegt zwei Dinge: .fenster::before den Baum dicht am Fenster (malt zuerst) .fenster::after Rahmen, Scheibe, Hauch (malt darueber) Die Reihenfolge ergibt sich von selbst aus ::before vor ::after — ein Baum, der ueber den Rahmen liefe, waere im Zimmer. z-index -2: ueber der Landschaft (die ist weiter weg), unter allem Lesbaren. Und `pointer-events: none`, denn durchsichtig heisst nicht "aus dem Weg" — `.wrap` hat genau so schon einmal jeden Klick geschluckt, ohne dass man etwas davon sah. */ .fenster { display: none; } html.urlaub .fenster { display: block; position: fixed; inset: 0; z-index: -2; pointer-events: none; } /* ---- Der Baum, der ganz dicht vorbeikommt ---- Die beiden Ebenen oben laufen im Kreis, immer gleich schnell, immer gleich weit weg — und genau daran erkennt man sie als Kulisse. Was fehlte, war das Naechste: ein Stamm, der fuer zwei Sekunden fast das ganze Fenster ausfuellt und wieder weg ist. Deshalb hier KEINE Kachel, sondern ein einzelner Durchlauf mit langer Pause. Der Kniff steckt in den Keyframes: die Bewegung ist nach 14 % der Zeit fertig, die restlichen 86 % steht das Element still — und zwar ausserhalb des Bildes. Aus 29 Sekunden werden so gut vier Sekunden Fahrt und fuenfundzwanzig Sekunden Ruhe. Ohne diese Pause haette man alle paar Sekunden einen Baum vor der Nase, und das waere kein Vorbeihuschen mehr, sondern ein Zaun. Im Bild stehen drei Baeume weit auseinander: mal kommt einer allein, mal kurz hintereinander zwei. */ html.urlaub .fenster::before { content: ""; --dicht: 1500px; position: fixed; left: 0; bottom: 0; width: var(--dicht); height: 300px; pointer-events: none; background-repeat: no-repeat; background-size: var(--dicht) 300px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='300' viewBox='0 0 1500 300' preserveAspectRatio='none'%3E%3Cg fill='%234a3524'%3E%3Crect x='136.9' y='155' width='26.1' height='145'/%3E%3Crect x='1162.5' y='150' width='35' height='150'/%3E%3C/g%3E%3Cg fill='%233d6236'%3E%3Cpath d='M150 10 L82.9 131.8 L217.1 131.8 Z'/%3E%3Cpath d='M150 91.2 L36.9 213 L263.1 213 Z'/%3E%3Cpath d='M150 172.4 L28.4 294.2 L271.6 294.2 Z'/%3E%3C/g%3E%3Cg fill='%234c7742'%3E%3Cellipse cx='1180' cy='145' rx='125' ry='80'/%3E%3Cellipse cx='1111.3' cy='200' rx='75' ry='60'/%3E%3Cellipse cx='1248.8' cy='200' rx='75' ry='60'/%3E%3C/g%3E%3Cg fill='%23547f49'%3E%3Cellipse cx='300' cy='240' rx='135' ry='63'/%3E%3C/g%3E%3C/svg%3E"); animation: landschaft-dicht 29s linear infinite, landschaft-wanken 2.7s ease-in-out infinite; --wanken: 2.4px; will-change: transform; } html.urlaub.nacht .fenster::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='300' viewBox='0 0 1500 300' preserveAspectRatio='none'%3E%3Cg fill='%2305080e'%3E%3Crect x='136.9' y='155' width='26.1' height='145'/%3E%3Crect x='1162.5' y='150' width='35' height='150'/%3E%3C/g%3E%3Cg fill='%23040710'%3E%3Cpath d='M150 10 L82.9 131.8 L217.1 131.8 Z'/%3E%3Cpath d='M150 91.2 L36.9 213 L263.1 213 Z'/%3E%3Cpath d='M150 172.4 L28.4 294.2 L271.6 294.2 Z'/%3E%3C/g%3E%3Cg fill='%23050912'%3E%3Cellipse cx='1180' cy='145' rx='125' ry='80'/%3E%3Cellipse cx='1111.3' cy='200' rx='75' ry='60'/%3E%3Cellipse cx='1248.8' cy='200' rx='75' ry='60'/%3E%3C/g%3E%3Cg fill='%23060a14'%3E%3Cellipse cx='300' cy='240' rx='135' ry='63'/%3E%3C/g%3E%3C/svg%3E"); } /* 14 % Fahrt, 86 % Pause. Der Sprung von 100 % zurueck auf 0 % ist unsichtbar, weil das Element an beiden Enden ausserhalb des Bildes steht. */ @keyframes landschaft-dicht { 0% { transform: translateX(100vw); } 14% { transform: translateX(calc(-1 * var(--dicht))); } 100% { transform: translateX(calc(-1 * var(--dicht))); } } /* ---- Der Hauch, wenn die andere da ist ---- Frueher lag hier immer ein angehauchter Fleck mit einem Herz darin, als Hintergrundbild. Jetzt ENTSTEHT er: wenn die andere online kommt, wartet das Fenster drei Sekunden, beschlaegt, und dann malt sich das Herz hinein. Es bleibt, solange sie da ist, und verschwindet mit ihr. Deshalb ist es kein Bild mehr, sondern ein echtes (gebaut von fenster.js). Ein Bild kann man nur ein- und ausblenden; einen Pfad kann man ZEICHNEN. Das Herz ist dabei weiterhin kein Strich, sondern ein LOCH: es steht in einer Maske und nimmt den Beschlag dort weg, wo der Finger war. Ueber `stroke-dashoffset` waechst dieser Strich von null auf volle Laenge — und genau das sieht aus wie eine Hand, die malt. (`pathLength="100"` im SVG rechnet die Laenge auf 100 um, damit hier keine gemessene Zahl stehen muss, die bei jeder Formaenderung nachgezogen werden will.) Die Zeiten: 3 s warten — das ist der Wunsch, und er ist gut, denn sofort waere es eine Meldung und kein Atem. Dann 1,8 s beschlagen, ab 5,2 s malen, 2,2 s lang. Beim Gehen kein Warten: 1,2 s ausblenden, fertig. */ html.urlaub .fenster .hauch { position: fixed; left: 4%; bottom: 12%; width: 210px; height: 180px; pointer-events: none; opacity: 0; /* ohne Verzoegerung – wer geht, ist gleich weg */ transition: opacity 1.2s ease; } html.urlaub .fenster .hauch .beschlag { fill: #ffffff; fill-opacity: .5; } html.urlaub.nacht .fenster .hauch .beschlag { fill: #c8daf5; fill-opacity: .34; } /* Ungezeichnet: der Strich ist auf voller Laenge zurueckgeschoben, das Loch also null gross. Es liegt schlicht kein Herz im Beschlag. */ html.urlaub .fenster .hauch .herz { stroke-dasharray: 100; stroke-dashoffset: 100; } html.jemand-da.urlaub .fenster .hauch { opacity: 1; transition: opacity 1.8s ease 3s; } /* `forwards`, damit das Herz stehen bleibt, wenn es fertig gemalt ist. Geht sie, faellt die Klasse weg und mit ihr die Animation – der Strich springt auf 100 zurueck, das Herz ist also beim naechsten Mal wieder ungemalt. Genau richtig: es soll ja neu entstehen. */ html.jemand-da.urlaub .fenster .hauch .herz { animation: fenster-herz 2.2s ease-in-out 4.2s forwards; } @keyframes fenster-herz { to { stroke-dashoffset: 0; } } /* ---- Rahmen und Scheibe ---- Auf dem Glas liegen die zwei schraegen Lichtbahnen – die Spiegelung des Zimmers. Die steckt in `.glanz`, siehe oben. DER TRICK MIT DEN ECKEN: innen soll der Rahmen abgerundet sein, aussen nicht — sonst schaute an den Bildschirmecken die Landschaft hinter dem Rahmen hervor. CSS rechnet den inneren Radius aber immer als "aeusserer minus Randbreite". Deshalb ist das Element 24 px GROESSER als der Bildschirm (inset: -24px) und der Rand 24 px dicker: die aeussere Rundung liegt damit ausserhalb des Sichtbaren, und uebrig bleibt genau die innere. Sichtbare Rahmenbreite = 46 - 24 = 22 px. */ html.urlaub .fenster::after { content: ""; position: fixed; inset: -24px; pointer-events: none; border: 46px solid #e6d5bd; border-radius: 70px; /* innen also 70 - 46 = 24 px */ box-shadow: /* die Dichtung: eine schmale dunkle Kante innen am Rahmen */ inset 0 0 0 3px rgba(120, 96, 66, .38), /* und das Licht, das der Rahmen auf die Scheibe wirft */ inset 0 22px 34px -22px rgba(60, 44, 24, .45), inset 0 -22px 34px -22px rgba(60, 44, 24, .30); } /* Nachts beschlaegt die Scheibe eher, nicht weniger – nur sieht man den Hauch dann als kaltes Blau statt als Weiss. Das Herz bleibt ein Loch. */ html.urlaub.nacht .fenster::after { border-color: #2b3145; box-shadow: inset 0 0 0 3px rgba(10, 14, 26, .6), inset 0 22px 34px -22px rgba(0, 0, 0, .6), inset 0 -22px 34px -22px rgba(0, 0, 0, .45); } /* ---- Der Glanz auf der Scheibe ---- Die zwei schraegen Bahnen auf `.fenster::after` sind die Spiegelung des Zimmers: die steht, weil das Zimmer mitfaehrt. Was sich bewegen MUSS, ist die Spiegelung von draussen — Licht, das zwischen den Baeumen durchblitzt und ueber das Glas zieht. Ohne die war die Scheibe ein stehendes Bild, und genau daran hat man gemerkt, dass sich nichts tut. Ein eigenes im Fenster, weil beide Pseudo-Elemente von `.fenster` vergeben sind (Baum und Rahmen). Es liegt als letztes Kind ueber beiden — richtig so: die Spiegelung ist das Naechste, sie liegt auf dem Glas. Drei Bahnen in EINER Zeichnung, unregelmaessig verteilt ueber 300 vw. Dadurch kommt beim Vorbeiziehen mal eine allein, mal zwei kurz hintereinander — eine einzelne Bahn im Kreis waere ein Metronom. Bewegt wird wieder mit `transform`, also ohne einen einzigen neu gemalten Pixel. */ html.urlaub .fenster .glanz { position: fixed; /* Etwas ueber den Bildschirm hinaus, damit beim Wandern an keiner Kante ein Ende der Bahn auftaucht. */ inset: -8vh -8vw; pointer-events: none; /* Dieselben zwei schraegen Bahnen wie zuvor auf `.fenster::after`, nur etwas breiter (0→18 % statt 0→15 %, und die zweite 32→41 % statt 30,5→37 %). Sie standen dort fest; hier koennen sie sich ruehren. */ background: linear-gradient(114deg, rgba(255, 255, 255, .10) 0 18%, rgba(255, 255, 255, 0) 18.5% 32%, rgba(255, 255, 255, .055) 32.5% 41%, rgba(255, 255, 255, 0) 41.5%); animation: landschaft-glanz 17s ease-in-out infinite alternate; will-change: transform; } /* Nachts spiegelt die Scheibe kaelter und schwaecher – es ist ja auch weniger da, was sich spiegeln koennte. */ html.urlaub.nacht .fenster .glanz { background: linear-gradient(114deg, rgba(196, 216, 255, .065) 0 18%, rgba(196, 216, 255, 0) 18.5% 32%, rgba(196, 216, 255, .035) 32.5% 41%, rgba(196, 216, 255, 0) 41.5%); } /* Kein Durchziehen mehr. Der erste Versuch schickte drei eigene Lichtbahnen ueber die Scheibe, schnell, alle neun Sekunden. Abel: "diese Linien gefallen mir nicht." Und er hat recht — was da lief, war ein Effekt, kein Fenster. Die Spiegelung, die man in einem fahrenden Wagen wirklich sieht, ist die des INNENRAUMS, und die faehrt ja mit: sie zieht nicht vorbei, sie verschiebt sich nur leise, wenn der Wagen sich neigt oder das Licht draussen wechselt. Also dieselben zwei Bahnen wie vorher, nur zweieinhalb Prozent hin und her und dabei fuenf Prozent groesser werdend — ueber siebzehn Sekunden, hin und zurueck. Wer hinsieht, merkt es; wer nicht hinsieht, merkt nur, dass die Scheibe nicht tot ist. */ @keyframes landschaft-glanz { from { transform: translateX(-2.5%) scale(1); } to { transform: translateX(2.5%) scale(1.05); } } /* ---- Und ein Wanken, wie in einem Fahrzeug ---- Zwei Pixel, mehr nicht. Aber es ist der Unterschied zwischen "ein Bild zieht vorbei" und "ich sitze in etwas, das faehrt". Der Kniff: die Ebenen haben ihr `transform` schon fuer das Vorbeiziehen vergeben. CSS kennt daneben aber die EIGENSTAENDIGE Eigenschaft `translate` – die wird vor dem `transform` angewandt und laesst sich getrennt animieren. Zwei Bewegungen auf einem Element, ohne dass sie sich in die Quere kommen. Wer weiter weg ist, wankt weniger: 0,8 px in der Ferne, 1,6 px nah, 2,4 px direkt am Fenster. Dieselbe Parallaxe wie beim Tempo. Und alle im selben Takt — in einem Fahrzeug schaukelt draussen alles gemeinsam. */ @keyframes landschaft-wanken { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--wanken); } } /* Wer keine Bewegung will, bekommt die Landschaft als Bild: Huegel, Baeume und Wiese bleiben stehen, wo sie sind. Es fehlt nur die Fahrt. */ @media (prefers-reduced-motion: reduce) { /* Der Glanz BLEIBT – er ist die Spiegelung im Glas und gehoert zum Bild, nicht zur Bewegung. Nur ruehren soll er sich nicht mehr. (Beim ersten Versuch stand hier `display: none`; damals war der Glanz eine durchziehende Lichtbahn und ohne Fahrt sinnlos. Jetzt waere die Scheibe ohne ihn einfach leer.) */ html.urlaub .fenster .glanz { animation: none; } /* Der Hauch bleibt – er ist die Nachricht, nicht die Bewegung. Nur gemalt wird er nicht mehr, er ist gleich da. */ html.jemand-da.urlaub .fenster .hauch { transition-duration: .3s; transition-delay: 3s; } html.jemand-da.urlaub .fenster .hauch .herz { animation: none; stroke-dashoffset: 0; } html.urlaub::before, html.urlaub::after { animation: none; } /* Der nahe Baum stuende ohne Fahrt mitten im Fenster und verdeckte die halbe Aussicht – ohne Bewegung hat er keinen Sinn. Also ganz weg. */ html.urlaub .fenster::before { display: none; } } /* ---- Im Urlaub kein Baer ---- Wer aus einem Fenster schaut, steht davor und nicht darin. ACHTUNG: `#bear` gibt es auf DREI Seiten. Auf menu.html und index.html ist er Schmuck – auf willkommen.html ist er das Spiel. Ein schlichtes `html.urlaub #bear { display: none }` haette mitten im Galgenmaennchen den Baeren abgeschaltet. Deshalb entscheidet nicht diese Datei, sondern die Seite selbst: nur wer sich mit `data-baer="deko"` als Schmuck ausweist, wird versteckt. `display: none` und nicht `hidden`: das Attribut verliert gegen ein `display: flex` aus einer anderen Regel – deshalb steht in mobil.css eigens ein globales `[hidden] { display: none !important }`. Die Gedankenblase (Spotify) bleibt, ihr Tropfen aber nicht: er zeigte auf den Baeren, und der ist nun nicht mehr da. */ html.urlaub body[data-baer="deko"] #bear { display: none !important; } html.urlaub body[data-baer="deko"] .blase-tropfen { display: none !important; } /* ---- Die Sterne gehoeren nach DRAUSSEN ---- #nachthimmel ist eine Leinwand ueber den GANZEN Bildschirm (inset: 0), und nacht.js gibt ihr `z-index: 0`. Am Pfirsichhimmel ist das richtig: dort ist sie das Hinterste, was es gibt. Hier nicht — null ist groesser als jede unserer Ebenen, die Sterne lagen also vor der Landschaft UND vor dem Fensterrahmen. Ueber den Rahmen gemalte Sterne sehen aus, als schwebten sie im Zimmer. Also nach ganz hinten, hinter die fernen Huegel (-4). Weiter zurueck geht nicht sinnvoll: dahinter kommt nur noch der Himmel selbst, und der ist der Hintergrund des und damit die Leinwand. Das Abschneiden unten bleibt trotzdem noetig. Die Huegel decken zwar ab -4 alles zu, aber sie sind nur 60 px hoch; darunter (Wiese) laege wieder freie Sicht auf die Leinwand, und dort haetten Sterne nichts zu suchen. Die Zahl ist dieselbe wie der Horizont im Verlauf oben — wer sie dort verschiebt, muss sie hier mitnehmen. */ html.urlaub #nachthimmel { z-index: -5; clip-path: inset(0 0 230px 0); } /* Der Verlauf am unteren Rand ist fuer den Pfirsich gemacht und legt sich sonst als rosa Schleier ueber die Wiese. Ganz weg soll er aber nicht: ein wenig Dunkel unten gibt der Wiese Tiefe. */ html.urlaub .ground-fade { background: linear-gradient(180deg, transparent, rgba(38, 52, 26, .26)) !important; } html.urlaub.nacht .ground-fade { background: linear-gradient(180deg, transparent, rgba(4, 8, 14, .5)) !important; } /* ================================================================ Am Handy Ein Handy ist hoch und schmal. Dieselben Baender waeren dort ein riesiger Himmel ueber einer Wiese, die den halben Bildschirm einnimmt. Also alles auf 0,73 — genau der Faktor, mit dem auch die Kacheln kleiner werden. Deshalb stimmen Horizont und Wiesenkante weiterhin mit den Kanten in den Zeichnungen ueberein, ohne dass es eigene SVGs braucht (preserveAspectRatio='none' zieht sie einfach mit). ================================================================ */ @media (max-width: 700px) { html.urlaub { background: radial-gradient(circle at 82% 13%, rgba(255, 246, 214, .70) 0%, rgba(255, 246, 214, 0) 22%), linear-gradient(180deg, #74b0d8 0%, #a2cfe6 36%, #dde5db calc(100% - 168px), #a4bc8c calc(100% - 168px), #93ae78 calc(100% - 88px), #86a46b calc(100% - 88px), #6f8f56 100%); background-attachment: fixed; } html.urlaub.nacht { background: radial-gradient(circle at 82% 13%, rgba(226, 236, 255, .42) 0%, rgba(226, 236, 255, 0) 6%), radial-gradient(circle at 82% 13%, rgba(180, 205, 250, .12) 0%, rgba(180, 205, 250, 0) 20%), linear-gradient(180deg, #050a1c 0%, #0c1531 36%, #142343 calc(100% - 168px), #111d33 calc(100% - 168px), #0c1626 calc(100% - 88px), #0a1421 calc(100% - 88px), #070f18 100%); background-attachment: fixed; } /* 162 + (44 - 44*52/60) = 162 + 5,9 = 168 – wieder genau der Horizont. */ html.urlaub::before { --kachel: 1080px; bottom: 162px; /* Kachel und Zeit im selben Verhaeltnis kleiner – sonst zoege die Landschaft am Handy ploetzlich schneller vorbei. */ animation-duration: 76s, 2.7s; height: 44px; background-size: var(--kachel) 44px; } /* 82 + (34 - 34*38/46) = 82 + 5,9 = 88 – die Wiesenkante. */ html.urlaub::after { --kachel: 810px; bottom: 82px; animation-duration: 29s, 2.7s; height: 34px; background-size: var(--kachel) 34px; } html.urlaub #nachthimmel { clip-path: inset(0 0 168px 0); } /* Der nahe Baum kleiner – auf 375 px Breite wuerde ein 1500er Stamm das ganze Fenster zumachen. */ html.urlaub .fenster::before { --dicht: 1000px; height: 200px; background-size: var(--dicht) 200px; } /* Und ein schmalerer Rahmen: 14 px statt 22. Wieder 24 px Ueberstand, also Rand 38 und Radius 24 + 38 = 62. */ html.urlaub .fenster::after { border-width: 38px; border-radius: 62px; } }