HTML animierter Ablaufplan ...

[Kinemore]

Hallo,

ich möchte für meine Webseite einen Lebenszyklus animiert darstellen. Aktuell habe ich es sehr einfach mittels Blender als *.mp4 realisiert. Leider ist dies nicht so schön geworden ...

Gibt es eine Lösung eine Grafik mittels html zu animieren (ähnlich wie früher mit Flash) ? Ich habe 5 Zustände und möchte dazwischen die Pfeile dynamische aufleuchten lassen. Idealer Weise sollte dies mit transparenten Hintergrund und skalierbar erfolgen ...

Ich hatte auch schon nach Lösungen es aus PowerPoint zu exportieren gesucht ... leider sind die Ergebnisse die ich gefunden mit Abo/Kosten verbunden, die ich in der "Lernphase" gern vermeiden möchte.


Vielen Dank im Voraus!

 

[Cool Master]

Schau mal hier vorbei:

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation/Animation

 

[berto]

Es kommt darauf an ob was lernen willst dabei oder einfach ein ergebnis.

Wenn du was lernen willst, dann schau dir wie schon verlinkt ein bisschen CSS und evtl. JavaScript an.
Wenn du ein ergebnis willst, dann einfach chat-gpt fragen meiner Meinung nach. So ein snippet programmiert der in 5 sekunden

 

[Kinemore]

okay ... ich werde es mir mal anschauen. Bis es so aussieht wie es mich vorstelle wird wohl viel Lernzeit ins Land gehen ... ;-)

In meiner "Traumwelt" soll mein Diagramm ähnlich dem angehängten Bild (nur als Bsp.) aussehen und der Reihe nach sich einfärben.

PS: damit es kein Ärger wegen des Bildes gibt hier der Link:
https://media.istockphoto.com/id/14...=Gu9PPtJDWnH_-kXH7DoJP2VhwIIJYgrkP0LZA8b37hA=

 

[floq0r]

Stichworte für CSS rules:
animation, keyframes
filter mit grayscale
opacity
Wenn mans mal halbwegs überrissen hat ist das schnell gemacht, ist wenig text und lässt sich gut und schnell anpassen wenn man es über den Inspector des Browsers (FF oder Chromium) macht.

 

[Kinemore]

Vielen Dank.

Gibt es denn Tools mit denen ich die genannte Effekte per Drag&Drop erstellen kann ?

 

[sh.]

Gibt es denn Tools

ChatGPT

 

[Kinemore]

... so ein kleines UpDate. Meine Versuche mit ChatGPT waren nicht so erfolgreich. Der Ablauf wurde zwar richtig dargestellt aber das Design entspricht nicht ganz meinen Vorstellungen ;-)

Aktuell versuche ich einen Weg mittels Adobe Illustrator + After Effekt und einem *.svg export. Laut den Video Tutorials die man im Netz findet scheint dies vielversprechend zu sein. Leider hat das ganze aber nix mehr mit "kostenlos" oder "open Source" zu tun.

 

[Cool Master]

Dann nutze GIMP statt Adobe