animate를 이용한 스크롤 효과는 JavaScript와 CSS를 활용해 부드럽게 스크롤하는 기능을 구현하는 방법입니다. 주로 JavaScript의 scroll 이벤트를 제어하거나, CSS 애니메이션을 통해 시각적으로 스크롤이 자연스럽게 보이게 할 수 있습니다. JavaScript 라이브러리인 jQuery나 애니메이션 관련 라이브러리를 사용하여 쉽게 구현할 수 있습니다.
1. JavaScript와 CSS만을 사용한 부드러운 스크롤 구현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Scroll Example</title>
<style>
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, sans-serif;
height: 2000px; /* 긴 페이지 만들기 */
}
.scroll-link {
display: block;
margin-top: 100px;
font-size: 18px;
color: blue;
cursor: pointer;
text-decoration: underline;
}
.target {
margin-top: 1500px;
}
</style>
</head>
<body>
<a class="scroll-link" href="#target">Scroll to Target</a>
<div class="target" id="target">
<h2>Target Section</h2>
</div>
</body>
</html>반응형
이 코드는 CSS의 scroll-behavior: smooth; 속성을 사용하여 링크 클릭 시 부드럽게 해당 위치로 스크롤되게 합니다.
2. jQuery를 사용한 애니메이션 스크롤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Scroll with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
height: 2000px;
}
.scroll-link {
display: block;
margin-top: 100px;
font-size: 18px;
color: blue;
cursor: pointer;
text-decoration: underline;
}
.target {
margin-top: 1500px;
}
</style>
</head>
<body>
<a class="scroll-link" href="#target">Scroll to Target</a>
<div class="target" id="target">
<h2>Target Section</h2>
</div>
<script>
$(document).ready(function(){
$(".scroll-link").on("click", function(event) {
event.preventDefault(); // 기본 링크 기능 방지
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000); // 1초 동안 부드럽게 스크롤
});
});
</script>
</body>
</html>
이 코드는 jQuery의 .animate() 메서드를 사용하여 스크롤을 부드럽게 애니메이션화한 예제입니다.
반응형
'IT > 자바스크립트' 카테고리의 다른 글
| $(document).ready() Event 완벽 가이드 jQuery 초보자부터 고급 사용자까지 (0) | 2025.03.25 |
|---|---|
| Math.random vs Crypto 차이점과 최적 활용법 (2) | 2024.11.15 |
| 특정 날짜의 요일 구하기(간단한 자바스크립트 함수 예제) (0) | 2024.08.27 |
| 자바스크립트를 활용하여 Input 태그 안에 Value 넣는 방법 (0) | 2024.08.23 |
| 자바 스크립트에서 자주 사용하는 형변환(숫자,문자,부울) (0) | 2024.03.26 |