Сайт. Вслед за изменением положения мыши участок под курсором (участок фона сайта) меняется на другой фон

Question

Меняется круглая область среднего размера вокруг курсора и при движении мышкой по сайту эта область, где другой фон, движется вслед положению мыши. Как это реализовать? Через фигуру, потом слежение положения курсора (JS), накинуть стили области с размытием границ и сделать другой фон (CSS)? Есть у кого какие мысли, может наработки, образцы какие-либо..?

Answer 1

можно так, можно через canvas

const source = document.querySelector('#source');
const hole = document.querySelector('#hole');
hole.style.backgroundSize = source.clientWidth+"px "+source.clientHeight+'px';

source.onmouseleave = function(){hole.style.display="none"};
source.onmousemove = function(e){
  hole.style.display="block"
  hole.style.top=e.clientY-128+"px";
  hole.style.left=e.clientX-128+"px";
  console.log(-e.clientX+"px "+(-e.clientY-128+"px"));
  hole.style.backgroundPosition = -e.clientX+128+"px "+(-e.clientY+128+"px");
};

body{
  margin: 0;
  padding: 0;
}
#source{
  position: relative;
  height:100vh;
  background-repeat: no-repeat no-repeat;
  background-size: cover;
  background-image: url(https://nnst1.gismeteo.ru/images/2019/09/shutterstock_1352203610-630x387.jpg);
  overflow:hidden
}
#hole{
  position: absolute;
  width:256px;
  height:256px;
  border-radius: 50%;
  background-repeat: no-repeat no-repeat;
  background-image: url(https://proficomment.ru/wp-content/uploads/2018/11/leto-2019-v-rossii.jpg);
  background-position: 0 0;
  display: none;
}

<div id='source'>
  <div id='hole'>
  </div> 
</div>

БЛОГ НА HUSL

Сайт. Вслед за изменением положения мыши участок под курсором (участок фона сайта) меняется на другой фон

Ответы (1 шт):