Unsplash 이미지 랜덤으로 사진 불러오기

Unsplash 이미지 랜덤으로 사진 불러오기

 

 

 

모던자바스크립트 마무리 문제 1 명언랜덤표시

바로 전에 했던 모던 자바스크립트 마무리 문제였던

명언 json파일 가져와 랜덤으로 보여주기에

추가적으로

unsplash의 이미지를 랜덤으로 불러와 명언과 같이 배경 이미지도 10초마다 바뀌게 설정해줬습니다. 

 

 

💜 명언

코드 보기 / 완성 화면

 

 

 

HTML

<div id="result">
    <div class="quote"></div>
    <div class="author"></div>
</div>

HTML은 이렇게 마무리해줬습니다.

 

script

<script>
    const Result = document.querySelector("#result");
    const Quote = result.querySelector(".quote");
    const Author = result.querySelector(".author");


    const dataresult = () => {
        fetch('json/dummy.json')
            .then(res => res.json())
            .then(items => {
                const randomIndex = Math.floor(Math.random() * items.length);
                Quote.textContent = items[randomIndex].quote;
                Author.textContent = "- " + items[randomIndex].author;

                const img = new Image();
                img.onload = function () {
                    const newBgUrl = `url(${img.src})`;
                    document.body.style.backgroundImage = newBgUrl;
                }
                img.src = `https://source.unsplash.com/random/?travel=${Date.now()}`;
            })
            .catch((err) => console.log(err));
    }
    dataresult();
    setInterval(dataresult, 10000);
</script>

저번에 했던 명언과 작가 이름을 가져오는 코드에 Unsplash 에서 이미지를 가져와 페이지의 배경 이미지로 설정하는 기능을 추가해줬습니다.

 

img 객체는 새로운 Image 인스턴스를 생성합니다.

 이 객체는 Unsplash에서 가져올 이미지를 담당합니다.

 

img.onload 메소드는 이미지가 로드된 후 실행되는 콜백 함수입니다.

콜백함수는 새로운 배경 이미지 URL을 생성해 document.body.style.backgroundImage 속성에 할당합니다.

 이때 url()함수를 사용해 img.src의 URL을 문자열로 변환합니다.

 

img.src 속성은 Unsplash에서 가져올 이미지의 URL을 설정

Date.now() 를 이용해 캐싱을 방지

 

dataresult() 함수와 setInterval()함수를 이용해 10초마다 새로운 명언과 작가 이름, 그리고 배경 이미지를 업데이트 합니다.

 

 

style

<style>
    @import url('https://webfontworld.github.io/score/SCoreDream.css');
    @import url('https://webfontworld.github.io/Poppins/Poppins.css');

    * {
        margin: 0 auto;
        padding: 0;
    }

    body {
        width: 100%;
        height: 100vh;
        /* background-color: #ccc; */
        /*background-image: url(https://source.unsplash.com/movie/?travel);*/
        background-size: cover;
        position: relative;
        overflow: hidden;
        transition: background-image 1s ease-in-out;
    }

    body::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(14, 14, 14, 0.292);
        z-index: -1;
    }

    #result {
        /* border: 1px solid #fff; */
        background-color: #1a0c0cac;
        padding: 30px;
        width: 700px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 20px;
        line-height: 70px;
        font-family: 'Poppins';
        color: #b7bd07;
    }

    .quote {
        font-weight: bold;
        font-size: 25px;
        line-height: 35px;
        font-family: 'Poppins';
    }
</style>

https://source.unsplash.com/movie/?travel를 사용해 배경 이미지 크기를 cover로 설정

poasition relative 로 설정해 자식 요소들의 위치를 조정할 수 있도록 합니다.

 

overflow hidden 속성으로 화면 외부로 넘치는 내용을 가려주었습니다.

 

사진 넘어가는 부분이 어색해서

transition background image 1s ease-in-out 속성으로 배경 이미지 변경시 1초동안 트랜지션을 설정해줬습니다.