نحوه ایجاد برف متحرک در وب سایت (با CSS و جاوا اسکریپت)

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

const snowContent = ['&#10052', '&#10053', '&#10054']

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

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

const random = (num) => {
  return Math.floor(Math.random() * num);
}

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

const getRandomStyles = () => {
  const top = random(100);
  const left = random(100);
  const dur = random(10) + 10;
  const size = random(25) + 25;
  return `
    top: -${top}%;
    left: ${left}%;
    font-size: ${size}px;
    animation-duration: ${dur}s;
  `;
}

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

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

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

const createSnow = (num) => {
  for (var i = num; i > 0; i--) {
    var snow = document.createElement("div");
    snow.className = "snow";
    snow.style.cssText = getRandomStyles();
    snow.innerHTML = snowContent[random(2)]
    snowContainer.append(snow);
  }
}

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

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

window.addEventListener("load", () => {
  createSnow(30)
});

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

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

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

const removeSnow = () => {
  snowContainer.style.opacity = "0";
  setTimeout(() => {
    snowContainer.remove()
  }, 500)
}

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

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

window.addEventListener("click", () => {
  removeSnow()
});

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

window.addEventListener("load", () => {
  createSnow(30)
  setTimeout(removeSnow, 10000)
});

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

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

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

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