Komplexe Animation in puren HTML

[Mathias]

Es gehört nicht direkt hier hin, aber ich will es trotzdem veröffentlichen, um zu zeigen, was in HTML möglich ist.
Bis vor kurzem dachte ich, mit HTML sei es nur möglich ein paar Widgets mit Container formatiert darzustellen. Dabei kann man die komplexesten Animationen damit machen.
Vorher dachte ich, dies sei nur mit JavaScript möglich.
Wen ich den Code im Anhang angucke, sieht mir das nach einer Art Vermischung zwischen HTML und JavaScript aus.
Anscheinend habe ich da etwas verpasst.

Hier noch die original Source: https://codepen.io/danwilson/pen/OJqZvLW

[Jorg3000]

Wen ich den Code im Anhang angucke, sieht mir das nach einer Art Vermischung zwischen HTML und JavaScript aus.

Hi!
Da ist kein JavaScript enthalten!
Die Animation wird lediglich per CSS erzeugt, was tatsächlich beeindruckend ist. Moderne Browser können wirklich eine ganze Menge.

Das Geheimnis liegt in der calc()-Funktion von CSS https://developer.mozilla.org/en-US/docs/Web/CSS/calc
sowie all den relativen Größenangaben in Prozent, wodurch bei Änderung eines Elements automatisch alle Bezugselemente mit geändert werden,
sowie hier insbesondere den mächtigen Animationsanweisungen in CSS https://developer.mozilla.org/en-US/doc ... /animation

Das schöne Beispiel ist schon recht speziell. Würde man z.B. eine User-Interaktion (onClick) einbauen wollen, bräuchte man doch JavaScript, welches dann das CSS oder DOM (HTML) manipuliert.
Wenn ich die Aufgabe hätte, eine solche Animation mit Lazarus zu erstellen, wüsste ich nicht mal wie ich überhaupt anfangen sollte.
Grüße, Jörg

[Mathias]

Wenn ich die Aufgabe hätte, eine solche Animation mit Lazarus zu erstellen, wüsste ich nicht mal wie ich überhaupt anfangen sollte.

Mit der LCL wird es kaum gehen. Ich denke, da müsste man zu Coiro oder gar einfachen OpenGL greifen.
Ausser die BGR-Package hat da noch etwas versteckt.