نحوه اضافه کردن انیمیشن های متحرک به سایت با استفاده از Lottie و المنتور

گاهی اوقات نیاز هست برای بخش های مختلف سایت طراحی های کوچکی اضافه کنیم تا کمی از حالت ساده خارج شده و جذابیت بیشتری برای کاربر داشته باشد.

در این آموزش قصد داریم تا در مورد اضافه کردن انیمیشن های Lottie صحبت کنیم.

اگر یک سایت فروشگاهی دارید و برگه تشکر بعد از خرید رو توسط المنتور طراحی کردید، با استفاده از این ترفند ساده برگه تشکر رو جذاب تر کنید.

انیمیشن های متحرک با استفاده از Lottie

قبل از اینکه آموزش رو انجام بدیم کمی در مورد تکنولوژی لاتی (Lottie) صحبت کنیم.

این تکنولوژی توسط شرکت Airbnb و به صورت متن باز ساخته شده که شما بدون پرداخت هیچ هزینه ای می تونید از این انیمیشن ها استفاده کنید.

حالا شاید فکر کنید اضافه کردن این انیمیشن ها باعث کاهش سرعت سایت بشه که در مقایسه با دیگر فرمت های انیمیشن، Lottie پایین ترین حجم و مصرف منابع هاست را استفاده می کند.

سایت منبع فایل های Lottie با نام https://lottiefiles.com قرار دارد که از بخش جستجو می توانید فایل های با فرمت JSON را دانلود کنید.

ایجاد حساب در این سایت رایگان می باشد.

استفاده از Lottie در المنتور

برای استفاده از این انیمیشن ها ابتدا باید افزونه زیر را از مخزن وردپرس نصب کنید:

• Animentor رایگان در مخزن وردپرس)

بعد از فعال سازی این افزونه، وارد صفحه المنتور خود شده و از بین ویجت های المنتور، ویجت Lottie را جستجو کرده و داخل صفحه قرار دهید.

بعد از قرار دادن ویجت داخل صفحه، نیاز هست که فایل های انیمیشن را با فرمت JSON آپلود کنید.

حالا وارد سایت https://lottiefiles.com شده و یک انیمیشن با فرمت JSON دانلود کنید.

سپس فایل را در ویجت آپلود کنید.

می توانید تنظمات سرعت و تعداد نمایش انیمیشن را کنترل کنید.

همچنین می توانید کنترل پخش انیمیشن با قرار گرفتن ماوس روی ویجت و دیگر تنظیمات را ویرایش کنید.

در انتها هم بعد از ذخیره کردن برگه، انیمیشن به شکل زیر نمایش داده خواهد شد.