CSS Animation Rohrleitung

[jockele]

mir ging es wie Dir, wollte einfach nicht klappen. Hab mich dann auf die alten Tugenden besonnen :



Und schon gings nach ein wenig rumprobieren :-)

[AxelH]

Salü, das gefällt mir sehr gut. Ich poppel jetz schon eine ganze Weile herum aber ich krieg die Animation nicht "von oben nach unten"🤬🤬
Das mit dem Background habe ich noch gerafft

repeating-linear-gradient(0deg, red 10px, #d8a0a6 20px, red 40px)

Aber die Animation ist zu hoch für mich....

0% {background-position: 100% 0%}
0% {background-size: 400%}
100% {background-position: 100% 100%}
100% {background-size: 400%}

woran liegt mein Denkfehler?

Grüße

Axel

[jockele]

Die Animation gemäß meinem Code läuft von rechts nach links. Beim Erstellen des Universalelements die Breite relativ groß wählen , die Höhe sind bei mir immer nur 10px. Damit sollte in dem Balken schon mal die Animation laufen.

Für die Bewegung von oben nach unten einfach das Universalelement drehen über den Parameter Drehung, bei mir hab ich das jeweils im dynamischen Design gemacht.

Hatte das am Anfang auch so wie Du gedacht, aber dafür bräuchtest ja diverse Farbverläufe sowie diverse Animationen. Daher einfach nochmal mit meinen Codes probieren

[oefchen]

Aber die Animation ist zu hoch für mich....

0% {background-position: 100% 0%}
0% {background-size: 400%}
100% {background-position: 100% 100%}
100% {background-size: 400%}

woran liegt mein Denkfehler?

Hi Axel, hast Du eine neue Animation erstellt ?
Da dann den code einfügen und über die Regler und Auswahlmöglichkeiten
die Eigenschaften anpassen !
Im U-element wählst dann diese Animation aus.

[AxelH]

Hi Frank,

neue Hintergrungfarbe sowie neue Animation angelegt....und natürlich neues U Element.
mite Bachground position bin ich mir aber nicht sichr, hatte hier schon top und bottom eingefügt.

[oefchen]

Dann hier mal Screens... oben rechts die neue Hintergrundfarbe auswählen (Bild 3)
unten links die neue Animation

streifen1.PNG
in die neue Animation den Code einfügen...speichern

streifen2.PNG

Hintergrundfarbe....repeating Code einfügen...speichern
streifen3.PNG

das solltes gewesen sein

[jockele]

genau, so müsste sich das von rechts nach links bewegen.

Falls andere Richtung gewünscht über den Parameter Drehung im ersten Screenshot entsprechend den Bedürfnissen das komplette Visuelement drehen

[AxelH]

Alles klar, dann mit Drehung :-) Danke

[AxelH]

sodele, jetzt habe ich aus zwei Universalfeldern eine Flußrichtung gebaut....Fluß.JPG
einmal das Pattern in der Hintergrundfarbe mit 60deg (oben) und mit 120deg (unten) aufgebaut.
Kann ich die animationsgeschwindigkeit (Pfeilgeschwindigkeit) aus einen K0 Wert setzen?
Ich würde gerne die PV Anlage visualisieren und die Ladeleistung auch über die Animationsgeschwindigkeit darstellen....

[uzi10]

Wie hast du das Feld erzeugt?

[jockele]

Kann ich die animationsgeschwindigkeit (Pfeilgeschwindigkeit) aus einen K0 Wert setzen?

probiers doch einfach mal aus, denke wenn Du ein IKO erstellst und entsprechend aus der Ladeleistung umrechnest auf einen proportionalen Sekundenwert sollte das schon gehen. Habs aber noch nicht probiert ob das Feld einen {#} annimmt

[jockele]

Gleichzeitig wäre es noch interessant ob jemand eine Möglichkeit kennt die Geschwindigkeit gleichmäßig einstellen zu können.

Aktuell geht das ja über background-position und dabei mit Prozentangaben. D.h. je nach Größe des Universalelements ergeben sich unterschiedliche Geschwindigkeiten bei gleicher Animationsdauer. Evtl. hat hier noch jemand eine Idee wie man die Verschiebung mit z.B. Pixel/Sekunde definieren könnte anstatt mit %-Angaben???

[AxelH]

Wie hast du das Feld erzeugt?

Es sind zwei Felder aneinander positioniert.Eines oben und eines darunter.
Das Hintergrundbild FPeil oben:
repeating-linear-gradient(60deg, #ff0800 10px, #d8a0a6 20px, #ff0800 40px)
Pfeil unten:
repeating-linear-gradient(120deg, #ff0800 10px, #d8a0a6 20px, #ff0800 40px)

[AxelH]

probiers doch einfach mal aus, denke wenn Du ein IKO erstellst und entsprechend aus der Ladeleistung umrechnest auf einen proportionalen Sekundenwert sollte das schon gehen. Habs aber noch nicht probiert ob das Feld einen {#} annimmt

jop, das mit {#} funktioniert (zumindest erst einmal in der Vorschau).....
Werde jetz das ganze mit der prozentualen Ladeleistung versuchen, aber wahrscheinlich erst am Sonntag, am Samstag muß ich schweißen :-)