JS-скрипт, позволяющий задать прозрачность фону в области курсора

#javascript #css #svg

Уважаемые пользователи!
Есть два DIV-блока с фонами. Один - ночной, он расположен поверх дневного. Нужно
сделать так, чтобы при наведении курсора на любую область фона, у него(.night) в этой
области задавалось свойство: background(0,0,0,0), при чём, чтобы можно было настраивать
свойства этой области.

CodePen

Я смог только сделать так:

.night:hover {
background(0,0,0,0)
}


Что скрывало весь ночной фон. Но как сделать так, чтобы скрывало только область курсора?
Благодарю за помощь! :)
    

Ответы

Ответ 1

Если я правильно понял, то нужно, чтобы "просвечивалась" какая-то область вокруг
курсора? Если да, то можно поменять местами картинки, день сделать сверху и при помощи
свойства clip-path показывать только нужную его область, изменяя её в зависимости от
положения курсора.



const dayElement = document.querySelector('.day');

document.addEventListener('mousemove', (evt) => {
  dayElement.style.clipPath = `circle(50px at ${evt.x}px ${evt.y}px)`;
});
*{
  padding: 0;
  margin: 0;
}

.night {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url('https://i.imgur.com/ufsi8Ae.jpg');
  background-size: cover;
}
.day {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url('https://i.imgur.com/DP4XCIV.jpg');
  background-size: cover;
  z-index: 1;
  clip-path: circle(0 at 0 0);
}

.content{
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  color: #fff;
  padding: 30px;
  box-sizing: border-box;
}

h1{
  margin-bottom: 20px;
}



  
header content
  
text content text content text content text content text content text content
text content text content text content text content text content text content text
content text content text content text content text content text content text content
text content text content text content text content text content text content text
content text content



Ответ 2

Не могу сказать, что это полностью мое решение, но было интересно и некоторые комментарии
выше помогли. Поэтому как-то так:



parentsvg = document.getElementById('parentsvg');
circle =  document.getElementById('ciclemask');
parentsvg.onmousemove = function(event) {
    cx = event.x;
    cy = event.y;
    circle.setAttribute('cx', cx);
    circle.setAttribute('cy', cy);
}
svg {
  display:block;
}

.block-svg {
  position: relative;
  background: url("https://i.imgur.com/ufsi8Ae.jpg") no-repeat 0 0/100% 100%
}