Spotlight Help Effect - BLURRED

Efeito usado para destacara área em tutoriais (Spotlight)

by Rodrigo Portillo

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id="container" class="container">

  <div class="form">
    <h2>
    Clique no ícone de ?
    </h2>
    First name:<br>
    <input type="text" name="firstname" id="firstname" value="Mickey">
    <br>		  <br>
    Last name:
    <br>
    <input type="text" name="lastname" id="lastname" value="Mouse">
    <br><br>
    <input type="submit" id="submeter" value="Submit">
    <div class="btn_ajuda" onclick="mostrarAjuda('firstname', 'Seu Primeiro Nome', 'Digite seu primeiro nome. Se tiver um nome composto, digite as palavras queo compõe.')">?</div>
  </div> 
</div>
<div class="mensagem_area" id="mensagemAjuda">
  <div class="spacer"></div>
  <div class="mensagem">
    <h2></h2>
    <p></p>
    <button onclick="ocultarAjuda()">
      OK, entendi
    </button>
  </div>
</div>

CSS

body{
  margin: 0;
  font-family: sans-serif;
  background-color: black;

}

.container{
  background-color: white;
  background-image: url('https://velhobit.com.br/wp-content/uploads/2017/07/gatos.jpg');
  background-size: cover;
  
  min-width: 100%;
  clip-path: circle(1920px at center);
  -webkit-clip-path: circle(1920px at center);
  transition: 2s ease-in-out;
  -webkit-transition: 1s ease-in-out;

  position: absolute;
  min-width: 100%;
  min-height: 100%;
}

.mensagem_area{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: 2s ease-in-out;
  -webkit-transition: 1s ease-in-out;
  color: white;

  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.mensagem_area.show{
  opacity: 1;
  max-width: 100%;
  pointer-events: all;
}
.mensagem_area .spacer{
  visibility: hidden;  
}
.mensagem_area .mensagem{
  width: 250px;
  padding: 15px;
  box-sizing: border-box;
}
.mensagem_area .mensagem h2{
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}
.mensagem_area .mensagem p{
  font-size: 16px;
}



/**form de exemplo**/
.form{
    
  margin: 20px auto;
  padding: 20px;
  border: 1px dashed #ccc;
  max-width: 300px;
  position: relative;
}
.btn_ajuda{
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 2px 6px;
  background-color: #15d115;
  color: white;
  border-radius: 50%;
  cursor: help;
}

#fundo{
  -webkit-filter: blur(1px);
  filter: blur(2px);
  position: absolute;
  opacity: .7;
}

JavaScript

function mostrarAjuda(id_obj, titulo, mensagem){
	//Desfocar fundo
  html2canvas(document.body, {
   onrendered: function(canvas) {
            window.location.href = canvas.toDataURL('image/jpeg');
        },
        allowTaint: true,
        taintTest: false
    }).then(function(canvas) {
  	canvas.id = "fundo";
    document.body.prepend(canvas);
	});

  //Pegar raio e posição
  var raio = document.querySelector('#' + id_obj).offsetWidth / 2;
  var offset = document.querySelector('#' + id_obj).getBoundingClientRect();
  offset.top = offset.top + document.body.scrollTop;
  offset.left = offset.left + document.body.scrollLeft;

  //Adicionar clip
  var clip = "circle(" + parseInt(raio).toString() + "px at " + parseInt(offset.left + raio).toString() + "px " + parseInt(offset.top + offset.height/2).toString() + "px)";

  var container = document.querySelector('#container');
  container.style.clipPath = clip;
  container.style.webkitClipPath = clip;

  //Textos
  document.querySelector("#mensagemAjuda h2").innerHTML = titulo;
  document.querySelector("#mensagemAjuda p").innerHTML = mensagem;

  //Estilos
  document.querySelector("#mensagemAjuda .spacer").style.width = parseInt(raio * 2 + offset.left).toString() + "px";
  document.querySelector("#mensagemAjuda .spacer").style.height = parseInt(raio).toString() + "px";
  document.querySelector("#mensagemAjuda").style.top = parseInt(offset.top).toString() + "px";

  setTimeout(function(){
    document.querySelector("#mensagemAjuda").classList.add("show");
  }, 1000);

}

function ocultarAjuda(){
  //Limpar
  document.querySelector("#mensagemAjuda").classList.remove("show");
  container.style.clipPath = "circle(1920px at center)";
  container.style.webkitClipPath = "circle(1920px at center)";
  setTimeout(function(){
    document.querySelector("#mensagemAjuda h2").innerHTML = "";
    document.querySelector("#mensagemAjuda p").innerHTML = "";
    document.querySelector( '#fundo' ).remove();
  }, 1000);
}