Ir para conteúdo

POWERED BY:

Arquivado

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

Carcleo

Objetos do formulário aparecendo

Por , em Javascript

Recommended Posts

Carcleo    4

Carcleo
Postado

Olá, pelo que devo procurar para conseguir fazer um efeito como o da página abaixo

 

https://www.freelancer.com/login?t=b&utm_expid=294858-313.jlgZCXXVStiY50Zye16XUA.1&goto=YTFiZGNlMTlhM2I5ZmVmYmI3Njc0NWQwOGZlMDMxNTRodHRwczovL3d3dy5mcmVlbGFuY2VyLmNvbS9qb2JzL215c2tpbGxzLw,

 

Onde ao abrir a página, os elementos do formulários vão aparecendo um a um como se fosse um "Motion Twen" do Flash CS6!

 

Outra dúvida: Dá para usar esse recurso também para o caso de ao passar o mouse sobre uma div "display:none", ela passar a "display:blok" porem abrindo aos poucos?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Dá sim.

 

Estude sobre css3 transitions

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Ok.

 

Fiz e rodei nos Browser mas não obtive o efeito desejado.

 

 

<html>
  <head>
    <style>
       #teste
       {
           width: 300px;
           heigth: 150px;
           background-color: red;
           -webkit-transition: 0.5s;
           -moz-transition: 0.5s;
           -ms-transition: 0.5s;
  border: 1px solid #95A9B3;
       }
    </style>
  </head>
  <body>
      <div id="teste"><font size:33px>Site</font></div>
  </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Na verdade o que eu gostaria é que ao abrir a página, a div aumentasse seu tananho de 0px à 500px acionando o efeito sem interferência do usuário!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#test {

width: 0;

height: 0;

overflow: hidden;

font-size: 33px;

background-color: red;

border: 1px solid #95A9B3;

-webkit-transition: all 1.5s;

-moz-transition: all 1.5s;

-ms-transition: all 1.5s;

transition: all 1.5s;

}

#test.is-active {

width: 500px;

height: 200px;

}

</style>

</head>

<body>

<div id="test">Site</div>

 

<script type="text/javascript">

var $test = document.getElementById('test');

setTimeout(function() {

$test.classList.add('is-active');

}, 200);

</script>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito