lottiefile json format

Robert0001 · 21. Dezember 2022

hallo ich habe eine frage

ich habe mir eine json lottie file von
lottie bearbeitet und als json runtergeladen.

jetzt ist es so, dass das format für mich unpassend ist und ich zuviel abstände nach oben und habe..
es ist ein quadrat..

ich möchte die abstände jedoch minimieren, damit es in meinen container passt.

wie mach ich das?

<div class="lottie-ki">
<lottie-player src="./assets/lottie/ki.json" speed="1" loop autoplay></lottie-player>
</div>

.lottie-ki > lottie-player {
transform: rotate(90deg);
height: 500px;
padding: 0;
margin: 0;
}

Ergänzung (21. Dezember 2022)

hab es gerade mit margin: -200px probiert - scheint zu funktionieren.. ist das der richtige weg oder habt ihr andere möglichkeiten die eventuell besser sind?

madmax2010 · 21. Dezember 2022

ich sehe da kein json, nur html und css.
finde vielleicht mal heraus wo der abstand her kommt. negative margin scheint mir nicht der Weg

Robert0001 · 21. Dezember 2022

json:
bild anbei

Ergänzung (21. Dezember 2022)

Ergänzung (21. Dezember 2022)

sry war unabsichtlich das so zu posten!!!

Mordi · 21. Dezember 2022

@Robert0001
Kannst du deinen Beitrag bitte so editieren, dass der Inhalt der Datei in einem Codeblock ist?

madmax2010 · 21. Dezember 2022

alternativ pastebin.com

das ist noch immer keine json...

aronlad · 21. Dezember 2022

.lottie-ki

Welche Maße/Paddings hat denn der Container?

Robert0001 · 21. Dezember 2022

Mordenkainen schrieb:
@Robert0001
Kannst du deinen Beitrag bitte so editieren, dass der Inhalt der Datei in einem Codeblock ist?
Anhang anzeigen 1300675

diese einstellung habe ich nicht gesehen.. natürlich wird sofort umgesetzt

Ergänzung (21. Dezember 2022)

aronlad schrieb:
Welche Maße/Paddings hat denn der Container?

der container kann so groß sein wie er will.. dieses lottie file hat seine abmessungen und da ich nicht sehr mit json, javascript bewandert bin, noch nicht, weiß ich nicht wie ich die json von der height, width trimme... funktioniert das vielleicht mit einem adobe programm? hab alle programme, oder wo finde ich ein attribut in der json svg um das zu machen`? ich habe keines gefunden...

also ich freu mich über jede hilfreiche antwort, von der auch andere lernen können

Iqra · 22. Dezember 2022

1. Das Teil nennt sich SVG (image/svg+xml). JSON ist was anderes.
2. Ein Tag namens lottie-player gibt es nicht. SVG kann eingebettet werden -einfach inline in die (x)html Datei -- oder über <object data="ki.svg" /> oä referenziert werden. Dem kann man dann aber natürlich eine ID vergeben. Auch wenn ich mit einem - in der ID extrem vorsichtig wäre.

Dann über CSS das Datenobjekt entsprechend dimensionieren in Höhe, wenn nötig auch der Breite und padding/margin. Letztere machen n natürlich nur Sinn, wenn der Container drumherum bereits dimensioniert wurde. Anderenfalls kann weder margin noch padding (auf dem Datenobjekt) irgendetwas leisten.

Robert0001 · 22. Dezember 2022

Code:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js" async></script>

<div class="lottie-ki">
    <lottie-player src="./assets/lottie/ki.json" speed="1" loop autoplay></lottie-player>
</div>
        

==CSS==

.container {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    gap: 0 5rem;
    flex-wrap: wrap;
}

.container div {
    flex: 1 1 0;
}

==KI JSON==

.ki {
    display: flex;
    align-items: center;
    flex-wrap: wrap-reverse;
}

.lottie-ki > lottie-player {
    transform: rotate(90deg);
    padding: 3rem 0;
    max-width: 500px;
    height: 500px;
    margin: -150px 0;
}

Ergänzung (22. Dezember 2022)

@Iqra man kann eine svg in eine json umwandeln, schau dir vielleicht mal die seite an -> google > lottiefiles

Suche

lottiefile json format

Robert0001

Lt. Junior Grade

Anhänge

madmax2010

Fleet Admiral

Robert0001

Lt. Junior Grade

Mordi

Uwubernetes 1.30

madmax2010

Fleet Admiral

aronlad

Banned

Robert0001

Lt. Junior Grade

Iqra

Gast

Robert0001

Lt. Junior Grade

Ähnliche Themen