افکت جادویی با هاور المنتور

تو این ویدئو میخوام بهت نشون بدم که چطوری یه افکت هاور خفن با المنتور بسازی که با حرکت ماوس نورهای رنگی جذابی رو تو بک گراند می بینی 🙂 اگه میخوای دقیقا مثل این آموزش انجامش بدی، میتونی از کدها و فایل هایی که پایین ویدئو برات گذاشتم استفاده کنی.

کدهای CSS:

/* css goes in .card */

selector {
    --blob-size:250px;
}

selector .inner{
    backdrop-filter: blur(80px);
    height: 100%;
}

selector .blob{
    width: var(--blob-size);
    height: 80%;
    left: calc(50% - calc(var(--blob-size)/2));
    filter: blur(40px);
    z-index: -1;
    opacity: 0;    
    transition: opacity 300ms 300ms linear;

}

selector .fakeblob {
  visibility: hidden;
  z-index: -1;
  height: 100%;
}

کدهای JS:

<script type="text/javascript">
    
      const cards = document.querySelectorAll(".card");


window.addEventListener("mousemove", (ev) => {
  
  cards.forEach((e) => {
    const blob = e.querySelector(".blob");
    const fblob = e.querySelector(".fakeblob");
    const rec = fblob.getBoundingClientRect();

  
    blob.animate(
      [
        {
          transform: `translate(${
            (ev.clientX - rec.left) - (rec.width / 2)
          }px,${(ev.clientY - rec.top) - (rec.height / 2)}px)`
        }
      ],
      {
        duration: 300,
        fill: "forwards"
      }
    );
  
    blob.style.opacity = "1";
      
  });
  
});

    
    
</script>

برای دانلود تصاویر استفاده شده در این ویدئو، روی دکمه زیر کلیک کنید: