skip to Main Content

I want to create a fancy hero section for my company. I’m using clip-path and some JS to achieve a paint spray effect on mouse move, and it works perfectly in the VCS preview. However, when I try it in web browsers like Chrome, Mozilla, or Edge, it doesn’t work. It seems like the cursor’s position can’t be found properly. The clip-path shows in random places and for a few seconds or doesn’t show at all.
What’s more? if its i left corner without margin: auto; it’s work great but it had to be center.

Page where i want to use it: https://hoffmannteile.de/
Here’s the code I’m using (it has to be in one file because it’s a closed CMS):

document.addEventListener('DOMContentLoaded', function () {
    const cars = document.querySelectorAll('.car');
    cars.forEach(car => {
        car.addEventListener('mousemove', function (e) {
            const x = e.pageX - car.offsetLeft;
            const y = e.pageY - car.offsetTop;

            car.style.setProperty('--x', x + 'px');
            car.style.setProperty('--y', y + 'px');
        });
    });
});
.paint {
  max-height: 338px;
  max-width: 600px;
  margin: auto;
}

.malowanie {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.cont {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cont .car {
  position: relative;
  height: 338px;
  width: 600px;
  background-image: url('https://composer.idosell.com/gfx/30226/SprinterWhite.png');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cont .car::before {
  content: '';
  position: absolute;
  z-index: 1;
}

.cont .car::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--img);
  background-size: cover;
  clip-path: circle(0px at 0 0);
  z-index: 2;
  transition: clip-path 0.15s;
}

.cont .car:hover::after {
  clip-path: circle(100px at var(--x) var(--y));
  cursor: url('https://composer.idosell.com/gfx/30226/paint-spray-icon.svg'), auto;
}
<section class="paint">
    <div class="malowanie">
        <div class="cont">
            <div class="car" style="--img: url('https://composer.idosell.com/gfx/30226/SprinterRedHof.png')"></div>
        </div>
    </div>
</section>

2

Answers


  1. Chosen as BEST ANSWER

    I forgot to mention that everything works fine when I'm in the top-left corner on the browser with index.html. However, after embedding it on the website, it still fails


  2. Use mouse coordinate relative to the clientX/Y and use Element.getBoundingClientRect() left and top values

    document.addEventListener('DOMContentLoaded', function() {
      const cars = document.querySelectorAll('.car');
      cars.forEach(car => {
        car.addEventListener('mousemove', function(e) {
          const bcr = car.getBoundingClientRect();
          const x = e.clientX - bcr.left;
          const y = e.clientY - bcr.top;
          car.style.setProperty('--x', x + 'px');
          car.style.setProperty('--y', y + 'px');
        });
      });
    });
    body {
      min-height: 300px; /* just to test scroll */
    }
    
    .paint {
      max-height: 338px;
      max-width: 600px;
      margin: auto;
    }
    
    .malowanie {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    
    .cont {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .cont .car {
      position: relative;
      height: 338px;
      width: 600px;
      background-image: url('https://composer.idosell.com/gfx/30226/SprinterWhite.png');
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .cont .car::before {
      content: '';
      position: absolute;
      z-index: 1;
    }
    
    .cont .car::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--img);
      background-size: cover;
      clip-path: circle(0px at 0 0);
      z-index: 2;
      transition: clip-path 0.15s;
    }
    
    .cont .car:hover::after {
      clip-path: circle(100px at var(--x) var(--y));
      cursor: url('https://composer.idosell.com/gfx/30226/paint-spray-icon.svg'), auto;
    }
    <h1>Some title to test offset</h1>
    <section class="paint">
      <div class="malowanie">
        <div class="cont">
          <div class="car" style="--img: url('https://composer.idosell.com/gfx/30226/SprinterRedHof.png')"></div>
        </div>
      </div>
    </section>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search