Máte webové stránky, na kterých byste svým návštěvníkům rádi zlepšili uživatelský zážitek (UX)? Jde to snadno a rychle a na každých webových stránkách, protože existuje možnost přidat na váš web poutavé Lottie animace.
Lottie animace jsou na webu přehrávané pomocí přehrávače Lottie Plaer nebo dotLottie player od LottieFiles. Podle řešení, kterým jsou vaše webové stránky vytvořeny, je možné přidat Lottie animace do svých projektů s kódem, bez kódu nebo prostřednictvím integrací LottieFiles s různými platformami, jako je např. Webflow, jehož prostřednictvím jsou vytvořeny stránky Video Slideshow.
V tomto článku se dozvíte, jak vložit Lottie animace na web pomocí HTML, což je univerzální způsob, ať již jsou vaše webové stránky vytvořeny jakkoli, a můžete je tak použít na jakékoli webové stránce, blogu nebo platformě, která vám umožňuje upravovat HTML.
Doporučený způsob je přidat značku scriptu do části <head> HTML stránky. Podle toho, zdali chcete přehrávat JSON nebo dotLottie, vložíte odpovídající značku scriptu.
Pro přehrávání Lottie animace ve formátu JSON vložíte značku scriptu:
<scriptsrc="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
Pro přehrávání Lottie animace ve formátu dotLottie vložíte značku scriptu:
<scriptsrc="https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js"></script>
Podle názvu složky, do které jste Lottie animaci na hosting umístili, získáte absolutní nebo relativní cestu. Např. https://mujweb.cz/lotties/mojelottie-animace.lottie
<lottie-player> odkazující na URL adresu Lottie animaceNahraďte <URL ZDE> URL adresou vašeho souboru Lottie animace na hostingu. Ujistěte se, že se adresa URL Lottie zobrazuje uvnitř dvojitých uvozovek, jak je vidět v kódu níže.
Pro přehrávání Lottie animace ve formátu JSON vložíte kód:
<lottie-playersrc="<URL ZDE>" background="transparent" speed="1" style="width: 300px; height:300px;" loop autoplay></lottie-player>
Pro přehrávání Lottie animace ve formátu dotLottie vložíte kód:
<dotlottie-playersrc="<URL ZDE>" background="transparent" speed="1" style="width: 300px; height:300px;" loop autoplay></dotlottie-player>
V rámci Lottie playeru si můžete přizpůsobit nastavení způsobu přehrávání a stylů.
Kód Lottie playeru vložte na požadované umístění do kódu HTML své webové stránky. Tím je Lottie animace připravena pro přehrávání.
Pro přípravu kódu můžete využít I stránky LottieFiles, kde si vyberete nastavení a změníte URL adresu Lottie animace.
Lottie player poskytuje spoustu možností, jak ovládat způsob, jak se má Lottie animace na vaší stránce zobrazovat. Lze přizpůsobit následující atributy:
Play mode: Můžete určit režim přehrávání s bounce. To znamená, že animace se přehraje jako obvykle, ale když dosáhne posledního snímku, směr se obrátí. Bude pokračovat ve smyčce tam a zpět.
Direction: Animaci můžete přehrát vpřed nebo vzad.
Background: Nastavte barvu pozadí animace. Nastavte jej na průhledné, aby se pozadí vašeho webu projevilo. Chcete-li nastavit barvu pozadí, můžete nastavit atribut pozadí na platný atribut barvy HTML, jako je „white“ nebo hexadecimální hodnotu barvy, jako je „#FFFFFF“.
Speed: Nastavte rychlost přehrávání. Výchozí rychlost je 1. Pro zpomalení můžete mít hodnoty menší než 1. Například hodnota rychlosti 0,5 zpomalí animaci na polovinu. Hodnoty větší než 1 lze použít ke zrychlení přehrávání. Například hodnota 2 přehraje animaci dvojnásobnou rychlostí. Můžete také použít zlomkové hodnoty, jako je 0,75 nebo 1,5, abyste si nastavili rychlost podle svých představ.
Loop: Přidání tohoto atributu způsobí, že se animace bude přehrávat nekonečnou smyčkou. Bez tohoto atributu se animace jednou přehraje a zastaví se.
Hover: Pokud je toto aktivní, animace se přehraje, pouze pokud na ni uživatel najede myší.
Autoplay: Přidání tohoto atributu způsobí, že se animace spustí automaticky, jakmile se načte. Pokud tento atribut neurčíte, budete muset ke spuštění animace ke spuštění přehrávání použít Javascript.
Kromě přehrávání animace po najetí kurzoru myši lze nastavit také mnoho pokročilejších akcí, např., aby se synchronizovaly s rolováním uživatele, řetězilo se více animací nebo se Lottie animace spouštěly po určitém počtu kliknutí. I pro tyto požadavky vám můžu připravit Lottie animace na míru.
Tento článek vychází z návodu poskytnutého LottieFiles. Vývoj v oblasti Lottie animací je dynamický a změny lze očekávat. Při implementaci Lottie animace na webové stránky prostřednictvím HTML doporučuji především sledovat aktuální možnosti nastavení přehrávače a jeho verzi.
V případě žádosti o pomoc s nastavením mne neváhejte kontaktovat.