Strassenmarkierung massstaeblich statt Baumreihe
Die Baumkronen neben der Fahrbahn sahen aus wie Erbsen und nicht wie eine Allee - sie sind raus. Stattdessen ist die Markierung jetzt richtig. Massstab: der Wagen ist 4,65 m lang und misst im Bild 488 Einheiten, eine Einheit ist also knapp ein Zentimeter (105 je Meter). Danach richten sich alle Masse: rechts Fahrbahnbegrenzung, durchgezogen links Leitlinie, 6 m Strich auf 12 m Luecke (630 auf 1260 Einheiten) beide 0,12 m breit, also 12,6 Einheiten Der Strich ist damit laenger als das Bild hoch ist, und zwischen zwei Strichen liegt mehr als eine Bildhoehe - genau so sieht eine Landstrasse aus dem Auto auch aus. Sichtbar ist eine Markierung dadurch etwa zwei Drittel der Zeit. Die Geschwindigkeit ist ebenfalls abgeleitet und nicht geraten: 875 Einheiten je Sekunde sind gut 30 km/h. Der Fahrtwind laeuft jetzt genauso schnell - ein Streifen, der die Fahrbahnmarkierung ueberholt, faellt sofort auf. Nicht massstaeblich bleibt die Breite der Fahrbahn: neben dem Wagen sind zwanzig Zentimeter Platz statt der drei Viertel Meter einer echten Spur. Dafuer muesste das Fahrzeug halb so gross gezeichnet werden, und darum geht es auf dieser Kachel nicht. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
+25
-41
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
+25
-27
@@ -113,36 +113,34 @@
|
||||
<!-- Die Straße, über die der Wagen fährt. Ganz zuerst
|
||||
gezeichnet, damit alles andere darauf liegt.
|
||||
|
||||
Der Belag deckt die ganze Zeichenfläche, die
|
||||
Fahrbahnmarkierungen laufen in den beiden Randstreifen
|
||||
neben den Rädern - dort ist Platz, ohne dem Fahrzeug
|
||||
ins Bild zu geraten. Die Striche wandern um genau eine
|
||||
Strich-Lücke-Länge; danach steht das Muster wieder so
|
||||
da wie zuvor, und die Schleife ist unsichtbar.
|
||||
Markiert wie eine deutsche Landstraße und maßstäblich
|
||||
zum Fahrzeug: der Wagen ist 4,65 m lang und misst hier
|
||||
488 Einheiten, eine Einheit ist also knapp ein
|
||||
Zentimeter (105 Einheiten je Meter).
|
||||
|
||||
Dasselbe bei den Bäumen: ihr Abstand ist der Weg einer
|
||||
Umdrehung. Die beiden Reihen laufen versetzt und
|
||||
verschieden schnell, sonst fährt man durch eine Allee
|
||||
aus Zwillingen. -->
|
||||
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. -->
|
||||
<g class="strasse" aria-hidden="true">
|
||||
<rect class="belag" x="-16" y="-8" width="256" height="516"/>
|
||||
<g class="markierung">
|
||||
<line x1="-2" y1="-60" x2="-2" y2="560"/>
|
||||
<line x1="226" y1="-60" x2="226" y2="560"/>
|
||||
</g>
|
||||
<g class="baumreihe links">
|
||||
<circle class="baum" cx="-9" cy="-100" r="6.5"/>
|
||||
<circle class="baum" cx="-8" cy="60" r="5.5"/>
|
||||
<circle class="baum" cx="-9" cy="220" r="6.5"/>
|
||||
<circle class="baum" cx="-8" cy="380" r="6"/>
|
||||
<circle class="baum" cx="-9" cy="540" r="6.5"/>
|
||||
</g>
|
||||
<g class="baumreihe rechts">
|
||||
<circle class="baum" cx="233" cy="-20" r="6"/>
|
||||
<circle class="baum" cx="233" cy="140" r="6.5"/>
|
||||
<circle class="baum" cx="232" cy="300" r="5.5"/>
|
||||
<circle class="baum" cx="234" cy="460" r="6.5"/>
|
||||
</g>
|
||||
<line class="leitlinie" x1="-6" y1="-1900" x2="-6" y2="2400"/>
|
||||
<line class="begrenzung" x1="230" y1="-8" x2="230" y2="508"/>
|
||||
</g>
|
||||
|
||||
<!-- Fahrtwind: zeigt an, dass das Fahrzeug gerade rollt.
|
||||
|
||||
Reference in New Issue
Block a user