کد 8: تغییر رنگ بوردر آیتم هنگام هاور ماوس بصورت رندوم

تغییر رنگ بوردر یک عنصر HTML هنگام هاور ماوس به صورت رندوم، یکی از افکت‌های جذاب و پویا در طراحی وب است که می‌تواند تجربه کاربری را هیجان‌انگیزتر کند. برای پیاده‌سازی این ویژگی، معمولاً از CSS و کمی JavaScript استفاده می‌شود.

از event listenerهایی مانند mousemove در جاوااسکریپت استفاده می‌کنیم تا هر بار که ماوس روی عنصر قرار می‌گیرد، یک رنگ جدید (مثلاً با فرمت HSL یا RGB) به صورت تصادفی تولید شود و به خاصیت border-color اعمال گردد. این روش باعث می‌شود هر هاور، رنگ متفاوتی نمایش داده شود و افکت تکراری و خسته‌کننده نشود.

کد HTML

     <div class="card">
          <h3>خدمات شماره یک</h3>
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
            استفاده از طراحان گرافیک است.
          </p>
      </div>

کد CSS

     .card {
        border: 3px solid #ddd;
        border-radius: 25px;
        background-color: #eee;
        padding: 60px 60px;
        width: 350px;
      }

      .card h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
      }

کد جاوااسکریپت

      document.querySelectorAll(".card").forEach((card) => {
        card.addEventListener("mousemove", (e) => {
          const rect = card.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;

          card.style.setProperty("--x", `${x}px`);
          card.style.setProperty("--y", `${y}px`);

          card.style.border = `3px solid rgba(${Math.floor(
            (x / rect.width) * 255
          )}, ${Math.floor((y / rect.height) * 255)}, 150, 0.7)`;
        });

        card.addEventListener("mouseleave", () => {
          card.style.border = "3px solid #ddd";
        });
      });