web-dev-qa-db-fra.com

Changer la couleur d'arrière-plan toutes les 30 secondes (transition de fondu)

J'aimerais que quelqu'un me dise quel est le code pour faire une couleur d'arrière-plan d'une page Web (la couleur d'arrière-plan de la page entière) pour changer (transition de fondu) toutes les 30 secondes en une variété de couleurs donnée. C'est simple? Je suppose que css le rendra plus facile?

J'ai cherché sur Internet et je n'ai trouvé que des dégradés, ce qui n'est pas ce que je veux. Merci d'avance. J'ai cherché codepen et jsfiffle pour des exemples mais personne n'avait quelque chose d'aussi simple: /

Exemple: lors de la navigation sur ma page, je souhaite que la couleur d'arrière-plan passe du bleu au vert, puis à l'orange, puis au bleu, etc. etc. :)

csscolorsbackgroundcss-transitionsfade
12
Billef32

Voici une approche jQuery, pour compléter la réponse de Bogdan, qui prend 3 paramètres: selector (exemple, ".container" ou "div"), colors (un tableau de couleurs pour basculer entre) et time (contrôle la fréquence à laquelle la couleur bgd change). Je l'ai réglé pendant 3 secondes (3000) pour que vous puissiez le voir en action plus facilement, mais vous pouvez l'augmenter à 30000 (30 secondes).

jQuery(function ($) {
    function changeColor(selector, colors, time) {
        /* Params:
         * selector: string,
         * colors: array of color strings,
         * every: integer (in mili-seconds)
         */
        var curCol = 0,
            timer = setInterval(function () {
                if (curCol === colors.length) curCol = 0;
                $(selector).css("background-color", colors[curCol]);
                curCol++;
            }, time);
    }
    $(window).load(function () {
        changeColor(".container", ["green", "yellow", "blue", "red"], 3000);
    });
});
.container {
    background-color: red;
    height:500px;
    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
    -khtml-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"></div>
2
Marventus

Il est également possible de le faire sans JavaScript du tout, en utilisant des animations CSS3.

html,
body {
  height: 100%;
}

body {
  -webkit-animation: background 5s cubic-bezier(1,0,0,1) infinite;
  animation: background 5s cubic-bezier(1,0,0,1) infinite;  
}


@-webkit-keyframes background {
  0% { background-color: #f99; }
  33% { background-color: #9f9; }  
  67% { background-color: #99f; }
  100% { background-color: #f99; }
}

@keyframes background {
  0% { background-color: #f99; }
  33% { background-color: #9f9; }  
  67% { background-color: #99f; }
  100% { background-color: #f99; }
}
28
ckuijjer

Quelque chose comme ce violon

CSS:

body {
    background: blue; /* Initial background */
    transition: background .5s; /* .5s how long transitions shoould take */
}

Javascript:

var colors = ['green', 'orange', 'blue']; // Define Your colors here, can be html name of color, hex, rgb or anything what You can use in CSS
var active = 0;
setInterval(function(){
    document.querySelector('body').style.background = colors[active];
    active++;
    if (active == colors.length) active = 0;
}, 30000);
9
Bogdan Kuštan