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

174

08 декабря 2019, 01:50

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

CodePen

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

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

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

Answer 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; 
}

<div class="night"></div> 
<div class="day"></div> 
<div class="content"> 
  <h1>header content</h1> 
  <p>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</p> 
</div>

Answer 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% 
}

<div class="block-svg"> 
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="parentsvg"  viewBox="0 0 983 553"> 
    <defs> 
      <filter id="filter"> 
        <feGaussianBlur stdDeviation="5"/> 
      </filter> 
      <mask id="mask"> 
        <circle cx="50%" cy="50%" r="15%" fill="white" filter="url(#filter)" id="ciclemask" ></circle> 
      </mask>     
    </defs>   
    <image xlink:href="https://i.imgur.com/DP4XCIV.jpg" width="100%" height="100%" mask="url(#mask)"></image> 
  </svg> 
</div>