Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

John Muniz

[Resolvido] Imagem que acompanha o cursor do mouse

Recommended Posts

Olá, caros amigos.

Não sei se estou postando na categoria certa, ou se estou fazendo algo errado (rsrs), mas estou precisando de ajuda e o primeiro forum que me veio à cabeça foi esse.

Preciso saber como seria possível reproduzir o efeito exibido neste site "http://typography.synthview.com/" (na parte em cor pink, logo ao final, com o texto "Download the 6 free weights of Novecento or try & buy the complete family"), em que o texto é feito por uma imagem, e por trás do mesmo existe uma sombra (formada por outra imagem ao seu fundo) que se move juntamente com o cursor do mouse.

Tenho quase certeza que esse efeito tem como base o código Javascript (daí a escolha da categoria). Código esse do qual eu não tenho conhecimento algum, por isso peço a vossa ajuda. Qualquer resposta será bem vinda, agradeço desde já, obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

JS você consegue ver abrindo o código-fonte:

 

$('#download .wrapper').css({backgroundPosition: '0 0'});
$(window).mousemove(function(e){
if ((window.Touch) || (navigator.userAgent.indexOf("Android") != -1)){}
else{
	var hor = Math.round(e.clientX/40-20);
	var vert = Math.round(e.clientY/40-15);
	$("#download .wrapper").css('background-position', hor+'px '+vert+'px')
};
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá, obrigado pela eficaz e rápida ajuda. Já sabia do código-fonte, mas apenas tinha encontrado o CSS com as devidas divs relacionadas a parte que eu mencionei, o que não me ajudou em nada. Estava com dificuldade para encontrar o JS do site, mas depois da sua resposta foi bem mais fácil. Até mais!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.