[바닐라JS로 크롬 앱 만들기] Image Background

[출처-유튜브 노마드 코더 Nomad Coders]

https://youtu.be/aHlJqxLREcY

 

 

먼저 사용할 이미지를 다운받는다

https://unsplash.com/

Beautiful Free Images & Pictures | Unsplash

 

 

 

-이미지 랜덤으로 불러오기

 

bg.js

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

const IMG_NUMBER = 3;

function paintImage(imgNumber){
    const image = new Image();
    image.src = `/images/${imgNumber + 1}.jpg`;
    body.appendChild(image);
}

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

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

init();

새로고침하면 이미지가 랜덤으로 변경된다

 

 

index.css

body {
    color: #34495e;
    background-color: #2c3e50;
}

.btn {
    cursor: pointer;
}

h1 {
    color: #34495e;
    transition: color 0.5s ease-in-out;
}

.clicked {
    color: #7f8c8d;
}

.form,
.greetings {
    display: none;
}

.showing {
    display: block;
}

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

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

 

 

bg.js

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

// 이미지 갯수를 변수로 설정해놓으면 나중에 함수에서 수정할 필요 없이
// 여기서 숫자 바로 수정하면 됨!
const IMG_NUMBER = 3;

function paintImage(imgNumber){
    // 이미지 객체 생성
    const image = new Image();
    image.src = `/images/${imgNumber + 1}.jpg`;
    //image 태그에 bgImage라는 class 추가
    image.classList.add('bgImage');
    //body에 image 태그 추가
    //parentNode.prepend(tag) : 부모노드의 first child 앞에 요소 추가
    body.prepend(image);
}

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

function init(){
    //getRandom 실행해서 랜덤한 이미지번호를 얻고
    const randomNumber = genRandom();
    //그걸 paintImage 함수에 넣어 해당 이미지를 작업
    paintImage(randomNumber);
}

init();