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

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

1

const snowContent = (\'❄\', \'❅\', \'❆\')

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

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

1

const random = (num) => {

2

  return Math.floor(Math.random() * num);

3

}

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

1

const getRandomStyles = () => {

2

  const top = random(100);

3

  const left = random(100);

4

  const dur = random(10) + 10;

5

  const size = random(25) + 25;

6

  return `

7

    top: -${top}%;

8

    left: ${left}%;

9

    font-size: ${size}px;

10

    animation-duration: ${dur}s;

11

  `;

12

}

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

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

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

1

const createSnow = (num) => {

2

  for (var i = num; i > 0; i--) {

3

    var snow = document.createElement("div");

4

    snow.className = "snow";

5

    snow.style.cssText = getRandomStyles();

6

    snow.innerHTML = snowContent(random(2))

7

    snowContainer.append(snow);

8

  }

9

}

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

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

1

window.addEventListener("load", () => {

2

  createSnow(30)

3

});

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

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

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

1

const removeSnow = () => {

2

  snowContainer.style.opacity = "0";

3

  setTimeout(() => {

4

    snowContainer.remove()

5

  }, 500)

6

}

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

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

1

window.addEventListener("click", () => {

2

  removeSnow()

3

});

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

1

window.addEventListener("load", () => {

2

  createSnow(30)

3

  setTimeout(removeSnow, 10000)

4

});

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

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

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

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

آموزش های بیشتر زمستانی و متحرک برف