Ett sätt att ge liv åt sin hemsida är att lägga in animationer. Animationer är element som rör sig på olika sätt. Det kan vara texter eller illustrationer som pulserar eller skalas upp eller ner. Det kan vara element som kommer in från sidan eller uppifrån.
Att ha animationer på sin hemsida är också ett sätt att få besökaren att stanna kvar lite längre, eftersom de skapar en skön känsla och är roliga att titta på. Google kan se om en besökare stannar kvar på en sida och det ger bättre statistik som i sin tur kan gynna din ranking.
Och det är ju ett trevligt inslag bland all text och ett sätt att variera sitt innehåll. Så förutom bilder och videor som komplement till dina texter, är att använda animationer ett väldigt attraktivt sätt.
Finns det en risk att animationerna segar ner din sajt? Jo, men det beror på vilket filformat som används. Använder man videoformat så blir filerna oftast onödigt stora och det ger längre laddtid. Laddtid är alltså den tid som det tar för att sidan ska laddas i användarens webbläsare.
Lottie – kort historik
För några år sedan dök ”Lotties” upp på webdesign-himlen. Det är små filer av formatet JSON (ett ”lättviktigt” javascript-objekt) som togs fram av Airbnb. De lät sedan koden bli öppen så att alla har rätt att använda den gratis.
Lotties fungerar både på webbplatser och i mobilappar. De är skalbara och är små vad gäller filstorlek vilket är exemplariskt på webben.
Namnet ”Lottie” kommer för övrigt från en tysk filmregissör och pionjär inom siluettanimationer, Charlotte ”Lotte” Reiniger.
Så här gör man
På sidan LottieFiles kan man ladda ner lotties eller hämta kod som bäddas in på ens egen hemsida.
Om man vill skapa egen Lotties kan man lära det sig på samma hemsida och man kan även lägga upp sina filer så att fler kan använda dem. Och det finns även en ”Marketplace” där man kan köpa och sälja Lotties.
Följ dessa steg:
- Skapa ett gratis konto på LottieFiles.com genom att klicka på ”Sign up”-knappen
- Logga in och klicka på ”Discover” och välj ”Free animations”
- Sortera på ”Featured”, ”Recent”, ”Popular” och så vidare
- Välj en animation som du gillar
- Nu kan du påverka animationen på olika sätt. Du kan ändra färger, storlek och hastighet.
- Nästa steg är att implementera animationer på din webbplats. Beroende på vilken plattform du använder kan du göra på olika sätt.
För WordPress kan du kopiera oEmbed URL och klistra in i WordPress blockredigerare. Det finns ett block i WordPress blockredigerare som heter ”Embed”.
Du kan även kopiera html-kod och klistra in med blocket ”Custom HTML” i WordPress. Fördelen med att göra detta är att du kan själv ändra i koden på din WordPress-sajt. Vill du t ex ändra storleken eller påverka loopningen kan du göra det direkt i koden i det skapade blocket.
Det finns även integrationer med After Effects, Adobe XD, Elementor, Webflow med flera.
Mitt exempel
Här är ett exempel från min hemsida hur jag använder Lotties. Jag visar både hur det ser ut WordPress admin med ett ”Custom HTML”-block samt hur det ser ut ”live”. Du bör helst gå in här så du ser själva animationens rörelser.
Hoppas du tycker detta med Lotties är lika enkelt och smidigt som jag tycker, och att det ger dig nya möjligheter för en mer attraktiv hemsida!