728x90
- 오늘 할 것은 4번에 했던 명언에 인터넷에서 가져온 사진을 배경으로 추가해주고
- 그 사진이 계속 바뀌는 것 입니다.
- 저는 사진이 바뀌는 과정을 저번에 했던 슬라이드 형식을 가져왔습니다.
- 꽤나 고심을 한 흔적이 보이시나요? 좀 힘들었습니다.(생색내기 장인)
- 함께 코드를 보시죠
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="stylesheet" href="../homeworkcss/2023.04.17.css">
<title>Document</title>
</head>
<body>
<div>
<div class="wrap">
<div class="slider__inner">
<div class="slider s1"><img src="https://source.unsplash.com/random/?star" alt="이미지1"></div>
<div class="slider s2"><img src="" alt="이미지2"></div>
<div class="slider s3"><img src="" alt="이미지3"></div>
</div>
<div class="ddd">
<p class="p"></p>
<p class="q"></p>
</div>
</div>
</div>
</body>
<script hefer src="../homeworkJs/2023.04.17.js"></script>
</html>* {
margin: 0;
padding: 0;
}
.wrap {
margin: 0 auto;
justify-content: center;
width: 1000px;
height: 800px;
position: relative;
overflow: hidden;
}
.slider__inner {
width: 1000px;
height: 800px;
}
.slider__inner > div > img {
width: 1000px;
height: 800px;
}
.ddd {
position: absolute;
left: 9em;
top: 30px;
width: 700px;
margin-top: 50px;
border: 3px solid #fff;
text-align: center;
color: #fff;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.7);
}
.p {
display: inline-block;
font-size: 40px;
padding: 70px 50px 30px;
line-height: 1.5;
}
.q {
text-align: right;
margin-right: 15%;
font-size: 25px;
margin-bottom: 50px;
}- html과 css 입니다.
- wrap안에 사진이 있는 slider__inner와 명언이 있는 ddd 클라스의 태그가 있습니다.
- 그 안에 슬라이드 이펙트를 했을 때 봤던 구조와 같이 div태그 안에 img태그가 있습니다.
- 그리고 wrap을 기준점으로 삼고 ddd에 position:absolute를 주어 img태그 위쪽에 자리를 잡아주었습니다.
- 자 그럼 스크립트를 보시죠
const slider = document.querySelector(".slider__inner");
let index = 0
let aa = 0
let bb = 0
function func (){
aa = (index += 1) % 3
slider.style.transform = "translateY(" + -810 * aa + "px)";
slider.style.transition = "all 0.6s";
}
const dataQuestion = () => {
const random = Math.floor( Math.random()*30);
const random1 = Math.floor( Math.random()*30000);
const random2 = Math.floor( Math.random()*30000);
bb = random
fetch("../homeworkJson/dummy01.json")
.then(res => res.json())
.then(items => {
document.querySelector(".ddd .p").innerHTML=items.quotes[bb].quote
document.querySelector(".ddd .q").innerHTML=items.quotes[bb].author
if(aa == 1){
document.querySelector(".slider.s3 img").src = `https://source.unsplash.com/random/?moutian&t=${random2}`;
} else if (aa == 2) {
document.querySelector(".slider.s1 img").src = `https://source.unsplash.com/random/?city&t=${new Date().getTime()}`;
} else {
document.querySelector(".slider.s2 img").src = `https://source.unsplash.com/random/?star&t=${random1}`;
}
});
};
dataQuestion()
setInterval(func,5000);
setInterval(dataQuestion,5000)- 뭔가 배경만 해주었는데 많아졌습니다.
- 하지만 보면 다 어디선가 보았던 것입니다.
- 함수 func는 슬라이드 효과를 할 때 보았던 것과 똑같습니다.
- 넘어가는 크기가 현재사진의 크기만큼으로 변한 것일 뿐이죠
- 그리고 사진이 넘어갈 때 사진이 바뀌게 된다면 조금 위화감이 들기 때문에 사진을 3장으로 만들고 넘어가는 다다음장의 사진이 바뀌게 해주어서 사진이 바뀌는 부분이 사람에게 최대한 안보이도록 해주었습니다.
- 물론 사진이 더욱 많다면 위화감이 더 사라지겠지만 저는 이정도로 충분한 것 같습니다.
- 끝
더 큰 화면으로 보고싶으시다면 : https://kebab000.github.io/web2023/homework/homeworkindex/2023.04.17.html