Komplexe Animation in puren HTML

Antworten
Mathias
Beiträge: 6204
Registriert: Do 2. Jan 2014, 17:21
OS, Lazarus, FPC: Linux (die neusten Trunk)
CPU-Target: 64Bit
Wohnort: Schweiz

Komplexe Animation in puren HTML

Beitrag von 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
Dateianhänge
index.html.zip
(1019 Bytes) 102-mal heruntergeladen
Mit Lazarus sehe ich grün
Mit Java und C/C++ sehe ich rot

Benutzeravatar
Jorg3000
Lazarusforum e. V.
Beiträge: 170
Registriert: So 10. Okt 2021, 10:24
OS, Lazarus, FPC: Win64
Wohnort: NRW

Re: Komplexe Animation in puren HTML

Beitrag von Jorg3000 »

Mathias hat geschrieben:
Mo 5. Feb 2024, 09:40
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
Beiträge: 6204
Registriert: Do 2. Jan 2014, 17:21
OS, Lazarus, FPC: Linux (die neusten Trunk)
CPU-Target: 64Bit
Wohnort: Schweiz

Re: Komplexe Animation in puren HTML

Beitrag von 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.
Mit Lazarus sehe ich grün
Mit Java und C/C++ sehe ich rot

Antworten