Как изменить фоновое изображение по таймеру

Question

У меня есть простое полноэкранное фоновое изображение, как показано ниже:

body {
 /* The background image used */
 background-image: url("../images/bg-one.jpg");

 /* Full height */
 height: 100vh; 
 width: 100vw;

 /* Hide scroll */
 overflow-x: hidden;
 overflow-y: hidden;

 /* Center and scale the background image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

Я хотел бы знать, как я могу изменять фоновое изображение каждые 5 секунд с помощью перехода с постепенным исчезновением.Извините, если это кажется вопросом новичка, но я только начинаю изучать Js / Jquery.

Мой второй вопрос: возможно ли сделать это с использованием чистого CSS3 или js / jquery будет работать лучше?

Большое спасибо, Эйдан

Answer 1

Вы не можете сделать fade-in fade-out анимацию на background-image, потому что этот атрибут не может быть анимирован. Вместо этого вы можете сделать 2 фиксированных элемента, которые расположены друг над другом.

Вы не можете сделать тайм-аут / интервал в простом CSS, вам придется использовать JS. Я использовал setInterval функцию, которая переключает .active состояние двух элементов, класс .active добавляет к элементу opacity с transition - пример здесь: https://jsfiddle.net/2cxmeq7p/

Answer 2

Я создал тестовый пример для вас, используя jquery: https://codebrace.com/editor/afec3e661

Чистым js вы можете заменить jquery на document.body.style.backgroundImage = "url ('" + a [i ++] + "')";

Тестовый пример для изменения фона с эффектом затухания / исчезновения: https://codebrace.com/editor/afef034d6