인터랙티브 개발 실무 끝장내기 강의를 듣고 정리한 내용입니다.
정리도
만들 내용
- 상품명
- 상품 설명
- 상품 사진 -> 페이지 이동에 따라 애니메이션 효과
- 오른쪽 페이지 버튼 -> 누르면 해당 페이지 이동 / 검은색 = 현재 페이지
HTML
<!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>페이징실습3</title>
<link rel="stylesheet" href="페이징실습3.css">
</head>
<body>
<ul class="pointWrap">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<section>
<h1>NIKE 스니커즈</h1>
</section>
<section>
<div class="innerWrap">
<h2>블레이저 미드 '77 빈티지</h2>
<p>
나이키 블레이저 미드 '77 빈티지는 빈티지한 중창 마감 처리로 나이키 올드 스쿨 농구화의 느낌을 살렸으며, 마치 수년간 보관해온 듯한 룩을 연출합니다.
</p>
</div>
<div class="imageWrap">
<img src="image/nike_1_1.JPG" class="image" alt="블레이저미드'77빈티지">
<img src="image/nike_1_2.JPG" class="image" alt="블레이저미드'77빈티지">
</div>
</section>
<section>
<div class="innerWrap">
<h2>에어맥스 95</h2>
<p>
나이키 에어맥스 95에는 놀랄만큼 편안한 착화감과 시선을 사로잡는 스타일, 그리고 재생 소재가 어우러져 있습니다. 펠트, 메쉬 그리고 인조가죽의 풍부한 텍스처를 선보이며 클래식 러닝
DNA에 새로운 디자인을 선사합니다. 적당히 두툼한 디자인과 부드러운 에어 쿠셔닝, 그리고 나이키 그라인드 고무 밑창으로 트렌드를 선도합니다. 이 제품은 중량 기준 20% 이상 재생
소재로 제작했습니다.
</p>
</div>
<div class="imageWrap">
<img src="image/nike_2_1.JPG" class="image" alt="에어맥스95">
<img src="image/nike_2_2.JPG" class="image" alt="에어맥스95">
</div>
</section>
<section>
<div class="innerWrap">
<h2>리액트 비전 3M</h2>
<p>
나이키 리액트 비전은 나이키 리액트 기술과 더없이 폭신한 설포로 차원이 다른 편안함을 제공합니다. 다양한 텍스처와 과장된 비율이 3M™ 디테일과 결합되어 초현실적인 독특한 감각을 더해줍니다.
</p>
</div>
<div class="imageWrap">
<img src="image/nike_3_1.JPG" class="image" alt="리액트비전3M">
<img src="image/nike_3_2.JPG" class="image" alt="리액트비전3M">
</div>
</section>
</body>
<script src="페이징실습3.js"></script>
</html>
CSS
body {
overflow-x: hidden;
background-color: #fff;
}
section {
position: relative;
height: 100vh;
width: 100vw;
}
section.active .imageWrap img {
opacity: 1;
visibility: visible;
transform: translate(0,0);
}
.innerWrap {
position: relative;
z-index: 100;
padding: 60px;
width: 340px;
margin-top: 50px;
background-color: rgba(255,255,255,0.7);
}
.imageWrap {
position: fixed;
width: 70%;
right: 5%;
top: 35%;
}
.imageWrap img {
position: absolute;
width: 400px;
transition: all 1s ease-in-out;
visibility: hidden;
opacity: 0;
transform: translate(-100px, -150px) rotate(-10deg);
}
.imageWrap img:nth-child(2) {
left: 400px;
top: 100px;
transition-delay: .2s;
transform: translate(100px, 150px) rotate(-10deg);
}
h1 {
color: #000;
text-align: center;
padding-top: 40vh;
font-size: 60px;
}
h2 {
color: #333;
font-size: 40px;
}
p {
color: #000;
font-size: 20px;
line-height: 32px;
}
.pointWrap {
position: fixed;
top: 40%;
right: 3vw;
z-index: 100;
}
.pointWrap li {
list-style: none;
width: 12px;
height: 12px;
margin-top: 15px;
cursor: pointer;
background-color: #999;
border-radius: 50%;
transition: background .3s ease-out;
}
.pointWrap li.active {
background-color: #000;
}
Javascript
window.onload = function () {
var section = document.getElementsByTagName('section');
var pointBtn = document.querySelectorAll('.pointWrap li');
var pageNum = 0;
var totalNum = section.length;
for (var i = 0; i < totalNum; i++) {
(function (index) {
pointBtn[index].onclick = () => {
pageNum = index;
pageChange();
window.scrollTo({
top: section[pageNum].offsetTop,
behavior: 'smooth'
});
}
})(i);
}
window.addEventListener('scroll', () => {
var yOffset = this.scrollY;
var height = window.innerHeight / 1.5;
for (var i = 0; i < totalNum; i++) {
if (yOffset > section[i].offsetTop - height &&
yOffset < section[i].offsetTop - height + section[i].offsetHeight) {
pageNum = i;
break;
}
}
pageChange();
})
function pageChange() {
for (var i = 0; i < totalNum; i++) {
section[i].classList.remove('active');
pointBtn[i].classList.remove('active');
}
section[pageNum].classList.add('active');
pointBtn[pageNum].classList.add('active');
}
}'Web' 카테고리의 다른 글
| Web Speech API - SpeechSynthesis (0) | 2022.01.19 |
|---|---|
| HTML 약어 구문 (0) | 2022.01.17 |
| TweenMax - Card Animation1 (0) | 2021.05.24 |
| 숫자게임 (0) | 2021.05.13 |
| 가위바위보 문제 (0) | 2021.05.12 |
댓글