در این آموزش، ما می‌خواهیم یک افکت برفی متحرک را با استفاده از CSS و جاوا اسکریپت وانیلی در یک صفحه وب، درست به موقع برای فصل تعطیلات پیاده‌سازی کنیم.

این فصل شادی است، پس بگذار برف ببارد، بگذار برف ببارد، بگذار برف ببارد!

1. نشانه گذاری با HTML تعطیلات

برای نشانه گذاری خود، دو کانتینر اصلی خواهیم داشت: یک عنصر اصلی حاوی محتوای صفحه ما و یک عنصر کانتینر برفی که برف را نمایش می دهد.

2. استایلینگ فصل با CSS

در این نسخه ی نمایشی، محتوای اصلی ما دارای رنگ پس زمینه گرادیان است تا جلوه ای از آسمان شب به آن بدهد. ما با استفاده از CSS به این امر دست پیدا می کنیم گرادیان خطی عملکرد.

برای سادگی، فرض کنید ما این را در CodePen می‌سازیم، بنابراین نشانه‌گذاری در برگه HTML، استایل‌ها در تب CSS و غیره قرار می‌گیرد.

بنر ما اکنون به این شکل است:

بنر شیب آبی با متن تعطیلات مبارکبنر شیب آبی با متن تعطیلات مبارکبنر شیب آبی با متن تعطیلات مبارک

ما همچنین از CSS برای مدیریت انیمیشن هر عنصر برفی استفاده خواهیم کرد. هر دانه‌ی برف دو انیمیشن خواهد داشت: یک انیمیشن پاییزی برای کنترل دانه‌های برف که از بالا به پایین صفحه حرکت می‌کند و یک انیمیشن نوسانی برای حرکت آهسته دانه‌های برف به سمت دیگر.

همچنین به محفظه برفی خود و عنصر برفی که در جاوا اسکریپت ایجاد خواهیم کرد، استایل می دهیم.

ویژگی انیمیشن در این دمو سه مقدار دارد:

  • نام: این مقدار انیمیشنی است که در زیر فریم های کلیدی ایجاد کردیم.
  • زمان سنجی: این نحوه پیشرفت انیمیشن را مشخص می کند.
  • تکرار: این تعداد دفعاتی است که انیمیشن اتفاق می افتد. ما از بی نهایت برای تکرار مداوم انیمیشن دانه های برف استفاده می کنیم.

3. فا لا لا لا لا عملکرد ♬

حالا می‌توانیم روی قسمت سرگرم‌کننده کار کنیم: برف کردن! ابتدا، در تب JS در CodePen، بیایید یک مقدار به عنصر ظرف خود اختصاص دهیم:

برای محتوای برف ریزه خود، از نمادهای HTML (❄ ❅ ❆) استفاده خواهیم کرد:

کاراکترهای دانه برف با استفاده از کد HTMLکاراکترهای دانه برف با استفاده از کد HTMLکاراکترهای دانه برف با استفاده از کد HTML

ما یک آرایه snowContent ایجاد خواهیم کرد که حاوی کدهای نماد باشد

برای ایجاد افکت برف در حال سقوط، باید ظاهر و انیمیشن هر دانه برف را تصادفی کنیم.

ما استفاده خواهیم کرد Math.random() و Math.floor() توابعی برای تولید مقادیر تصادفی برای عناصر برفی ما.

اکنون می‌توانیم یک تابع برای ایجاد یک استایل تصادفی برای هر دانه‌ی برف ایجاد کنیم. ما موقعیت، اندازه و مدت انیمیشن تصادفی ایجاد خواهیم کرد.

برای مدت زمان و اندازه ثابت، یک مقدار عدد ثابت اضافه می کنیم تا مطمئن شویم که عدد تصادفی تولید شده دارای حداقل مقدار عددی است که اضافه می شود (یعنی کمترین عدد برای مدت زمان انیمیشن هر دانه برف 10 ثانیه است)

برای ثابت بالای خود، یک مقدار منفی نسبت می دهیم تا دانه های برف از هر درصدی بالای صفحه قابل مشاهده شروع شود.

در مرحله بعد، ما به اضافه کردن دانه های برف به ظرف برف می پردازیم.

در این دمو از a استفاده می کنیم برای حلقه برای ایجاد تعداد ثابت دانه های برف و اضافه کردن آنها به ظرف. ما همچنین به صورت تصادفی innerHTML را به عنوان هر یک از مقادیر موجود در خود اختصاص می دهیم snowContent آرایه.

سپس، ما تماس بگیرید createSnow هنگامی که صفحه ما با استفاده از شنونده رویداد بارگذاری بارگیری می شود، عملکرد را انجام دهید.

و برف می بارد! کلیک اجرا مجدد برای دیدن برف متحرک:

از بین بردن دانه های برف

همچنین می‌توانیم یک تابع برای حذف دانه‌های برف اضافه کنیم.

در این تابع، به snowContainer خود یک کدورت 0 اختصاص می دهیم تا به آرامی محو شود و بعد از نیم ثانیه، ظرف را با استفاده از .remove() روش.

سپس می توانیم انتخاب کنیم که این تابع را هر طور که می خواهیم فراخوانی کنیم. هنگامی که کاربر در هر نقطه از صفحه کلیک می کند، می توانیم برف را حذف کنیم:

یا می توانیم آن را در تابع setTimeout () قرار دهیم تا پس از مدت زمان مشخصی ناپدید شود:

خاموش کردن دانه های برف

از آنجایی که ما این را از ابتدا ساخته‌ایم، می‌توانیم محتوای عنصر و انیمیشن را نیز به‌روزرسانی کنیم تا جلوه‌های سرگرم‌کننده دیگری مانند بالن‌های شناور ایجاد کنیم:

یا حتی گربه Nyan متحرک:

امیدوارم از این آموزش متحرک برف لذت برده باشید و باعث شده احساس خوبی داشته باشید و جشن بگیرید!