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.