diff --git a/css/solar.css b/css/solar.css index 92ec7f5..18edef6 100644 --- a/css/solar.css +++ b/css/solar.css @@ -1132,19 +1132,16 @@ input[type='range']::-webkit-slider-runnable-track { } /* --- Strasse ------------------------------------------------------------ - Sichtbar nur waehrend der Fahrt. Sie traegt die eigentliche Bewegung: der - Belag dunkelt die Flaeche ab, die Markierungen laufen in den Randstreifen - neben den Raedern, die Baeume ziehen aussen vorbei. + Sichtbar nur waehrend der Fahrt, und sie traegt die eigentliche Bewegung. - Beide Schleifen sind so gebaut, dass sie sich selbst treffen: die Striche - wandern um eine Strich-Lueckenlaenge (26 + 20 = 46), die Baumreihen um - ihren Abstand (160). Nach einem Durchlauf steht das Muster wieder wie - zuvor - deshalb sieht man keinen Sprung. + Die Masse stehen im SVG und stammen von der echten Strasse: 0,12 m + Strichbreite, 6 m Strich auf 12 m Luecke, rechts durchgezogen. Hier bleibt + die Bewegung: eine Umdrehung ist eine Strich-Lueckenlaenge (1890 + Einheiten), in 2,16 s - das sind 875 Einheiten je Sekunde oder gut 30 km/h + bei einem Massstab von 105 Einheiten je Meter. - Alle drei laufen mit derselben Geschwindigkeit von rund 180 Einheiten je - Sekunde: Markierungen und Baeume gehoeren zur selben Landschaft, und ein - Baum, der langsamer zurueckbleibt als der Strich daneben, faellt sofort - auf. */ + Nur die Leitlinie laeuft. Die durchgezogene Linie hat nichts, woran man + Bewegung saehe - genau wie in echt. */ .skoda-auto .strasse { display: none; } .skoda-auto.faehrt .strasse { display: block; } @@ -1152,30 +1149,19 @@ input[type='range']::-webkit-slider-runnable-track { fill: rgba(8, 10, 12, 0.35); } -.skoda-auto .strasse .markierung line { - stroke: rgba(232, 237, 233, 0.35); - stroke-width: 3; - stroke-dasharray: 26 20; - animation: skoda-markierung 0.26s linear infinite; +.skoda-auto .strasse line { + stroke: rgba(232, 237, 233, 0.42); + stroke-width: 12.6; /* 0,12 m */ } -.skoda-auto .strasse .baum { - fill: rgba(96, 140, 104, 0.55); - stroke: rgba(52, 84, 60, 0.7); - stroke-width: 1.2; +.skoda-auto .strasse .leitlinie { + stroke-dasharray: 630 1260; /* 6 m Strich, 12 m Luecke */ + animation: skoda-leitlinie 2.16s linear infinite; } -.skoda-auto .strasse .baumreihe { animation: skoda-baeume 0.9s linear infinite; } -/* Die rechte Reihe etwas langsamer und mit Vorlauf - sonst stehen sich die - Baeume paarweise gegenueber. */ -.skoda-auto .strasse .rechts { animation-duration: 1.05s; animation-delay: -0.4s; } -@keyframes skoda-markierung { +@keyframes skoda-leitlinie { from { transform: translateY(0); } - to { transform: translateY(46px); } -} -@keyframes skoda-baeume { - from { transform: translateY(0); } - to { transform: translateY(160px); } + to { transform: translateY(1890px); } } /* --- Fahrtwind ---------------------------------------------------------- @@ -1199,12 +1185,11 @@ input[type='range']::-webkit-slider-runnable-track { stroke-linecap: round; animation: skoda-fahrtwind 1.1s linear infinite; } -/* Vier Spuren, jede mit eigenem Takt und Vorlauf. Der Wind zieht etwa - anderthalbmal so schnell wie die Landschaft: schneller, weil Luft ueber den - Wagen streicht, aber nicht so viel schneller, dass die beiden Bewegungen - auseinanderfallen. */ -.skoda-auto .fahrtwind .b1 { animation-duration: 2.40s; animation-delay: -0.30s; opacity: .5; } -.skoda-auto .fahrtwind .b6 { animation-duration: 2.60s; animation-delay: -1.70s; opacity: .5; } +/* Vier Spuren, jede mit eigenem Takt und Vorlauf. Sie laufen so schnell wie + die Strasse darunter - ein Streifen, der die Fahrbahnmarkierung ueberholt, + faellt sofort auf. */ +.skoda-auto .fahrtwind .b1 { animation-duration: 0.78s; animation-delay: -0.30s; opacity: .5; } +.skoda-auto .fahrtwind .b6 { animation-duration: 0.86s; animation-delay: -0.55s; opacity: .5; } /* Ueber dem Fahrzeug: heller, duenner, durchsichtiger. Der Wind zieht ueber das Blech hinweg - er soll sich darauf legen, nicht hineinschneiden. Die @@ -1214,8 +1199,8 @@ input[type='range']::-webkit-slider-runnable-track { stroke: rgba(232, 237, 233, 0.85); stroke-width: 3; } -.skoda-auto .fahrtwind .b7 { animation-duration: 2.30s; animation-delay: -0.60s; opacity: .34; } -.skoda-auto .fahrtwind .b10 { animation-duration: 2.70s; animation-delay: -1.20s; opacity: .34; } +.skoda-auto .fahrtwind .b7 { animation-duration: 0.74s; animation-delay: -0.20s; opacity: .34; } +.skoda-auto .fahrtwind .b10 { animation-duration: 0.82s; animation-delay: -0.45s; opacity: .34; } @keyframes skoda-fahrtwind { from { transform: translateY(0); } @@ -1231,10 +1216,9 @@ input[type='range']::-webkit-slider-runnable-track { transform: translateY(250px); opacity: .45; } - /* Strasse und Baeume bleiben stehen - zu sehen ist dann eine Standaufnahme + /* Auch die Leitlinie bleibt stehen - zu sehen ist dann eine Standaufnahme statt einer Fahrt, und das Abzeichen "unterwegs" sagt den Rest. */ - .skoda-auto .strasse .markierung line, - .skoda-auto .strasse .baumreihe { + .skoda-auto .strasse .leitlinie { animation: none; } } diff --git a/restricted/skoda.php b/restricted/skoda.php index 850e292..04cb382 100644 --- a/restricted/skoda.php +++ b/restricted/skoda.php @@ -113,36 +113,34 @@ + rechts Fahrbahnbegrenzung, durchgezogen + links Leitlinie, 6 m Strich auf 12 m Lücke + (630 und 1260 Einheiten) + beide 0,12 m breit, also 12,6 Einheiten + + Der Strich ist damit länger als das Bild hoch ist - + genau so sieht es aus dem Auto auch aus. Sichtbar ist + eine Markierung dadurch etwa zwei Drittel der Zeit. + + Nicht maßstäblich ist die Breite der Fahrbahn: neben + dem Wagen bleiben zwanzig Zentimeter Platz statt der + drei Viertel Meter einer echten Spur. Dafür müsste das + Fahrzeug halb so groß gezeichnet werden, und darum + geht es auf dieser Kachel nicht. + + Die Leitlinie wandert um genau eine Strich-Lücken- + Länge (1890); danach steht das Muster wieder so da wie + zuvor, und die Schleife ist unsichtbar. Bei 875 + Einheiten je Sekunde entspricht das gut 30 km/h. -->