Design,Tutoriais - 7 de dezembro de 2018

Destacando um Elemento HTML (coachmark): Efeito Spotlight ( com CSS3 e Javascript puro)

Obs. Se você só quer o código pronto, pule para o final do post. Ou acesse o link do JSFiddle.

As vezes precisamos encontrar formas de destacar elementos na tela (coachmark). Isso é muito útil principalmente quando você está tratando de pequenos tutoriais, afim de ajudar os usuários. Convém, também, entregar soluções simples e esteticamente elegantes para que ajudem no relacionamento com a ferramenta.

Faz algum tempo, um cliente meu quis criar um modo tutorial em seu sistema. Esse tutorial não deveria permitir que outras áreas da tela fossem clicadas até que a pessoa confirmasse que compreendeu. Como designer, lembrei que, anos atrás, no Android, a Google usava uma espécie de spotlight, mas não vi nada a respeito para websites. E, também, eu precisava que fosse dinâmico. Então eu resolvi usar meus conhecimentos de CSS3 e Javascript para usar essa ideia. E é disso que eu falarei neste tutorial.

Apesar de eu ter usado originalmente jQuery, para compartilhar com todos, resolvi fazer uma versão com Javascript puro, de forma que você poderá adicionar a qualquer aplicação web que você já tenha.

Criando a Estrutura: HTML e o CSS3

Para criar o efeito, vamos usar uma propriedade interessante do CSS3 chamada clip-path. O clip-path permite que criemos elementos vetoriais que serão usados como máscaras. Já utilizamos essa propriedade em um outro exemplo, no caso, sobre um loader.

Exemplo de uso do clip-path:

Dessa forma, se já não tiver, teu projeto deve possuir um container principal que é pai de todos os elementos, mas abaixo do <body>. Se não houver, o crie, é até uma questão lógica de organização para evitar problemas futuros. Veja um código de exemplo:

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body data-rsssl=1>
	<div id="container" class="container">
	</div>
</body>
</html>
xxxxxxxxxx
 
0
<!doctype html>
1
<html>
2
    <head>
3
        <meta charset="UTF-8">
4
        <meta name="viewport" content="width=device-width, initial-scale=1">
5
    </head>
6
<body data-rsssl=1>
7
    <div id="container" class="container">
8
    </div>
9
</body>
10
</html>

A div container vai ser justamente o elemento que iremos clippar. Para ajudar em nosso exemplo, vamos criar um form básico dentro do container, ficando assim:

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body data-rsssl=1>
	<div id="container" class="container">
		 <div class="form">
		  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">?</div>
		</div> 
	</div>
</body>
</html>
xxxxxxxxxx
 
0
<!doctype html>
1
<html>
2
    <head>
3
        <meta charset="UTF-8">
4
        <meta name="viewport" content="width=device-width, initial-scale=1">
5
    </head>
6
<body data-rsssl=1>
7
    <div id="container" class="container">
8
         <div class="form">
9
          First name:<br>
10
          <input type="text" name="firstname" id="firstname" value="Mickey">
11
          <br>        <br>
12
          Last name:
13
          <br>
14
          <input type="text" name="lastname" id="lastname" value="Mouse">
15
          <br><br>
16
          <input type="submit" id="submeter" value="Submit">
17
          <div class="btn_ajuda">?</div>
18
        </div> 
19
    </div>
20
</body>
21
</html>

Para finalizar nosso HTML, vamos colocar a caixa de mensagens. Repare que no código abaixo a caixa de mensagem vai ter uma div chamada spacer. O objetivo dessa div vai ser adicionar o espaço do elemento referência, para que o código funcione também em dispositivos móveis e ela deverá ficar fora do container da aplicação. Mais à frente isso vai ficar mais bem explicado.

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body data-rsssl=1>
	<div id="container" class="container">
		 <div class="form">
		  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">?</div>
		</div> 
	</div>

		<!-- Mensagem de Ajuda-->
		<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>
</body>
</html>
x
 
0
<!doctype html>
1
<html>
2
    <head>
3
        <meta charset="UTF-8">
4
        <meta name="viewport" content="width=device-width, initial-scale=1">
5
    </head>
6
<body data-rsssl=1>
7
    <div id="container" class="container">
8
         <div class="form">
9
          First name:<br>
10
          <input type="text" name="firstname" id="firstname" value="Mickey">
11
          <br>        <br>
12
          Last name:
13
          <br>
14
          <input type="text" name="lastname" id="lastname" value="Mouse">
15
          <br><br>
16
          <input type="submit" id="submeter" value="Submit">
17
          <div class="btn_ajuda">?</div>
18
        </div> 
19
    </div>
20
21
        <!-- Mensagem de Ajuda-->
22
        <div class="mensagem_area" id="mensagemAjuda">
23
            <div class="spacer"></div>
24
            <div class="mensagem">
25
                <h2></h2>
26
                <p></p>
27
                <button onclick="ocultarAjuda()">
28
                  OK, entendi
29
                </button>
30
            </div>
31
        </div>
32
</body>
33
</html>

Agora que o HTML está pronto, vamos para o CSS inicial. A primeira fase é estabelecer todo comportamento da div que estamos usando como container. Também precisamos adicionar uma cor ao plano de fundo, que vai ser a cor que usaremos como base para a área em lowlight.

A animação ficará a cargo do recurso transition do CSS3. Importante ressaltar que uma animação criada por CSS é mais leve e possui melhor frequência do que uma criada pelo Javascript. Isso porque o navegador tenta usar a renderização da GPU nesses casos. Dessa forma, vamos aplicar o parâmetro transition para aplicar o efeito.

body{
		    margin: 0;
		    font-family: sans-serif;
		    background-color: #15d115;
}
		    
.container{
			background-color: white;
			min-width: 100%;
/* Obs. A largura do clip-path, abaixo, está definido
como 3840 de diâmetro, porque ultrapassa
o tamanho do 4K - O clip-path considera o raio.
Posteriormente, você poderá trabalhar com
adição de classes, se você quiser evitar
a definição inicial desse tamanho,
mas é necessário haver uma para poder
ativar a animação.*/
			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%;
}
xxxxxxxxxx
 
0
body{
1
            margin: 0;
2
            font-family: sans-serif;
3
            background-color: #15d115;
4
}
5
            
6
.container{
7
            background-color: white;
8
            min-width: 100%;
9
/* Obs. A largura do clip-path, abaixo, está definido
10
como 3840 de diâmetro, porque ultrapassa
11
o tamanho do 4K - O clip-path considera o raio.
12
Posteriormente, você poderá trabalhar com
13
adição de classes, se você quiser evitar
14
a definição inicial desse tamanho,
15
mas é necessário haver uma para poder
16
ativar a animação.*/
17
            clip-path: circle(1920px at center);
18
            -webkit-clip-path: circle(1920px at center);
19
            transition: 2s ease-in-out;
20
            -webkit-transition: 1s ease-in-out;
21
22
            position: absolute;
23
            min-width: 100%;
24
            min-height: 100%;
25
}

O parâmetro position como absolute, com suas larguras e alturas mínimas marcados como 100% servirão para emular o comportamento do body. Isso só é necessário porque alguns sistemas costumam ter áreas menores do que a primeira dobra do navegador. Nesse caso, apenas, é necessário aplicar esses três parâmetros.

Já para o CSS do bloco de mensagem, você pode fazer algo do jeito que preferir. Apenas é importante lembrar que esse bloco deverá ficar com position absolute, ou fixed, dependendo de como for sua aplicação, para que possa se encaixar no local correto.

.mensagem_area{
		 position: fixed;
		 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;
}
xxxxxxxxxx
 
0
.mensagem_area{
1
         position: fixed;
2
         opacity: 0;
3
          pointer-events: none;
4
          transition: 2s ease-in-out;
5
          -webkit-transition: 1s ease-in-out;
6
          color: white;
7
            
8
          display: flex;
9
          justify-content: flex-start;
10
          flex-wrap: wrap;
11
}
12
.mensagem_area.show{
13
            opacity: 1;
14
            max-width: 100%;
15
            pointer-events: all;
16
}
17
.mensagem_area .spacer{
18
    visibility: hidden;  
19
}
20
.mensagem_area .mensagem{
21
            width: 250px;
22
            padding: 15px;
23
            box-sizing: border-box;
24
 }
25
.mensagem_area .mensagem h2{
26
            font-size: 18px;
27
            font-weight: bold;
28
            margin: 0;
29
}
30
.mensagem_area .mensagem p{
31
            font-size: 16px;
32
}

Criando as Funções Javascript

Agora basta que a gente crie as funções de aparecer e desaparecer o spotlight. Originalmente eu havia usado jQuery, pois ele possui soluções rápidas e funcionais como o offset nativo e outerWidth, mas com uma pesquisa rápida conseguir adaptar, apesar do código ter ficado um pouquinho maior.

O código consiste em 4 blocos:

Capturar largura e posição em relação ao document, do objeto referência (que será passado como parâmetro), fazendo os cálculos apropriados para adição do círculo. Você irá reparar que é usado como base o raio e não o diâmetro, pois é a referência do parâmetro clip-path;
Adicionar o clip ao container;
Adicionar os textos da mensagem a partir dos parâmetros passados;
Aplicar os estilos com os novos parâmetros. O timeout que precede a adição da classe show da mensagem existe para que o texto apareça após a transição do spotlight.

function mostrarAjuda(id_obj, titulo, mensagem){
	//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");
	}, 1500);
	
}
xxxxxxxxxx
 
0
function mostrarAjuda(id_obj, titulo, mensagem){
1
    //Pegar raio e posição
2
    var raio = document.querySelector('#' + id_obj).offsetWidth / 2;
3
    var offset = document.querySelector('#' + id_obj).getBoundingClientRect();
4
        offset.top = offset.top + document.body.scrollTop;
5
        offset.left = offset.left + document.body.scrollLeft;
6
    
7
    //Adicionar clip
8
    var clip = "circle(" + parseInt(raio).toString() + "px at " + parseInt(offset.left + raio).toString() + "px " + parseInt(offset.top + offset.height/2).toString() + "px)";
9
    
10
    var container = document.querySelector('#container');
11
        container.style.clipPath = clip;
12
        container.style.webkitClipPath = clip;
13
        
14
    //Textos
15
    document.querySelector("#mensagemAjuda h2").innerHTML = titulo;
16
    document.querySelector("#mensagemAjuda p").innerHTML = mensagem;
17
    
18
    //Estilos
19
    document.querySelector("#mensagemAjuda .spacer").style.width = parseInt(raio * 2 + offset.left).toString() + "px";
20
    document.querySelector("#mensagemAjuda .spacer").style.height = parseInt(raio).toString() + "px";
21
    document.querySelector("#mensagemAjuda").style.top = parseInt(offset.top).toString() + "px";
22
23
    setTimeout(function(){
24
        document.querySelector("#mensagemAjuda").classList.add("show");
25
    }, 1500);
26
    
27
}

Por fim, basta adicionar uma função que restaure as configurações originais dos estilos e textos.

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 = "";
	}, 2000);
}
xxxxxxxxxx
 
0
function ocultarAjuda(){
1
    //Limpar
2
    document.querySelector("#mensagemAjuda").classList.remove("show");
3
    container.style.clipPath = "circle(1920px at center)";
4
    container.style.webkitClipPath = "circle(1920px at center)";
5
    setTimeout(function(){
6
        document.querySelector("#mensagemAjuda h2").innerHTML = "";
7
        document.querySelector("#mensagemAjuda p").innerHTML = "";
8
    }, 2000);
9
}

Como sempre, deixei o código completo para você testar ou copiar. No caso, o código está no jsfiddle e você pode visualizar abaixo:

Se você gostou da publicação, curta e compartilhe esta página com o maior número de pessoas. Aproveite e curta nossa página do Facebook.

ATUALIZAÇÃO: Que tal experimentar uma versão com blur, usando o html2canvas? Obs. É meio pesado. Dê preferência a usar em projetos para desktop.

Rodrigo Portillo

Gosto tanto de design que aprendi programação e regras para garantir a estabilidade de meus projetos. Trabalho e trabalhei com desenvolvimento full-stack em diversas linguagens, como Flex, PHP, Java, Javascript, dentre outras. Ainda trabalhei alguns anos como designer gráfico e ilustrador.
Busque mais informaçoes pelo LinkedIn.

Velho Bit

Criando a Estrutura: HTML e o CSS3

Exemplo de uso do clip-path:

Criando as Funções Javascript

Rodrigo Portillo