GSAP / Java Script

אפקט פנס מגניב בטירוף באלמנטור

קבלו אפקט סופר פשוט שיוצרים ב3 דקות עבודה, ומוסיף וואו מטורף לאתרים שלכם. ״פנס״ אינטראקטיבי שעוקב אחרי העכבר של המשתמש וחושף דברים מאחוריו!

html
<style>
.flashlight{
    filter:blur(70px); /* רמת הטשטוש של האייקון. אם השתמשתם בתמונה ניתן למחוק*/
    z-index: -1;
   pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  transition: all 0s ease !important;
}
</style>


<script>
document.addEventListener("DOMContentLoaded", () => {
  const wrapper = document.querySelector(".flashlight-wrapper"); //הקלאס של הקונטיינר שבתוכו נרצה שהפנס יעבוד
  const flashlight = document.querySelector(".flashlight"); // הקלאס של הפנס עצמו

  if (!wrapper || !flashlight) return;

  function moveFlashlight(e) {
    if (window.innerWidth > 1025) {
      requestAnimationFrame(() => {
        flashlight.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
      });
    }
  }

  wrapper.addEventListener("mouseenter", () => {
    flashlight.style.opacity = "1"; 
    document.addEventListener("mousemove", moveFlashlight);
  });

  wrapper.addEventListener("mouseleave", () => {
    flashlight.style.opacity = "0"; 
    document.removeEventListener("mousemove", moveFlashlight);
  });
});
</script>