반응형
스크롤 내릴때마다 동그라미가 채워지는 애니메이션 효과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Progress Circle</title>
<style>
body {
height: 200vh; /* 긴 페이지 생성 */
margin: 0;
}
.progress-container {
position: fixed;
}
svg {
transform: rotate(-90deg); /* 시작점 위로 이동 */
width: 100%;
height: 100%;
}
circle {
fill: none;
stroke: #ddd;
stroke-width: 5;
}
.progress {
stroke: #4caf50; /* 진행 색상 */
stroke-width: 5;
stroke-dasharray: 157; /* 원 둘레 계산: 2 * π * 반지름 (50 / 2 * π ≈ 157) */
stroke-dashoffset: 157; /* 초기값 (0% 진행) */
transition: stroke-dashoffset 0.1s linear; /* 부드러운 전환 */
}
</style>
</head>
<body>
<div class="progress-container">
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="15"></circle> <!-- 배경 원 -->
<circle cx="25" cy="25" r="15" class="progress"></circle> <!-- 진행 원 -->
</svg>
</div>
<script>
const progressCircle = document.querySelector('.progress');
const circleRadius = progressCircle.r.baseVal.value;
const circleCircumference = 2 * Math.PI * circleRadius;
progressCircle.style.strokeDasharray = circleCircumference;
const updateProgress = () => {
const scrollTop = window.scrollY; // 현재 스크롤 위치
const docHeight = document.documentElement.scrollHeight - window.innerHeight; // 전체 스크롤 가능 높이
const scrollPercent = scrollTop / docHeight; // 스크롤 퍼센트 (0~1)
const offset = circleCircumference * (1 - scrollPercent); // offset 계산
progressCircle.style.strokeDashoffset = offset; // 업데이트
};
window.addEventListener('scroll', updateProgress); // 스크롤 이벤트 바인딩
</script>
</body>
</html>
반응형
'공부 > JavaScript' 카테고리의 다른 글
| 자바스크립트 날짜 포맷 Intl.DateTimeFormat (0) | 2022.11.28 |
|---|---|
| [JavaScript] 비구조화 할당 (0) | 2022.11.17 |
| [JavaScript] 자바스크립트 apply 메소드 (0) | 2019.12.20 |
| [JavaScript] 자바스크립트 call 메서드 (0) | 2019.12.20 |
| [JavaScript] 자바스크립트 if ...else 문을 3항 연산자로 바꾸기 (0) | 2019.12.20 |