A Lottie egy speciális, szabadon méretezhető, vektorgrafikus, JSON formátumú animáció és a lényege, hogy a különféle animációkat ugyanolyan egyszerűen tehessük közzé minden eszközön, legyen az számítógép, vagy telefon, stb.

Ha rákeresünk arra, hogy "free lottie animations", akkor több olyan weboldalt találunk, ahonnan Lottie animációkat tölthetünk le.

Egy ilyen a lottiefiles.com is, ahol érdemes kereséssel elindulni. Tehát ha például kell egy telefonnal kapcsolatos animáció, akkor phone.

Egyet kiválasztva kapunk elég sok opciót, amelyekkel testreszabhatjuk az animációt.


1) sebesség
2) háttér színe
3) hol kerül használatra? weboldal, iOS, Android, stb.
4) interaktivitás
5) réteg színek

Legyen most weboldal (html).

Itt megint kapunk egy halom opciót.


1) háttérszín, célszerűen transparent, átlátszó
2) méret
3) sebesség
4) mutassa-e a videó vezérlőket?
5) automatikusan elinduljon a lejátszás?
6) ismételje?
7) akkor játssza le, ha az egér fölötte van

Ha kész, akkor copy code alul.

A kapott kódot kell a weboldalon a szükséges helyre másolni.

És máris megkapjuk az animációt.


A mérete bármikor szabadon átírható.

style="width: 300px; height: 300px;"

De méretezhető, tehát lehet százalékos is, alkalmazkodva a szülő elem méretéhez.


Érdekel a webfejlesztés, weboldalak készítése?

Kattints ide oktató videókért!