JavaScript color transition

Navigation
0

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

    
asked by anonymous 27.06.2016 / 16:04

3 answers

0

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

You can use setTimeOut() of jQuery that calls a function after a certain time or executes a code after a time (in milliseconds).

Example: 

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

Above in the code, the explode() function will be executed in 2 seconds (2000 milliseconds).

For a better understanding, I would advise you look here documentation on this function.

You can also use animate() which also has a similar function to be able to execute a piece of code or function in a certain time.

Example: 

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

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

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

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

    
27.06.2016 / 16:23
1

You can create an animation with CSS to run after x seconds, for 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 opacified 0 after 5 seconds.

    
27.06.2016 / 16:40
0

If you want to leave everything invisible, then it would be the opposite, the opacity starts at 1 and goes up to 0.

Yes, it is possible. I would 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 an amount of time (in milliseconds) that the transition will occur. In the code above, I put 1000 (1 second).

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

    
27.06.2016 / 16:29
SELECT tag is duplicating with MaterializeCSS and AngularJS Error fetching location