5

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

CodePen

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

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

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

1
  • то что Вы хотите можно сделать на WebGL , но хотите ли вы этого? 20 мар 2019 в 6:37

2 ответа 2

5

Если я правильно понял, то нужно, чтобы "просвечивалась" какая-то область вокруг курсора? Если да, то можно поменять местами картинки, день сделать сверху и при помощи свойства 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>

3
  • Да, именно так! Это действительно хороший способ! Но есть несколько нюансов: Можно ли как-то стилизовать эффект круга, т.е придать мягкость, сделать тень, придающую эффект "свечения"? И как сделать так, чтобы круг не вырезал контентную часть сайта(заголовки, шапку, футер) и т.д?
    – Karl Klaus
    19 мар 2019 в 21:01
  • 2
    @KarlKlaus по второму вопросу - исправил в ответе, по первому, возможностей стилизации довольно много, можете почитать тут - css-tricks.com/clipping-masking-css 20 мар 2019 в 6:55
  • 1
    @KarlKlaus вот тут генератор фигур для clip-path - bennettfeely.com/clippy 20 мар 2019 в 6:56
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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.