다른 명언
728x90
반응형
저번에 제작한 명언 사이트에 이어 명언과 작가가 바뀌는 타이밍에 배경도 무작위로 바뀌는 사이트를 제작하였습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#main {
height: 300px;
background-color: #000000;
background-size: cover;
color: #fff;
margin: 0 auto;
padding: 50px;
position: relative;
text-align: center;
background-repeat: no-repeat;
background-position: center;
}
#main .container {
background-color: rgba(0, 0, 0, 0.5);
}
#main .quote {
padding: 20px;
text-decoration: underline;
color: #d5d2d2;
}
.button {
display: inline;
position: absolute;
width: 50px;
height: 30px;
background-color: red;
color: #fff;
text-align: center;
transform: translateY(-50%);
cursor: pointer;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="main">
<div class="button">stop</div>
<div class="container">
<h1 class="result"></h1>
<h2 class="quote"></h2>
</div>
</div>
</body>
</html>바뀌는 배경이 밝은 경우 글자가 잘 보이지 않아 명언과 작가 부분을 container로 감싸고 이 영역에 background-color에 rgba 속성을 주어 명암을 조금 어둡게 설정 하였습니다.
<script>
let number = 0;
fetch("json/dummy01.json")
.then(name => name.json())
.then(result => {
let result1 = document.querySelector(".result")
let quote1 = document.querySelector(".quote")
let stop = document.querySelector(".button")
let main1 = document.querySelector("#main")
let Interval = setInterval(() => {
number = Math.floor(Math.random()*30 + 1)
result1.innerHTML = result.quotes[number].quote;
quote1.innerHTML = "- " + result.quotes[number].author;
const unsplashUrl = `https://source.unsplash.com/random/?na&t=${Date.now()}`;
main1.style.backgroundImage =`url('${unsplashUrl}')`;
}, 3000);
stop.addEventListener("click", () => {
if(Interval){
clearInterval(Interval)
Interval = null;
} else {
Interval = setInterval(() => {
number = Math.floor(Math.random()*30 + 1)
result1.innerHTML = result.quotes[number].quote
quote1.innerHTML = "- " + result.quotes[number].author
const unsplashUrl = `https://source.unsplash.com/random/?na&t=${Date.now()}`;
main1.style.backgroundImage =`url('${unsplashUrl}')`;
}, 3000);
};
});
});
</script>main영역에 그림이 랜덤으로 들어가야 해서 선택자로 main을 지정해 주었습니다.
새로 추가된 내용입니다.
const unsplashUrl = `https://source.unsplash.com/random/?na&t=${Date.now()}`;
main1.style.backgroundImage =`url('${unsplashUrl}')`;이 부분은 Unsplash API를 사용하여 랜덤한 이미지를 가져와서 선택자로 지정된 main1이라는 요소의 배경 이미지로 설정하는 부분입니다.
첫 번째 줄에서는 unsplashUrl이라는 변수를 선언합니다. 이 변수에 할당된 값은 Unsplash API에서 랜덤한 이미지를 가져오는 URL입니다. URL의 마지막 부분인 t=${Date.now()}는 브라우저 캐시를 우회하기 위해 현재 시간 정보를 쿼리 문자열로 추가한 것입니다.
두 번째 줄에서는 main1 요소의 배경 이미지를 unsplashUrl 변수에서 가져온 URL로 설정합니다. 이를 위해 style 속성에서 backgroundImage 속성을 사용하고, URL을 url() 함수로 감싸서 문자열로 변환합니다. 이렇게 설정된 배경 이미지는 다음번에 실행되는 setInterval() 함수가 호출될 때마다 새로운 이미지로 변경됩니다.
728x90