Меняйте цвет фона каждые 30 секунд (переход с постепенным исчезновением)

Я хотел бы, чтобы кто-нибудь сказал мне, каков код для изменения цвета фона веб-страницы (цвета фона всей страницы) (постепенного перехода) каждые 30 секунд на заданное цветовое разнообразие. Это просто? Думаю, css облегчит задачу?

Я поискал в Интернете и нашел только градиенты, которые мне не нужны. Заранее спасибо. Я искал примеры в codepen и jsfiffle, но ни у кого не было чего-то настолько простого: /

Пример: при просмотре моей страницы я хочу, чтобы цвет фона изменился с синего на зеленый, а затем на оранжевый и снова синий и так далее ... :)


colors css background css-transitions fade
person Billef32    schedule 04.01.2015    source источник
comment
определить классы с помощью background-color, добавить переход, например transition: background-color 1000ms linear;, и использовать JavaScript для добавления / удаления этих классов.   -  person ckuijjer    schedule 04.01.2015
comment
Добавить сделал это, но как мне добиться эффекта затухания? Также можно подробнее рассказать о Javascript? Зачем вообще использовать js? Не будет ли проще, если я вызову класс на своей html-странице и оставлю его там как есть?   -  person Billef32    schedule 04.01.2015
comment
Да, вы могли бы использовать для этого CSS-анимацию   -  person ckuijjer    schedule 04.01.2015
comment
Спасибо, но я нашел свой ответ (ниже). Хорошего дня.   -  person Billef32    schedule 04.01.2015

Ответы (3)


arrow_upward
5
arrow_downward

Вот подход jQuery, чтобы завершить ответ Богдана, который принимает 3 параметра: selector (например, ".container" или "div"), colors (массив цветов для переключения между ними) и time (контролирует, как часто изменяется цвет bgd. ). Я установил его на 3 секунды (3000), чтобы вам было легче увидеть его в действии, но вы можете увеличить его до 30000 (30 секунд).

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>

person Marventus    schedule 05.01.2015
comment
Очень хорошо!! Действительно :) Надеюсь, этот пост поможет другим людям, ищущим что-то подобное :) - person Billef32; 05.01.2015

arrow_upward
33
arrow_downward

Также можно сделать это вообще без какого-либо JavaScript, используя анимацию 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; }
}

person ckuijjer    schedule 04.01.2015
comment
Спасибо за ваш код. Я вижу, что он работает довольно быстро, хотя время установлено на 5 с. Почему это происходит? :) - person Billef32; 04.01.2015
comment
Это общее время анимации, поэтому оно занимает 5 секунд, разделенных на 3, то есть примерно 1,5 секунды на цвет. Функция Безье обрабатывает затухание, если вам нужно больше контроля над этим, вы можете продублировать цвета фона внутри ключевых кадров (например, добавить 30% для # f99) - person ckuijjer; 04.01.2015

arrow_upward
10
arrow_downward

Что-то вроде этой скрипки

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);
person Bogdan Kuštan    schedule 04.01.2015
comment
молодец мой друг :) большое спасибо за помощь :) - person Billef32; 04.01.2015
comment
Могу ли я контролировать, сколько времени будет оставаться цвет, прежде чем он начнет меняться? - person Billef32; 04.01.2015
comment
@ Billef32 30000 контролирует интервал между изменениями - person Bogdan Kuštan; 04.01.2015
comment
30000 - это миллисекунды? Я имею в виду, могу ли я поставить что-то вроде 15 в качестве значения? или я должен добавить задержку перехода? Я добавил задержку перехода в css, но это не сработало. - person Billef32; 04.01.2015
comment
Как изменить код, чтобы подсчет начинался с цветов в массиве и не имел начального цвета? Или в вашем примере первым отображаемым цветом будет зеленый цвет из массива, а не синий. Как я могу это сделать? - person lowtechsun; 14.07.2016