CHECK POINT ๐Ÿ‘โ€๐Ÿ—จ

  • math.random
  • new Image()
  • classList.add
  • prepend

์ด๋ฏธ์ง€ ๋žœ๋ค์œผ๋กœ ๋„ฃ๊ธฐ

const body = document.querySelector("body");

const IMG_NUMBER = 5;

function paintImage(imgNumber){
    const image = new Image();
    image.src = `/dev/๋ฐ”๋‹๋ผJS/images/bg${imgNumber + 1}.jpg`; // randomNumber๊ฐ€ 0์„ ์ถœ๋ ฅํ•  ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— + 1์„ ์ฒ˜๋ฆฌํ•ด์ค€๋‹ค.
    image.classList.add("bgImage");
    body.prepend(image);
}

function getRandom(){
    const number =  Math.floor(Math.random() * IMG_NUMBER);
    return number;
}

function init(){
   const randomNumber = getRandom();
   paintImage(randomNumber);
}

init();

CSS๋„ ์ž‘์„ฑํ•ด์ค๋‹ˆ๋‹ค.

@keyframes fadeIn{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bgImage{
    position: absolute;
    top:0;
    left:0;
    z-index: -1;
    width:100%;
    height:100%;
    animation: fadeIn .5s linear
}

image.png