JS로 momentum만들기-4 (Back Ground Image)

이번 시간에는 Back Groud Image에 대해서 처리하는 것을 해보겠다.

 

파일 구조

우선 현재까지의 파일 구조는 이렇게 되어있다. 여기서 images 폴더에 이미지를 5장 넣은 것인데 랜덤으로 이미지를 띄어주기 위해서 파일 이름을 1,2,3,4,5로 지정한 것이다.

 

JS에서 랜덤 숫자를 가져오는 것은 단순하다.

const number = Math.floor(Math.random() * 5);

Math를 사용해서 위의 식처럼 가져온다면 0, 1, 2, 3, 4 중 1개의 숫자를 가져올 수 있다. 이는 다른 언어에서 사용되는 방식과 매우 유사하다.

 

이 작업은 간단하니 전체 코드를 보고 설명해보자.

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

const IMG_NUMBER = 5;

function paintImage(imgNumber) {
    const image = new Image();
    image.src = `images/${imgNumber + 1}.jpg`;
    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();

위의 식에서 함수 paintImage는 랜덤 숫자를 이용해 이미지 파일을 화면에 표시해주는 함수이다.

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

이미지가 보이는 방식은 다음의 CSS파일을 사용해 지정해주는 데, 이 방법을 사용해서 이미지가 fadeIn되게 만들어 줄 수 있다.

 

위의 방식대로한다면 5개의 이미지가 매번 랜덤으로 불려와 화면에 표시됨을 볼 수 있다.