Как сделать фон постепенно меняющимся цветом?

Я пытаюсь создать веб-страницу, где цвет фона изображения постепенно меняет цвета. Я знаю, как изменить цвет фона в Javascript, но я не знаю, как «оживить» его так сказать (без использования Flash).Как сделать фон постепенно меняющимся цветом?

источник

2012-02-20 Isaiah Bugarin

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

-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
transition: all 1s ease-in-out;

С, что на CSS каждый раз, когда какое-либо значение стиля меняется, что изменение анимированный от тока до нового значения на 1 сек.

Работает только на современных браузерах. См. Пример: click

источник

2012-02-20 22:38:18 MarcinJuraszek

Это действительно сработало очень хорошо. Я просто создал массив с набором цветов в JS и сказал ему генерировать случайный цвет из этого массива каждые несколько секунд. Благодаря! –

Вы можете использовать функцию setTimeout():

function animateBg() 
{ 
    myElement.style.backgroundColor = someNewValue; 
    setTimeout(animateBg, 20); // 20 milliseconds 
}

и вызывать animateBg() в обработчике onload вашего тела. Например, <body onload="animateBg()">.

источник

2012-02-20 22:30:32

Вы также можете использовать 'setInterval()' функцию (с теми же аргументами), которые делают "повторное вооружению" ваш 'animateBg()' таймер внутри 'animateBg()' ненужными (просто вызовите 'setInterval (animateBg, 20)', чтобы функция 'animateBg()' вызывалась каждые 20 миллисекунд. –

В любом случае вам действительно нужно добавить тест 'if', чтобы решить, продолжать ли анимацию, т. е. тестировать ли фон достигнет целевого цвета. (И с помощью 'setInterval()' вам понадобится дополнительная переменная, чтобы сохранить ссылку на идентификатор таймера, чтобы вы могли ее отменить, плюс 'setTimeout()' имеет тенденцию работать лучше, чем 'setInterval()' в отношении того, что произойдет, если пользователь переключится на другую вкладку, а затем вернется позже.) – nnnnnn

Хорошая точка. Я предположил, что это была вечная анимация цикла по какой-то причине. –

Я бы попытался использовать JQuery color plugin. Посмотрите на примеры here (нажмите «Демо»), они, похоже, делают именно то, что вы описываете.

источник

2012-02-20 22:39:35 mck

Вот пример того, как оживить фон тела тег:

function animateBg(i) { 
    document.body.style.backgroundColor = 'hsl(' + i + ', 100%, 50%)'; 

    setTimeout(function() { 
     animateBg(++i) 
    }, i); 
} 
animateBg(0);

Имейте в виду, что HSL не броузерах, вы также можете сделать трюк с шестигранной/RGB цветов.

Jsfiddle ссылка: http://jsfiddle.net/euthg/

источник

2012-02-20 23:03:51

Как сделать фон постепенно меняющимся цветом?

ответ

Смежные вопросы