دانلود @lottiefiles/dotlottie-web ونشانی CDN ایرانی
@lottiefiles/dotlottie-web یه کتابخونه جاوااسکریپت از LottieFiles برای پخش انیمیشن های Lottie و فایل های dotLottie توی مرورگره. انیمیشن رو روی canvas نشون می ده و به درد لودر، آیکون متحرک، بنر و صفحه فرود می خوره، یعنی هر جا که انیمیشن سبک و برداری می خوای.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
اگه تا حالا توی یه سایت یه آیکون متحرک تمیز، یه لودر یا یه تصویر انیمیشنی کوچیک دیدی که با زوم کردن هم تار نمی شه، احتمالاً یه انیمیشن Lottie بوده. @lottiefiles/dotlottie-web پلیر رسمی LottieFiles برای وبه. این فایل ها رو می خونه و توی صفحه پخش می کنه. هم JSON معمولی Lottie رو می شناسه، هم فرمت dotLottie رو که یه بسته فشرده برای همین انیمیشن هاست. یه فایل dotLottie می تونه انیمیشن و منابعش، مثل تصویرها، رو توی یه بسته نگه داره.
مشکلی که حل می کنه ساده است: به جای GIF یا ویدیوی سنگین، یه انیمیشن برداری داری که حجمش معمولاً کمتره و کیفیتش به اندازه صفحه بستگی نداره. از کد هم می تونی کنترلش کنی. پخشش رو شروع و متوقف می کنی، تکرارش رو تنظیم می کنی یا با اسکرول و کلیک هماهنگش می کنی. اگه بیشتر کاربرای سایتت با موبایل و اینترنت ضعیف میان، این تفاوت حجم رو حس می کنن.
این کتابخونه برای توسعه دهنده ها و طراح های وبه که با جاوااسکریپت راحتن. روی یه عنصر canvas کار می کنه و برای فریم ورک های رایج مثل React و Vue بسته های جدا داره. اگه فقط یه سایت وردپرسی ساده داری و دنبال نصب با یه کلیکی، باید بدونی این کتابخونه خودش افزونه نیست و باید یه تیکه کد کنار قالبت اضافه کنی. تو اون حالت یه افزونه آماده یا بلاک مخصوص انیمیشن راحت تره.
موقع انتخاب دو نکته مهمه. اول اینکه Lottie برای گرافیک ساده و متوسط عالیه، ولی برای صحنه های خیلی شلوغ یا ویدیو مناسب نیست و اونجا ویدیوی معمولی بهتره. دوم اینکه این پلیر برای رندر از WebAssembly استفاده می کنه و ممکنه فایل مربوطش رو به صورت پیش فرض از یه منبع بیرونی بگیره. روی سایت ایرانی که گاهی دسترسی به سرویس های خارجی قطع یا کند می شه، مستندات رو بخون و اون فایل رو از سرور خودت سرو کن.
نسخه های رسمی و بدون تغییر این کتابخونه توی مخزن داخلی ما هم هست. پس وقتی دسترسی به npm یا CDN های خارجی مشکل داره، می تونی از همین جا بگیری و روی هاست خودت بذاری.
راهنمای استفاده
برای استفاده از @lottiefiles/dotlottie-web دو راه داری: با npm توی پروژه نصبش کنی، یا فایل ها رو مستقیم روی سایت بذاری و با کد آماده پایین همین صفحه به صفحه اضافه کنی. راه دوم برای سایت های معمولی و وردپرسی ساده تره.
فایل کتابخونه رو از همین صفحه بگیر و توی پوشه فایل های استاتیک سایتت آپلود کن، مثلاً کنار فایل های قالب.
فایل انیمیشن رو آماده کن. می تونه JSON معمولی Lottie یا فایل dotLottie باشه. بهتره اون رو هم روی هاست خودت بذاری.
توی HTML یه عنصر canvas بذار و بهش اندازه بده. بدون اندازه مشخص، ممکنه انیمیشن خالی یا خیلی کوچیک دیده بشه.
کتابخونه رو به صورت ماژول توی صفحه لود کن و یه نمونه از پلیر بساز. canvas و آدرس فایل انیمیشن رو بهش بده. اگه می خوای خودکار شروع بشه و تکرار بشه، گزینه های autoplay و loop رو روشن کن.
اگه فایل WebAssembly رو از منبع بیرونی می گیره، توی مستندات رسمی دنبال تنظیم آدرسش بگرد و اون فایل رو هم از سرور خودت سرو کن.
توی وردپرس این کدها رو با یه افزونه اسنیپت یا فایل functions.php قالب فرزند اضافه کن. توی قالب اصلی نذار، چون با به روزرسانی پاک می شه.
آخرش صفحه رو توی چند مرورگر و یه موبایل واقعی تست کن. تب Network رو هم نگاه کن و مطمئن شو هیچ فایلی از آدرس خارجی لود نمی شه.
نشانی مستقیم فایل اصلی 0.11.1https://mirror.wbweb.ir/npm/@lottiefiles/dotlottie-web@0.11.1/dist/index.js
پرسش‌های رایج
یه پلیر جاوااسکریپت برای پخش انیمیشن های Lottie و فایل های dotLottie توی مرورگره که LottieFiles ساخته. به درد لودر، آیکون متحرک، دکمه و انیمیشن های کوچیک صفحه فرود می خوره. چون برداریه، توی هر اندازه ای واضح می مونه و معمولاً از GIF سبک تره.
هر دو انیمیشن Lottie رو نگه می دارن. JSON یه فایل متنیه، ولی dotLottie یه بسته فشرده است که می تونه انیمیشن و منابعش رو کنار هم داشته باشه و معمولاً کم حجم تره. این پلیر هر دو رو می خونه، پس اگه فایل قدیمی JSON داری لازم نیست تبدیلش کنی.
آره، ولی افزونه آماده نیست و باید خودت کد رو کنار قالب اضافه کنی. یه canvas می ذاری، کتابخونه رو لود می کنی و پلیر رو می سازی. کدها رو توی قالب فرزند یا یه افزونه اسنیپت بذار تا با به روزرسانی قالب از بین نرن.
اگه کتابخونه و فایل انیمیشن روی سرور خودت باشن، آره. فقط چون پلیر به WebAssembly نیاز داره، باید مطمئن بشی اون فایل هم از منبع بیرونی لود نمی شه. توی مستندات رسمی دنبال تنظیم آدرس فایل بگرد و همه چیز رو روی هاست خودت بذار.
three یه کتابخونه جاوااسکریپت متن باز برای ساخت و نمایش گرافیک سه بعدی توی مرورگره. با اون می تونی صحنه، دوربین، نور و مدل سه بعدی رو بدون نوشتن مستقیم کد WebGL روی صفحه بیاری. برای نمایش محصول، لندینگ تعاملی، بازی ساده و تجسم داده خوبه و مجوزش MIT هست.
canvas-confetti یه کتابخونه جاوااسکریپت سبک برای نمایش انیمیشن کاغذ رنگی (کانفتی) توی مرورگره. با یه فراخوانی ساده روی صفحه جشن راه می ندازی؛ مثلاً بعد از ثبت سفارش، تکمیل فرم یا رسیدن کاربر به یه هدف. به canvas تکیه داره و برای شروع به چیز دیگه ای نیاز نداره.
آخرین نسخه
۱.۹.۴
نسخه‌ها
۷
به‌روزرسانی
چیزی که لازم دارید اینجا نیست؟
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.
