Alguém sabe se é possível fazer um código em JavaScript para que uma página em meu site receba uma transição lenta onde depois de alguns segundos ela fique de outra cor... Ou seja: quero que comece com opacidade 0 e depois de 1 minuto sua opacidade fiquem em 100% deixando tudo o que tem na pagina invisível.
3 Respostas
Você pode criar uma animação com CSS para executar após x segundos, exemplo:
body {
-moz-animation: hideMe 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: hideMe 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: hideMe 0s ease-in 5s forwards;
/* Opera */
animation: hideMe 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes hideMe {
to {
opacity:0;
}
}
@-webkit-keyframes hideMe {
to {
opacity:0;
}
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, metus sit amet placerat pharetra, nisi ipsum egestas lorem, ut luctus enim nisl a nulla. Quisque at ornare nulla, sit amet maximus turpis. Nulla congue luctus sem, id bibendum mauris pretium non. Ut pulvinar quam sed pharetra blandit. Etiam elementum massa tortor, sit amet vestibulum elit semper ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur porta mattis ligula, vel posuere est dignissim at. In ut efficitur felis. Duis sit amet pharetra nulla. Integer in risus ullamcorper, congue lacus vel, posuere augue. Curabitur fermentum nibh molestie libero rutrum, efficitur vulputate purus tempor. Mauris quis eleifend leo. Suspendisse sit amet nulla fringilla, consectetur sem ac, aliquet sapien. Etiam sed iaculis elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet, metus sit amet placerat pharetra, nisi ipsum egestas lorem, ut luctus enim nisl a nulla. Quisque at ornare nulla, sit amet maximus turpis. Nulla congue luctus sem, id bibendum mauris pretium non. Ut pulvinar quam sed pharetra blandit. Etiam elementum massa tortor, sit amet vestibulum elit semper ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur porta mattis ligula, vel posuere est dignissim at. In ut efficitur felis. Duis sit amet pharetra nulla. Integer in risus ullamcorper, congue lacus vel, posuere augue. Curabitur fermentum nibh molestie libero rutrum, efficitur vulputate purus tempor. Mauris quis eleifend leo. Suspendisse sit amet nulla fringilla, consectetur sem ac, aliquet sapien. Etiam sed iaculis elit.
</p>
Neste exemplo o body
ficará com opacidade 0 depois de 5 segundos.
Há diversas maneiras de se fazer isto usando jQuery
,algumas são :
Você pode usar setTimeOut()
do jQuery
que chama uma função depois de um determinado tempo ou executa um código depois de um tempo(em milissegundos).
Exemplo :
function explode(){
alert("Boom!");
}
setTimeout(explode, 2000);
Acima no código,a função explode()
será executada em 2 segundos(2000 milissegundos).
Para melhor entendimento,aconselho você olhar aqui na documentação sobre esta função.
Você pode usar também animate()
que também tem uma função parecida para poder executar um trecho de código ou função em um determinado tempo.
Exemplo :
var x = document.getElementById('home_page');
$(x).animate({opacity:1.0},2000);
No exemplo acima,a função animate()
irá dar opacidade a home_page
em 2 segundos(2000 milissegundos).
Para melhor entendimento lhe aconselho a dar uma olhada na documentação oficial aqui.
Se você quer deixar tudo invisível, então seria ao contrário, a opacidade começa em 1 e vai até 0.
É possível sim. Eu aconselho utilizar a função $.animate da biblioteca JQuery UI.
Veja o seguinte código.
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Animação com animate</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
</style>
<script>
$(function() {
var state = true;
$( "#button" ).click(function() {
$( "#effect" ).animate({
backgroundColor: "#FFFFFF",
color: "#000"
}, 1000 );
});
});
</script>
</head>
<body>
<div id="effect" style="background: #2d2d2d">
<h3 style="color: #fff">Deixar conteudo invisível</h3>
<p style="color: #fff">
SEU CONTEUDO, BLA BLA BLA, MAIS CONTEUDO AQUI
</p>
</div>
<button id="button">Deixar invisivel</button>
</body>
</html>
A função animate faz parte da biblioteca jquery-ui, por tanto você deve incluí-la em seu projeto.
Com a função animate, você pode especificar uma quantidade de tempo (em milissegundos) que a transição vai ocorrer. No código acima, eu coloquei 1000 (1 segundo).
Dentro dos braços {...} você pode colocar as propriedades que você quer animar. Neste caso coloquei as propriedades backgroundColor (para alterar o fundo) e color (para alterar cor da fonte).
-
-
como eu faco para que a animacao aconteca automaticamente depois de alguns segundos e nao apos clicar no botao? obrigada– miriamCommented 28/06/2016 às 3:42
-
Você pode declarar o
setTimeout(function(){//codigo de transicao aqui}, 2000);
sendo que neste caso, 2000 significa 2 segundos, já que o tempo é definido em milisegundos. Commented 28/06/2016 às 16:10