معاينة تأثير المؤشر
أقل = تبقى الجسيمات لفترة أطول
انسخ والصق هذا الكود قبل </body> في موقعك.
| التأثير | الشكل | الأنسب لـ | السلوك |
|---|---|---|---|
| بريق | ✦ نقاط ملونة | استخدام عام، صفحات هبوط SaaS | تنطلق الجسيمات بشكل شعاعي من المؤشر مع جاذبية طفيفة |
| فقاعة | 🫧 حلقات متوسعة | المحافظ الإبداعية، مواقع الأطفال | تطفو الفقاعات للأعلى مع لمعة لامعة |
| نجمة | ⭐ نجوم خماسية | مواقع الألعاب، الترفيه | تدور النجوم مبتعدة عن المؤشر |
| قلب | ❤️ أشكال قلب | مواقع المواعدة، صفحات الزفاف، عيد الحب | تتدحرج القلوب مع الدوران وتتقلص مع التلاشي |
| مسار نيون | 💫 حلقات متوهجة | الشركات الناشئة التقنية، مواقع الوضع الليلي | تتسع الحلقات مع ظل ضبابي، تاركة توهج نيون |
| رقاقة ثلج | ❄️ بلورات سداسية | موضوعات الشتاء/الأعياد، الصفحات الموسمية | تدور رقاقات الثلج بلطف وهي تنجرف في اتجاهات عشوائية |
ينشئ الكود عنصر <canvas> مثبتا على نافذة العرض مع pointer-events: none — مما يعني أنه يرسم جسيمات بصرية فوق المحتوى دون حظر النقرات أو الروابط أو التفاعلات. مع كل حدث mousemove، يولد عددا قابلا للتكوين من الجسيمات في موقع المؤشر بمتجهات سرعة عشوائية. تقوم حلقة requestAnimationFrame بتحديث مواقع الجسيمات (مضافة جاذبية طفيفة لتأثيرات البريق/المسار)، وتقلل الشفافية بناء على سرعة التلاشي، وتزيل الجسيمات المنتهية. سقف 300 جسيم يمنع نمو الذاكرة. يتم تغيير حجم canvas تلقائيا عند تغيير حجم النافذة، ليبقى دائما بملء الشاشة.
| المنصة | طريقة التثبيت | الصعوبة |
|---|---|---|
| ووردبريس | المظهر → محرر ملفات القالب → footer.php، أو استخدم إضافة "Insert Headers and Footers" | سهل |
| شوبيفاي | المتجر الإلكتروني → القوالب → تحرير الكود → theme.liquid، الصق قبل </body> | سهل |
| ويكس | الإعدادات → كود مخصص → إضافة كود، الصق في قسم Body - End | سهل |
| سكويرسبيس | الإعدادات → متقدم → حقن الكود → التذييل | سهل |
| ويب فلو | إعدادات الموقع → كود مخصص → قبل وسم </body> | سهل |
| HTML ثابت | الصق مباشرة قبل </body> في أي ملف .html | سهل |
تم بناء التأثير للأداء: كل العرض يستخدم عنصر <canvas> واحدا مع سياق 2D — بدون حمل WebGL، وبدون معالجة DOM لكل جسيم. مع الإعدادات الافتراضية (3 جسيمات لكل إطار، سقف 300)، يضيف التأثير حوالي 1-2% استخدام لوحدة المعالجة المركزية على الأجهزة الحديثة. تقليل عدد الجسيمات إلى 1 وزيادة سرعة التلاشي إلى الحد الأقصى يعطي أخف تكوين. يبلغ حجم السكريبت حوالي 2KB بعد التصغير — أصغر من معظم مقتطفات تتبع التحليلات.
بعد لصق الكود، يمكنك تخصيصه أكثر مباشرة: غير قيمة cfg.type للتبديل بين التأثيرات دون إعادة التوليد، واضبط cfg.count لمزيد أو أقل من الجسيمات، أو عدل معامل cfg.spread لتغيير مدى انتقال الجسيمات. الكود هو JavaScript خالص — لا خطوة بناء، ولا حاجة للتصغير. يمكن للمستخدمين المتقدمين توسيع تعليمة switch لإضافة أشكال مخصصة: سياق canvas 2D يدعم الأقواس، منحنيات بيزيه، الخطوط، والنقوش المتحركة.
اختر تأثيرك المفضل (بريق، فقاعة، نجمة، قلب، مسار نيون، أو رقاقة ثلج)، وخصص الألوان والديناميكيات في عناصر التحكم، ثم انقر على نسخ الكود. الصق السكريبت المولد قبل وسم </body> في أي صفحة HTML. الكود مستقل تماما — ينشئ عنصر canvas، ويستمع لحركة الفأرة، ويرسم الجسيمات. لا حاجة لتبعيات خارجية أو روابط CDN.
يستمع التأثير لأحداث mousemove، التي لا تنشط على أجهزة اللمس. على المحمول، تبقى طبقة canvas موجودة لكنها غير مرئية (بسبب pointer-events: none)، لذا لا تتداخل مع اللمس أو التمرير أو أي تفاعلات للصفحة. التأثير ديكوري بحت ويتلاشى بشكل لطيف — يعمل موقعك بشكل طبيعي على المحمول بدون مسار المؤشر.
يستخدم التأثير requestAnimationFrame وسقف 300 كائن من الجسيمات، مما يجعله خفيفا جدا. كل جسيم هو استدعاء رسم canvas واحد. على الأجهزة الحديثة، تأثير الأداء مهمل (حوالي 1-2% من وحدة المعالجة المركزية). يمكنك تقليل عدد الجسيمات والحجم في عناصر التحكم لاستخدام أقل للموارد على الأجهزة القديمة.
نعم — الكود المولد هو JavaScript خالص بدون تبعيات. ووردبريس: الصقه في footer.php أو استخدم إضافة "Insert Headers and Footers". شوبيفاي: أضفه في القالب → تحرير الكود → theme.liquid قبل </body>. ويكس: استخدم الإعدادات → كود مخصص. سكويرسبيس: الإعدادات → حقن الكود → التذييل. يعمل على أي منصة تسمح بـ JavaScript مخصص. راجع جدول التوافق أعلاه للحصول على تعليمات مفصلة.
استخدم منتقي اللون الرئيسي واللون الثانوي في لوحة المولد. كل جسيم يختار عشوائيا أحد اللونين، مما يخلق تأثيرا ديناميكيا ممتزجا. لمظهر أحادي اللون، اضبط كلا اللونين على نفس القيمة. الكود المولد يضمن الألوان التي اخترتها مباشرة — لا حاجة لتعديل السكريبت بعد لصقه.