원래는 예고편 감상 버튼을 누르면 팝업 비디오가 뜨는 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 등이 반복되는데... 좀 더 간략화할 방법은 없을까?
'TIL LIST > JavaScript' 카테고리의 다른 글
공부하면서 헷갈렸던 구문 (0) | 2022.08.16 |
---|---|
Color Changer (0) | 2022.08.15 |
pokemon demo (0) | 2022.08.15 |
7시간 짜리 코드 (0) | 2022.08.04 |
[chrome app 코딩 챌린지] 5. 위치 정보 가져오기(API) (0) | 2022.06.26 |