فایل‌های انیمیشن Lottie با فرمت JSON نیاز به معرفی ندارد و استفاده از آن‌ها با ویجت Lottie در المنتور پرو بسیار ساده است.
منتها گاهی اوقات نیاز پیدا می‌کنید که از این انیمیشن‌ها به عنوان پس‌زمینه (بک‌گراند) در یک سکشن/کانتینر استفاده کنید. مدتی پیش به این مساله برخوردم و با یک جستجوی اینترنتی به یکی دو پلاگین با همین منظور رسیدم که از شانس بد هم پولی و خارج از مخزن وردپرس بودند و هم نسخه اصلی یا نال‌شده‌ای از آن‌ها پیدا نکردم. در نتیجه دست به دامن جاوا اسکریپت شدم.
برای استفاده از فایل‌های Lottie در پس‌زمینه، کل مراحلی که باید طی کنید این‌ها هستند:
اول باید برای کانتینتر/سکشن خودتان از بخش تنظیمات پیشرفته یک آی‌دی CSS انتخاب کنید (در اینجا از آی‌دی Lottie استفاده کردم):
در مرحله دوم یک بلوک HTML در زیر سکشن/کانتینتر اضافه کنید و این کد را کپی و داخلش قرار دهید. بعد از این کار، فقط یک تغییر کوچک در کد باقی می‌ماند و آن هم اینست که باید فایل Lottie را در کتابخانه وردپرس آپلود کنید و لینکش رو به جای path-to-lottie-file قرار دهید.
کار تمام است و الان فایل انیمیشن Lottie در پس‌زمینه قرار می‌گیرد:
نکته آخر اینکه در اسکریپت بالا، کتابخانه سبک و فشرده Lottie از CND کلودفلر وارد شده (لینک زیر).
https://cdnjs.com/libraries/bodymovin
در صورت نیاز می‌توانید این کتابخانه را هم دانلود و مستقیما در وردپرس آپلود کنید و بعد لینکش را جایگزین سورس زیر کنید.
تمام :)
وندا نوژن
