Javascript color transition

Asked

Viewed 564 times

0

Does anyone know if it is possible to make a code in Javascript so that a page on my site receives a slow transition where after a few seconds it is of another color... That is: I want you to start with opacity 0 and after 1 minute your opacity is 100% leaving everything on the page invisible.

javascript

3 answers

1

You can create an animation with CSS to run after x seconds, example:

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>

In this example the body will be opacity 0 after 5 seconds.

0


There are several ways to do this using jQuery,some are :

You can use setTimeOut() of jQuery calling a function after a certain time or executing a code after a time (in milliseconds).

Example : 

function explode(){
  alert("Boom!");
}
setTimeout(explode, 2000);

Above in the code, explode() will run in 2 seconds(2000 milliseconds).

For better understanding, I advise you to look here in the documentation on this function.

You can use too animate() which also has a similar function to be able to execute a code snippet or function at a given time.

Example :

var x = document.getElementById('home_page');

$(x).animate({opacity:1.0},2000);

In the above example, animate() will give opacity to home_page in 2 seconds(2000 milliseconds).

For better understanding I advise you to take a look at the official documentation here.

0

If you want to make everything invisible, then it would be the other way around, the opacity starts at 1 and goes up to 0.

It is possible yes. I advise using the $.Animate function of the Jquery UI library.

See the following code.

<!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>

The Animate function is part of the jquery-ui library, so you should include it in your project.

With the Animate function, you can specify a amount of time (in milliseconds) that the transition will occur. In the code above, I put 1000 (1 second).

Inside the arms {...} you can place the properties you want to animate. In this case I put the backgroundColor properties (to change the background) and color (to change the font color).

  • Thanks for your help!

  • how do I make the animation happen automatically after a few seconds and not after clicking the button? thanks

  • You can declare the setTimeout(function(){//codigo de transicao aqui}, 2000); in this case, 2000 means 2 seconds, since the time is set in milliseconds.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.