Skala mit Farbverlauf

html.de-Forum JavaScript
1

Hallo zusammen,

könnte mir jemand dabei helfen eine Skala mit einem Farbverlauf (grün – orange – rot) von links nach rechts anzufertigen?
Wenn man die Seite öffnet soll sich über der Skala ( links nach rechts) ein Pfeil auf eine definierte Position bewegen, als Markierung. (siehe Anhang)
Ist das so überhaupt möglich?

Vielen Dank für die Unterstützung

2

Ja, dafür brauchst du aber kein Javascript.
Ist alles mit CSS möglich.
Farbverlauf:
https://www.mediaevent.de/css/gradient.html

Beispiel für das Bewegen des Pfeils:
https://www.w3schools.com/cssref/css3_pr_animation-direction.asp

3

Ist es mit dieser Methode auch möglich wenn ich meine Skala von 0 - 200 erstelle und der „Pfeil“ sich auf genau 115 bewegen soll, unabhängig von der Bildschirmauflösung/Fenstergröße?

4

Ja. Du musst dann ein bisschen mit Prozenten und calc() rechnen.

5

Vielen Dank erstmal für die Antwort. Das hat mir schon sehr geholfen.

Die Skala mit den werten habe ich bereits hinbekommen.
Der Pfeil bewegt sich auch schon, nur springt er immer an seine Startposition zurück.
Was muss ich machen, damit der Pfeil an der gewünschten stelle bleibt?

#pfeil {
height:112px;
width:104px;
background-image: url(„bild“);
position: relative;
margin:2em 0;
animation-name:meine-animation;
animation-duration:4s;
animation-iteration-count:1;
}

@keyframes meine-animation {
from {
left:0;
}

to {
    left:600px;
}

}

6

In #pfeil nicht die Start- sondern die Endposition angeben und darauf basierend die Animation aufbauen.

7

Perfekt vielen Dank.

Eine letzte Frage…

Kann ich die @Keyframes anweisung auch direkt in eine Style-Anweisung aufnehmen?

Beispiel:

@keyframes meine-animation {
from {
left:0;
}

to {
    left:15%;
}

}

8

Ja du musst sie einer Klasse zuweisen
https://www.mediaevent.de/css/animation.html

Edit:
Wenn du sie richtig inline reinschreiben willst, geht das leider nicht

9

Gibt es eine Möglichkeit das ganze etwas dynamischer zu machen?
z.B. wenn ich eine Seite öffne habe ich einen anderen „to“ wert als auf einer anderen Seite, ohne für jede „seite“ mit einem Pfeil ein eigenes Keyframe zu erstellen