1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Skala mit Farbverlauf

Dieses Thema im Forum "JavaScript" wurde erstellt von lidZ1, 21 September 2017.

  1. lidZ1

    lidZ1 Neues Mitglied

    Registriert seit:
    21 September 2017
    Beiträge:
    5
    Punkte für Erfolge:
    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
     

    Anhänge:

    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Aaron3219

    Aaron3219 Aktives Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    374
    Punkte für Erfolge:
    28
    lidZ1 gefällt das.
  3. lidZ1

    lidZ1 Neues Mitglied

    Registriert seit:
    21 September 2017
    Beiträge:
    5
    Punkte für Erfolge:
    1
    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. Aaron3219

    Aaron3219 Aktives Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    374
    Punkte für Erfolge:
    28
    Ja. Du musst dann ein bisschen mit Prozenten und calc() rechnen.
     
  5. lidZ1

    lidZ1 Neues Mitglied

    Registriert seit:
    21 September 2017
    Beiträge:
    5
    Punkte für Erfolge:
    1
    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. Tronjer

    Tronjer Moderator Team Moderator

    Registriert seit:
    8 Oktober 2010
    Beiträge:
    4.902
    Punkte für Erfolge:
    83
    In #pfeil nicht die Start- sondern die Endposition angeben und darauf basierend die Animation aufbauen.
     
    lidZ1 gefällt das.
  7. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    602
    Punkte für Erfolge:
    43
  8. lidZ1

    lidZ1 Neues Mitglied

    Registriert seit:
    21 September 2017
    Beiträge:
    5
    Punkte für Erfolge:
    1
    Perfekt vielen Dank.

    Eine letzte Frage.....

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

    Beispiel: <div style=" ">

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

    to {
    left:15%;
    }
    }
     
  9. Aaron3219

    Aaron3219 Aktives Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    374
    Punkte für Erfolge:
    28
    lidZ1 gefällt das.
  10. lidZ1

    lidZ1 Neues Mitglied

    Registriert seit:
    21 September 2017
    Beiträge:
    5
    Punkte für Erfolge:
    1
    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
     
  11. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    602
    Punkte für Erfolge:
    43
  12. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    602
    Punkte für Erfolge:
    43