Как плавно изменить background в css через js

Question

Есть Html страничка с css файлом.

<div> <p id="head_img">Text with background</p> </div>

#head_img{
   background: url('backgrounds/back1.jpg');
}

в папке backgrounds находится 3 файлa .jpg (back1.jpg, back2.jpg и back3.jpg) Нужно с помощью Js сделать так, чтоб элемент с фоном изменял фон на следующий из папки backgrounds каждые 10 секунд, плюс возникла необходимость делать это плавно.

var intervalID = window.setInterval(setBack, 10000);

var i = 1
var files = 3
var file_url = ''

function setBack() {
            
    file_url = "background: url(backgrounds/back", i, ".jpg);"
    document.write(file_url);

    document.getElementsByClassName('background')[0].style = file_url
    i ++
    if (i > files){
        i = 0
    }
}

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

Answer 1

не нахожу информации на счет того как вставлять номер файла в текст

template literals

const num = 1
const text = `filename${num}.jpg` // >> filename1.jpg

//урлы картинок
const imageUrls = [
'https://i.picsum.photos/id/171/1024/768.jpg?hmac=_yLLr6cdgtDdIuddjWGO9Ci3_Enwm8iXTNV28hMRa-w',
'https://i.picsum.photos/id/631/1024/768.jpg?hmac=CbtPkeaVNgggpvzg7x2YGt1cCpNWKFTekTO63lLeA7Y',
'https://i.picsum.photos/id/443/1024/768.jpg?hmac=ebj0EvQ5DDEaWX_8LbT1xpqNz-qpqem9d3DmOgsbXlc'
]

//Кешируем картинки, чтобы не было мерцаний при первом использовании.
const images = imageUrls.map(url => {
  const img = new Image()
  img.src = url
  return img
});

// с какого индекса начинаем перебор, index 0 уже установлен в CSS
let index = 1;

setInterval(()=>{
  document.body.style.backgroundImage = `url(${images[index].src})`
  index = index >= images.length-1 ? 0 : index + 1
}, 5000)

body {
  background: white no-repeat center cover fixed;
  background-image: url(https://picsum.photos/1024/768);
  background-size: cover;
  transition: 2s;
}

Answer 2

Вариант с использованием css animation

body {
  background: white no-repeat center cover fixed;
  background-image: url(https://picsum.photos/1024/768);
  background-size: cover;
  transition: all .5s ease-in;
  animation: animBg 30s linear infinite;
}

@keyframes animBg {
  0%,
  32% {
    background-image: url('https://i.picsum.photos/id/171/1024/768.jpg?hmac=_yLLr6cdgtDdIuddjWGO9Ci3_Enwm8iXTNV28hMRa-w');
  }
  33%,
  66% {
    background-image: url('https://i.picsum.photos/id/631/1024/768.jpg?hmac=CbtPkeaVNgggpvzg7x2YGt1cCpNWKFTekTO63lLeA7Y');
  }
  67%,
  99% {
    background-image: url('https://i.picsum.photos/id/443/1024/768.jpg?hmac=ebj0EvQ5DDEaWX_8LbT1xpqNz-qpqem9d3DmOgsbXlc');
  }
  100% {
    background-image: url('https://i.picsum.photos/id/171/1024/768.jpg?hmac=_yLLr6cdgtDdIuddjWGO9Ci3_Enwm8iXTNV28hMRa-w');
  }
}

БЛОГ НА HUSL

Как плавно изменить background в css через js

Ответы (2 шт):