[email protected]/h3>

ūüéÉ Brincando de Assustar com CSS, HTML e um tiquinho de Javascript

Desenvolvimento

Fotos misteriosas aparecem o tempo todo na internet. A grande maioria já foi provado ser uma farsa. Mas será que é possível criar alguma coisa para assustar nossos amiguinhos e, de quebra, ainda aprender um pouco sobre CSS?

Mas é claro!

Primeiro quero que entrem no site do Vale do Medo e vejam a história sobre essa foto (acima). Após olharem bem para a foto, por alguns segundos, volte aqui para o site para entender a pegadinha.

Essa foto nada mais é do que duas imagens sobrepostas, sendo a de cima um PNG (onde está o homem sem rosto). Porém, a imagem que fica acima é restrita a qualquer ação com o mouse. Já se você tentar imprimir, o CSS vai cuidar para que o PNG não seja impresso. Além disso, tem uma pitada de Javascript (no exemplo, com jQuery), que vai cuidar para ativar o aparecimento e desaparecimento do homem sem rosto.

Criando as imagens

Originalmente foram baixas duas imagens da internet. Uma de um corredor qualquer e outra de um homem vestido todo de azul. As imagens usadas na postagem foram essas abaixo:

Para poder dificultar encontrar a imagem no Google, invertemos a foto original e adicionamos um tom mais sombrio, azulado. Paralelo a isso, encontramos uma foto de um homem todo de azul, também no Google. E trabalhamos essa foto para ficar com um aspecto mais combinado com a foto original.

√Č importante trabalhar com as duas imagens ao mesmo tempo, mas atento a deix√°-las em camadas separadas. Trabalhar em sombras com transpar√™ncias √© fundamental para que a imagem fique mais realista.

Exporte a imagem de fundo em .jpg e a imagem de frente em .png. Como a imagem PNG pode ficar um pouco pesada, dependendo do tamanho da imagem, acesse o site TinyPNG para reduzir ao m√°ximo a imagem PNG.

A imagem PNG vai ter na verdade vai ter as mesmas dimens√Ķes que a imagem em JPG, por√©m com uma √°rea de transpar√™ncia maior.

Você terá então duas imagens, igual a como se faz em desenhos animados, onde o fundo é separado do objeto a ser animado.

Código HTML

Uma vez criado e separado as imagens, precisamos criar o código HTML. Para isso, devemos criar um container e dentro desta uma imagem, depois mais um outro container ou elemento similar. No nosso caso, usaremos uma div, um p e, claro, um img.

<div class="imagem">
<p><img src="fundo.jpg"/></p>
<p>&nbsp;</p>
</div>

Esse pequeno trecho é mais do que suficiente.

Código CSS

J√° para o CSS precisamos compreender um pouco de hierarquia e pseudo-classes. A div “imagem” ser√° a refer√™ncia para <p>, onde estar√° a imagem PNG. Logo, para que seus filhos possam se localizar, ser√° necess√°rio defini-la como relativa. Assim, os filhos que forem definidos como absolutos considerar√£o o ponto inicial (0, 0) o ponto referencial (x, y) de seu pai. Al√©m disso, devemos colocar no <p> o background image onde ficar√° nosso PNG, ficando assim:

.imagem{
    position: relative;
}

.imagem p{
    margin: 0;
}

.imagem p:first-child{
    position: absolute;
    width:100%;
    height:100%;

    background-image: url('homem.png');
    background-size: 100%;
    pointer-events: none;

    z-index:10;
}

.imagem p img{
    width: 100%;
    height: auto;
}

/*Ser√° aplicado quando a imagem for dar o 'sustinho'*/
.bu{
    transform: scale(3);
    left: 47%;
    /* O left 48 foi usado porque o homem na imagem está à esquerda*/
    /* Adicionar esse espaço foi necessário para centralizá-lo.*/
}

Muita aten√ß√£o ao pointer-events: none. √Č esse o atributo que impedir√° o bot√£o direito, ou qualquer a√ß√£o, de funcionar por cima da imagem do homem. Aten√ß√£o tamb√©m a pseudo-classe first-child, pois¬†ela determina que o elemento a receber determinado estilo √© o primeiro <p>.

Observe que as larguras e tamanhos est√£o definidos como 100%. O que vai resultar em que o tamanho do conte√ļdo ser√° relacionado ao tamanho do¬†container.

Porém, como fazer para que a imagem não seja possível imprimir?

Media Queries não são apenas para responsividade de dispositivos móveis. Uma das coisas mais interessantes é poder especificar estilos para impressão. Simplesmente podemos adicionar algumas linhas:

@media print {
	.postid-265 .imagem > p:first-child{
		display: none;
	}
}

Javascript (jQuery)

Agora vamos adicionar um pouquinho de Javascript. Vamos utilizar jQuery porque o WordPress e a grande maioria dos CMS usados para sites j√° utilizam essa biblioteca.

Preste aten√ß√£o para que a imagem fique oculta at√© que ela seja completamente carregada. Isso porque a imagem jpg tender√°, nesse caso, a ser mais pesada do que a PNG. Se as imagens estiverem vis√≠veis antes, √© poss√≠vel que a imagem da mais leve seja mostrada antes da outra, o que vai estragar a sensa√ß√£o de ser uma √ļnica imagem.

jQuery(".imagem").hide(); //Esconde a imagem

//Mostra a imagem apenas depois que a imagem é carregada
jQuery(".postid-859 .imagem img").one("load", function() {
    jQuery(".postid-859 .imagem").show();
}).each(function() {
    if(this.complete) $(this).load();
});
//Faz a imagem do homem aparecer, adicionando uma classe a ela
//Neste exemplo colocamos pelo scroll para contar apenas quando aparecer a foto
$(document).scroll(function() {
    if ($(this).scrollTop() > jQuery(".postid-859 .imagem").position().top) {
         setTimeout(function(){
              jQuery(".postid-859 .imagem > p:first-child").addClass("bu");
         },5000); //5 segundos
         //Faz a imagem desaparecer logo depois do susto
         setTimeout(function(){
              jQuery(".postid-859 .imagem > p:first-child").hide();
         },5800); //5.8 segundos
    }
});

O código inteiro então ficaria:

<div class="imagem">
<div class="imagem">
<p><img src="fundo.jpg"/></p>
<p>&nbsp;</p>
</div>
<style>
.imagem{
    position: relative;
}
.imagem p{
    margin: 0;
}
.imagem p:first-child{
    position: absolute;
    width:100%;
    height:100%;
    background-image: url('homem.png');
    background-size: 100%;
    pointer-events: none;
    z-index:10;
}
.imagem p img{
    width: 100%;
    height: auto;
}
/*Ser√° aplicado quando a imagem for dar o 'sustinho'*/
.bu{
    transform: scale(3);
    left: 47%;
    /* O left 48 foi usado porque o homem na imagem está à esquerda*/
    /* Adicionar esse espaço foi necessário para centralizá-lo.*/
}
@media print {
 .postid-265 .imagem > p:first-child{
 display: none;
 }
}
</style>
<script>
jQuery(".imagem").hide(); //Esconde a imagem

//Mostra a imagem apenas depois que a imagem é carregada
jQuery(".postid-859 .imagem img").one("load", function() {
    jQuery(".postid-859 .imagem").show();
}).each(function() {
    if(this.complete) $(this).load();
});

//Faz a imagem do homem aparecer à frente, adicionando uma classe a ela
//Neste exemplo colocamos pelo scroll para contar apenas quando aparecer a foto
jQuery(document).scroll(function() {
    if (jQuery(this).scrollTop() > jQuery(".postid-859 .imagem").position().top) {
         setTimeout(function(){
              jQuery(".postid-859 .imagem > p:first-child").addClass("bu");
         },5000); //5 segundos
         //Faz a imagem desaparecer logo depois do susto
         setTimeout(function(){
              jQuery(".postid-859 .imagem > p:first-child").hide();
         },5800); //5.8 segundos
    }
});
</script>

E agora, a imagem finalizada:

 

Simples, não é?

√Č uma brincadeira b√°sica, mas ajuda voc√™ a pensar logicamente e a conhecer algumas coisinhas legais sobre CSS e Javascript. Deixe seu coment√°rio.

Rodrigo Portillo

@portillodesign

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.