css
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.sizer {
visibility: hidden;
}
.sizer + p {
top: 0;
transition: transform 1s;
transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}
.sizer + p._hidden {
transform: translateY(-100%);
}
.mask {
overflow: hidden;
}
script
document.addEventListener("DOMContentLoaded", () => {
let root = document.querySelector("html");
let firstOne = document.querySelector("#first-one");
let secondOne = document.querySelector("#second-one");
let currentFloor = 0;
let size = {
h: window.innerHeight,
w: window.innerWidth
}
window.addEventListener("resize", (e) => {
size.h = window.innerHeight;
size.w = window.innerWidth;
})
window.addEventListener("scroll", (e) => {
let scrollTop = root.scrollTop;
currentFloor = parseInt(scrollTop / (size.h / 2));
if(currentFloor >= 1 && currentFloor <= 2) {
firstOne.classList.remove("_hidden");
} else {
firstOne.classList.add("_hidden");
}
if(currentFloor >= 3) {
secondOne.classList.remove("_hidden");
} else {
secondOne.classList.add("_hidden");
}
})
})
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playground</title>
</head>
<body>
<div class="flex flex-col relative items-center w-screen h-screen p-8 border-b-2">
<p class="text-2xl font-bold">내려보세용</p>
</div>
<div class="flex flex-col relative items-center w-screen h-screen p-8 border-b-2">
<div class="mask relative">
<p class="sizer text-2xl font-bold">더 내려보세요</p>
<p id="first-one" class="text-2xl absolute font-bold _hidden">더 내려보세요</p>
</div>
</div>
<div class="flex flex-col relative items-center w-screen h-screen p-8 border-b-2">
<div class="mask relative">
<p class="sizer text-2xl font-bold">이런거?</p>
<p id="second-one" class="text-2xl absolute font-bold _hidden">이런거?</p>
</div>
</div>
</body>
</html>
댓글