결과
스크롤을 내릴 때 아래쪽에 있던 화면이 올라오면서 커짐.
스크롤을 올릴 때 위쪽에 있던 화면이 내려오면서 작아짐.
- 지원 되는 것이 한정되어있음 2024년 12월 21일
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<style>
.scroll-scale-out {
animation: scroll-scale-out linear forwards;
animation-timeline: view();
animation-range: entry 0% entry-crossing 100%;
opacity: 0;
transform: scale(1);
}
@keyframes scroll-scale-out {
from {
transform: scale(0.6);
}
to {
opacity: 1;
transform: scale(1);
}
}
</style>
</head>
<body class="w-screen flex flex-col justify-center items-center">
<div class="scroll-scale-out w-[500px] h-[500px] bg-red-300">스크롤1</div>
<div class="scroll-scale-out w-[500px] h-[500px] bg-yellow-300">스크롤2</div>
<div class="scroll-scale-out w-[500px] h-[500px] bg-green-300">스크롤3</div>
<div class="scroll-scale-out w-[500px] h-[500px] bg-blue-300">스크롤4</div>
</body>
</html>호환성
겪은 이슈를 공유합니다.