Как реализовать меняющийся фон?

Question

[Тимафей Садовых]

Как реализовать меняющийся фон без перезагрузки страницы по таймеру на JS?

Answer 1

[Alex]

Это можно сделать на чистом CSS: jsfiddle.net/isquariel/bumprc7z Вместо цвета можно подставить картинки.

Comments

[Appp Zooo]

Спросили по тегу javascript, потому о цсс даже не думал, но вариант с цсс намного лучше)

[Тимафей Садовых]

Да прикольно, а можно ли сделать смену цветом медленней? webkit никак не получается понять

[Alex]

Тимафей Садовых, да, для этого нужно менять число в свойстве animation. Сейчас там написано 14s, попробуйте заменить, скажем, на 50s. Вот тут есть немного инфы о том, как устроены анимации: htmlacademy.ru/courses/80/run/1 А webkit — это просто браузерный префикс.

[Тимафей Садовых]

isqua: Спасибо!

[AlexRAV]

isqua Здравствуйте, надеюсь вы мне ответите) При вашем способе обнаружился один неприятный баг-при первом проигрывании анимации перед сменой фона происходит едва заметное пропадание фона (выглядит будто на долю секунды происходит смена на белый фон, затем все восстанавливается). При последующей работе анимации такого не происходит, именно при первом воспроизведении. Не можете помочь?

[Димитрий Николенко]

Есть еще один баг -первая картинка в списке сначала увеличивается и потом проигрываются остальные. Затем все заново, проблема не пропадает. Так же, при первом воспроизведении между картинками есть очень маленькая пауза

Answer 2

[Appp Zooo]

Пример, не лучший, но все же
и еще один получше, еще.

Comments

[Тимафей Садовых]

По свежее ничего нет? :)

[Appp Zooo]

Тимафей Садовых: дополнил ответ :)

Answer 3

[teotlu]

Можно как-то так.
Цикл for в этом коде инициирует предзагрузку изображений (но не откладывает появление первого изображения до загрузки всех изображений, этот вариант мне показался наилучшим).