کد 7: درخشش بکگراند در هنگام حرکت ماوس

در طراحی سایت مدرن، افکت‌های تعاملی و جذاب یکی از بهترین راه‌ها برای جلب توجه کاربران و بهبود تجربه کاربری (UX) هستند. ما در هنرسیستم یکی از این افکت‌های محبوب یعنی درخشش بکگراند در هنگام حرکت ماوس بهمراه کد برای شما آماده کرده ایم. این افکت باعث می‌شود که با حرکت نشانگر ماوس روی صفحه، یک نور یا گرادیان شعاعی (radial gradient) درخشان اطراف آن ظاهر شود و همراه با حرکت ماوس، این گرادیان نیز حرکت کند. این افکت اغلب برای ایجاد حس مدرنیته و تعامل در سایت‌های خلاقانه، پورتفولیوها یا لندینگ پیج‌ها استفاده می‌شود.

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

کد درخشش بکگراند در هنگام حرکت ماوس

در ادامه برای ایجاد درخشش بکگراند در هنگام حرکت ماوس بر روی آیتم کدهای HTML، CSS و جاوااسکریپت قرار داده شده است که می توانید در آخر مقاله آن را دانلود نمایید.

کد HTML

<div class="container">
    <div class="card">
        <div class="content">
          <h3>خدمات شماره یک</h3>
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
            استفاده از طراحان گرافیک است.
          </p>
        </div>
        <div class="shadow" style="background-color: #cf00ff7a"></div>
        <div class="shadowtrack"></div>
      </div>
      <div class="card">
        <div class="content">
          <h3>خدمات شماره دو</h3>
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
            استفاده از طراحان گرافیک است.
          </p>
        </div>
        <div class="shadow" style="background-color: #00fcff7a"></div>
        <div class="shadowtrack"></div>
    </div>
    <div class="card">
        <div class="content">
          <h3>خدمات شماره سه</h3>
          <p>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
            استفاده از طراحان گرافیک است.
          </p>
        </div>
        <div class="shadow" style="background-color: #ff82007a"></div>
        <div class="shadowtrack"></div>
    </div>
</div>

کد CSS

:root {
    --blob-size: 250px;
}
body {
    direction: rtl;
    font-family: shabnam;
    margin: 0;
    box-sizing: border-box;
}

.container {
    background-color: #000;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 0 10%;
}

.card {
    overflow: hidden;
    border-radius: 25px;
    position: relative;
    color: #fff;
    background-color: #1b363580;
    z-index: 0;
}

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

.card .content {
    backdrop-filter: blur(80px);
    height: 100%;
    background-color: #02010130;
    padding: 60px 60px;
}

.card .shadow {
    width: var(--blob-size);
    height: 80%;
    left: calc(50% - 125px);
    filter: blur(40px);
    z-index: -1;
    opacity: 0;
    transition: opacity 300ms 300ms linear;
    position: absolute;
    left: 0;
}

.card .shadowtrack {
    visibility: hidden;
    z-index: -1;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

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

cards = document.querySelectorAll(".card");
    window.addEventListener("mousemove", (ev) => {
        cards.forEach((e) => {
          const shadow = e.querySelector(".shadow");
          const shadowtrack = e.querySelector(".shadowtrack");
          const recT = shadowtrack.getBoundingClientRect();
          shadow.animate(
            [
              {
                transform: `translate(${
                  ev.clientX - recT.left - recT.width / 2 + 125
                }px,${ev.clientY - recT.top - recT.height - 125}px)`,
              },
            ],
            {
              duration: 300,
              fill: "forwards",
            }
          );
          shadow.style.opacity = "1";
    });
});