OTT풍 배경화면 애니메이션

 

원래는 예고편 감상 버튼을 누르면 팝업 비디오가 뜨는 OTT풍 웹 사이트를 디자인 및 개발 중이었는데

욕심이 생겨 배경 이미지가 시간에 따라 변경되며 움직이는 자바스크립트 소스를 짰다.

 

(디자인) 피그마 파일

https://www.figma.com/file/w3InywIpC2MNjVbF1b2Pdb/Untitled?node-id=0%3A1

자바스크립트 소스

function randomBackground() {
    let random = Math.floor(Math.random() * 6);
    let backgroundImg = ['url("images/bg01.jpeg")', 'url("images/bg02.jpeg")', 'url("images/bg03.jpeg")', 'url("images/bg04.jpeg")', 'url("images/bg05.jpeg")', 'url("images/bg06.jpeg")'];
    document.querySelector('body').style.backgroundImage = backgroundImg[random];
    setTimeout(() => {
        randomBackground()
    }, 5000);
}

randomBackground()

결과물

https://smthousand.github.io/projectUsingHtmlCssVanilaJavascript/08_video-trailer-popup

 

 

백그라운드 이미지 이름의 01, 02로 네이밍 되어 있어 url, images 등이 반복되는데... 좀 더 간략화할 방법은 없을까?