Criação de Página HTML

por Don Corleone 26.04.16 18:36

Detalhes da questão

Endereço do fórum: http://www.somosmugiwara.com/
Versão do fórum: PunBB

Descrição

Vejam a página abaixo:

https://www.google.com.br/intl/pt-BR/chromecast/

Gostaria de criar algo parecido com isso, notem o efeito quando se coloca o mouse sobre as imagens, como poderia fazer algo assim?

por MateusAnjosV 30.04.16 15:01

Olá Connor!

Sentimos muitíssimo a demora no atendimento. Teste o script abaixo e, veja se é o que almeja:

Código:: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <title>Connor</title> <style type="text/css"> #img1, #img2 { width: 650px; height: 500px; margin-left: -1%; padding: 5px; float: left margin-right: 5%; filter: alpha(opacity=100); moz-opacity:1.0; opacity:1.0 ; -webkit-transition-duration: .50s; } </style> <script type="text/javascript"> $(function(){ //ANIMATION ONE $('#img1').hover(function(){ //IMG2 $('#img2').animate({ opacity: 0.25, right: "-=250", width: "250px" }); //IMG1 $('#img1').animate({ right: "-=250", width: "+=450px" }); }, function(){ //IMG2 $('#img2').animate({ opacity: 1, right: "-=250", width: "650px" }); //IMG1 $('#img1').animate({ right: "+=250", width: "-=450px" }); }); //ANIMATION TWO $('#img2').hover(function(){ //IMG2 $('#img1').animate({ opacity: 0.25, left: "-=250", width: "250px" }); //IMG1 $('#img2').animate({ left: "-=250", width: "+=450px" }); }, function(){ //IMG2 $('#img1').animate({ opacity: 1, left: "-=250", width: "650px" }); //IMG1 $('#img2').animate({ left: "+=250", width: "-=450px" }); }); }); </script> </head> <body> <img id="img1" src="https://static.pexels.com/photos/3847/jetty-landing-stage-sea-sky.jpeg"></img> <img id="img2" src="http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg"></img> </body> </html>

Até mais.

por Don Corleone 02.05.16 1:37

Já estou no processo de criação da página, consegui criar um efeito semelhante, mesmo assim agradeço a tentativa mano.

Pode fechar.

por Shek 02.05.16 14:03

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".

Hitskin.com

Criação de Página HTML