Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Meriteiro

Outubro de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Quem está conectado
84 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 82 Visitantes :: 2 Motores de busca

Alexandr Martynov, Kyo Panda

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Criação de Página HTML

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Criação de Página HTML

Mensagem por Connor R. em Ter 26 Abr 2016 - 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?

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 853
Pontos Ativos : 2970

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr
  • 0

Resolvido Re: Criação de Página HTML

Mensagem por MateusAnjosV em Sab 30 Abr 2016 - 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.

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1417
Pontos Ativos : 2391

http://ajuda.forumeiros.com/

Resolvido Re: Criação de Página HTML

Mensagem por Connor R. em Seg 2 Maio 2016 - 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.

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 853
Pontos Ativos : 2970

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr

Resolvido Re: Criação de Página HTML

Mensagem por Shek Crowley em Seg 2 Maio 2016 - 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".


Seta Respeite as Regras gerais do fórum e conheça a nossa equipa.
Seta Veja a Lista de FAQs do seu Painel e Lista de tutoriais
Seta Ferramentas do Administrador
Seta Assinalar um Litígio


Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 15047
Pontos Ativos : 22218

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5