مولّد تساقط الثلج
إنشاء سكريبت رسوم متحركة لتساقط الثلج قابل للتخصيص للمواقع الإلكترونية. ضبط عدد حبات الثلج، اللون، الحجم، السرعة، الشفافية، تأثير الرياح، الضبابية، ونمط الرسوم المتحركة. عاين التأثير مباشرة وانسخ كود JavaScript الجاهز لإضافة رسوم ثلجية جميلة إلى أي صفحة ويب.
الإدخال
الإخراج
لقطات الشاشة
ملف القراءة
ما هو تأثير تساقط الثلج المتحرك؟
تأثير تساقط الثلج المتحرك هو تأثير بصري يحاكي سقوط حبات الثلج برفق على صفحة الويب، مما يخلق جوًا شتويًا أو احتفاليًا. يستخدم هذا التأثير JavaScript وCSS لإنشاء عدة عناصر صغيرة (تمثل حبات الثلج) تتحرك من أعلى الشاشة إلى أسفلها بسرعات ومسارات مختلفة. التأثير ديكوري بحت ولا يتداخل مع وظائف الصفحة، مما يجعله مثاليًا للمواقع الموسمية، العروض الترويجية للعيد، أو المحتوى ذو الطابع الشتوي.
وصف الأداة
Falling Snow Generator يخلق كود JavaScript قابل للتخصيص لتساقط الثلج يمكنك إضافته إلى صفحات الموقع بسهولة. توفر الأداة معاينة حية حيث يمكنك رؤية تأثير الثلج في الوقت الحقيقي أثناء تعديل الإعدادات. بمجرد أن تكون راضيًا عن المظهر، ما عليك سوى نسخ كود HTML لتأثير الثلج المُولَّد ولصقه في موقعك. السكريبت مستقل تمامًا وسيُنشئ حبات الثلج تلقائيًا عند تحميله، دون الحاجة إلى أي تبعيات.
الميزات
- معاينة حية: شاهد تأثير الثلج في الوقت الحقيقي أثناء تعديل الإعدادات
- عدد الثلوج القابلة للتخصيص: تحكم في عدد حبات الثلج (10-300)
- اختيار اللون: اختر أي لون لحبات الثلج ليتناسب مع سمة موقعك
التنفيذ
لاستخدام تأثير الثلج المُولَّد على صفحات موقعك:
- قم بضبط معلمات الثلوج باستخدام أدوات التحكم في الأداة
- عاين تأثير تساقط الثلج JavaScript في منطقة المعاينة الحية
- انسخ كود HTML لتأثير الثلج المُولَّد
- الصق الكود في ملف HTML لموقعك، ويفضل قبل إغلاق الوسم
</body>أو داخل وسم<script> - ستبدأ الثلوج بالتساقط تلقائيًا عند تحميل الصفحة
لإزالة تأثير الثلج، يمكنك استدعاء الدالة العامة removeSnow() من وحدة تحكم المتصفح أو إضافة زر يستدعي هذه الدالة. يتيح ذلك إضافة الثلوج إلى الموقع مؤقتًا أو تشغيلها وإيقافها حسب الحاجة.
التفاصيل التقنية
السكريبت المُولَّد ينشئ حاوية ثابتة الموضع تمتد على كامل مساحة العرض ويستخدم رسومات CSS المتحركة لحركة حبات الثلج بسلاسة. كل حبة ثلج تحصل على حركة فريدة بخصائص عشوائية تعتمد على إعداداتك. يستخدم السكريبت:
- تلاعب DOM لإنشاء عناصر حبة الثلج
- رسوم CSS المتحركة لحركة سلسة مدعومة بالأجهزة
- قيم عشوائية لإنشاء تنوع طبيعي في الشكل والحركة
- مستمعي الأحداث لإعادة ضبط مواضع حبات الثلج لضمان استمرارية الرسوم المتحركة
- أنماط مضمنة لتطبيق مستقل خالٍ من التبعيات