دانلود canvas-confetti و نشانی CDN ایرانی

وقتی کاربر یه کار رو با موفقیت تموم می کنه، یه بازخورد کوچیک و شاد خیلی فرق می ذاره. canvas-confetti برای همین ساخته شده. تابع confetti رو صدا می زنی، ذره های رنگی روی صفحه پخش می شن و بعد از چند ثانیه محو می شن. لازم نیست توی HTML عنصر اضافه ای بذاری، چون خود کتابخونه یه canvas روی صفحه می سازه و انیمیشن رو همون جا اجرا می کنه. سازنده ش Kiril Vatev ه و مجوزش ISC هست؛ یه مجوز آزاد و ساده که معمولاً برای پروژه های تجاری هم مشکلی درست نمی کنه. با این حال متن مجوز رو یه بار خودت بخون.

کجا به کار می آد؟ صفحه «سفارش شما ثبت شد» توی فروشگاه وردپرسی، صفحه تشکر بعد از ثبت نام توی وبینار، جشنواره های مناسبتی مثل یلدا و نوروز، آزمون آنلاینی که کاربر توش قبول می شه، یا یه دکمه که با کلیکش یه شگفتی کوچیک نشون می ده. ولی توی صفحه های جدی مثل پنل مالی، فرم های اداری یا هر جایی که کاربر باید با تمرکز کار کنه، سراغش نرو. اینم یادت باشه که این یه فریم ورک انیمیشن نیست و فقط یه کار رو انجام می ده. اگه انیمیشن پیچیده و زنجیره ای می خوای، باید سراغ یه ابزار انیمیشن کامل بری.

چند تا نکته موقع استفاده کارت رو راحت تر می کنه. رفتار انیمیشن با یه آبجکت گزینه تنظیم می شه: تعداد ذره ها، زاویه، میزان پخش شدن، نقطه شروع روی صفحه، رنگ ها، سرعت و شکل ذره ها. عدد بزرگ برای تعداد ذره ها وسوسه کننده هست، ولی روی گوشی های ضعیف، که بین کاربرها کم نیستن، سنگین می شه. با یه تعداد متوسط شروع کن و بعد کم و زیادش کن. گزینه disableForReducedMotion هم هست که به تنظیم «کاهش حرکت» سیستم کاربر احترام می ذاره؛ برای دسترس پذیری ارزش روشن کردنش رو داره. اگه صفحه ت از قبل سنگینه، با confetti.create یه نمونه جدا بساز و گزینه useWorker رو امتحان کن تا انیمیشن بیرون از رشته اصلی اجرا بشه. آخرش اینکه انیمیشن رو به یه رویداد وصل کن، نه به لود صفحه. کانفتی ای که با هر ورود می ریزه، خیلی زود آزاردهنده می شه.

یه نکته هم مخصوص شرایط خودمونه. اگه فایل رو از CDN خارجی لود کنی، توی روزهای محدودیت اینترنت بین الملل ممکنه بالا نیاد و فقط کانفتی نمایش داده نشه. بهتره فایل رو روی هاست خودت نگه داری. نسخه های رسمی و بدون تغییر canvas-confetti توی مخزن داخلی ما هم در دسترسه و می تونی از همین صفحه برشون داری.

راهنمای استفاده

استفاده از canvas-confetti توی یه سایت معمولی یا وردپرسی چند قدم بیشتر نیست:

• فایل کتابخونه رو از همین صفحه دانلود کن و روی هاست خودت آپلود کن؛ مثلاً توی پوشه js قالب یا سایت.
• با یه تگ script اون رو قبل از کد خودت توی صفحه لود کن. کد آماده ش پایین همین صفحه هست و می تونی مستقیم کپی ش کنی.
• تابع confetti رو توی رویداد مورد نظرت صدا بزن؛ مثلاً کلیک یه دکمه یا بعد از موفقیت ارسال فرم. بدون هیچ گزینه ای هم کار می کنه و یه انفجار پیش فرض نشون می ده.
• اگه خواستی ظاهرش رو عوض کنی، یه آبجکت گزینه بهش بده. تعداد ذره ها، زاویه، پخش شدن، نقطه شروع و رنگ ها رو می تونی تنظیم کنی.
• توی وردپرس فایل رو با enqueue فقط توی صفحه هایی که لازمه لود کن، نه توی کل سایت. کد کوتاه فراخوانی رو هم می تونی توی قالب یا یه افزونه اسنیپت بذاری.
• اگه پروژه ت با npm و باندلر کار می کنه، بسته canvas-confetti رو نصب کن و مثل بقیه ماژول ها import ش کن.

آخرش یه بار روی موبایل هم امتحانش کن تا مطمئن بشی انیمیشن روون اجرا می شه.