<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AirMug Pro</title>
<link href="<https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap>" rel="stylesheet">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<nav class="global-nav">
<div class="global-nav-links">
<a href="#" class="golbal-nav-item">Rooms</a>
<a href="#" class="golbal-nav-item">Ideas</a>
<a href="#" class="golbal-nav-item">Stores</a>
<a href="#" class="golbal-nav-item">Contact</a>
</div>
</nav>
<nav class="local-nav">
<div class="local-nav-links">
<a href="#" class="product-name">AirMug Pro</a>
<a href="">개요</a>
<a href="">제품사양</a>
<a href="">구입하기</a>
</div>
</nav>
</div>
<section class="scroll-section" id="scroll-section-0">
<h1>AirMug-Pro</h1>
<div class="sticky-elem main-message">
<P>온전히 빠져들게 하는<br>최고급 세라믹</P>
</div>
<div class="sticky-elem main-message">
<P>주변 맛을 느끼게 해주는<br>주변 맛 허용 모드</P>
</div>
<div class="sticky-elem main-message">
<P>온종일 편안한<br>맞춤형 손잡이</P>
</div>
<div class="sticky-elem main-message">
<P>새롭게 입가를<br>찾아온 매혹</P>
</div>
</section>
<section class="scroll-section" id="scroll-section-1">
<p class="description">
<strong>보통 스크롤 영역</strong>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet, soluta dicta unde vel voluptatem natus tempora perferendis dolore at, similique quibusdam accusamus sit vero tenetur odio consequatur reprehenderit ipsum omnis. Nam velit voluptatem, nesciunt neque officiis quae earum, doloribus dicta iure in veritatis iste corrupti quibusdam fuga? Molestiae velit ea nemo? Animi recusandae dolor quas reiciendis dolorum officiis repellat excepturi voluptatum soluta, sequi, quibusdam facilis earum deleniti modi corporis quam. Sit ad similique est nihil culpa at voluptates repellendus praesentium obcaecati dolor consequatur, fuga omnis nam corrupti hic minus atque, quisquam, iusto ut odit quod. Necessitatibus nostrum voluptatem corrupti tempora aspernatur doloremque pariatur aut veritatis quibusdam, nobis ab omnis laborum eaque reprehenderit odit nemo quod dolorum saepe quos voluptate quia eius inventore sit? Omnis quaerat odio sit saepe vel fuga at, dolorum praesentium et facilis, repellendus commodi eveniet modi earum itaque perferendis perspiciatis ea. Tenetur, voluptatibus? Unde assumenda, molestiae quidem deserunt similique dolorem a in architecto illum ipsum! Distinctio ex voluptatum aliquid ut debitis consequatur, minus harum eos vero voluptatem optio porro velit ad labore impedit magnam aut atque quas recusandae! Mollitia culpa esse neque porro asperiores facere autem perferendis commodi repudiandae quod voluptates earum quia molestiae, iste ipsum nam.
</p>
</section>
<section class="scroll-section" id="scroll-section-2">
<div class="sticky-elem main-message">
<p>
<small>편안한 촉감</small>
입과 하나 되다
</p>
</div>
<div class="sticky-elem desc-message">
<p>
클래식한 취향, 모던한 스타일의 미니멀리즘 또는 그 사이의 조화를 추구하는 모든 공간, 예산과 취향에 맞는 완벽한 솔루션이 준비되어 있어요.
</p>
<div class="pin"></div>
</div>
<div class="sticky-elem desc-message">
<p>
디자인 앤 퀄리티 오브 스웨덴, <br>메이드 인 차이나
</p>
<div class="pin"></div>
</div>
</section>
<section class="scroll-section" id="scroll-section-3">
<p class="mid-message">
<strong>Retina 머그</strong><br>
아이디어를 광활하게 펼칠<br>
아름답고 부드러운 음료 공간
</p>
<p class="canvas-caption">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ut atque necessitatibus consequuntur error ab aut architecto voluptatibus amet earum quas animi, dignissimos sed quisquam fugit laboriosam iure dolorem autem.
</p>
</section>
<footer class="footer">
<p>2020 1분코딩</p>
</footer>
<script src="js/main.js"></script>
</body>
</html>
(() => {
let yOffset = 0; //window pageY 대신 사용할 변수
let prevScrollHeight = 0; //현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합
let currentScene = 0; //현재 활성화된(눈 앞에 보고있는) 씬(scroll-section)
const sceneInfo = [
{
//0
type: "sticky",
heighNum: 5,
scrollHeigh: 0,
objs: {
container: document.querySelector('#scroll-section-0')
}
},
{
type: "normal",
heighNum: 5,
scrollHeigh: 0,
objs: {
container: document.querySelector('#scroll-section-1')
}
},
{
type: "sticky",
heighNum: 5,
scrollHeigh: 0,
objs: {
container: document.querySelector('#scroll-section-2')
}
},
{
type: "sticky",
heighNum: 5,
scrollHeigh: 0,
objs: {
container: document.querySelector('#scroll-section-3')
}
},
];
function setLayout() {
//각 스크롤 섹션의 높이 세팅
for (let i = 0; i < sceneInfo.length; i++) {
sceneInfo[i].scrollHeigh = sceneInfo[i].heighNum * window.innerHeight;
sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;
}
console.log(sceneInfo);
}
setLayout();
// function scrollLoop() {
// //활성화시킬 Scene의 번호 결정
// prevScrollHeight = 0;
// for (let i = 0; i < curre; i++) {
// prevScrollHeight += sceneInfo[i].scrollHeigh;
// }
// if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeigh) {
// currentScene++;
// }
// if (yOffset < prevScrollHeight) {
// if (currentScene === 0) return; //바운스 있을경우 종료
// currentScene--;
// }
// }
// window.addEventListener("scroll", () => {
// yOffset = window.pageYOffset; //현재 스크롤한 위치
// scrollLoop();
// });
// window.addEventListener("load", setLayout);
// window.addEventListener("resize", setLayout);
})();