헤더 스크롤 효과를 구현한 6가지 예제를 아래에 제시하겠습니다. 각 예제는 HTML 및 CSS 코드로 구성되어 있으며, 상세한 주석과 함께 설명됩니다.
예제 1: 기본 헤더 스크롤 효과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>헤더 스크롤 효과</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
transition: background-color 0.3s;
}
/* 스크롤 효과 스타일 */
.header.scrolled {
background-color: #007BFF;
}
</style>
</head>
<body>
<header class="header">
<h1>스크롤 효과 헤더</h1>
</header>
<div style="height: 800px;">
<!-- 페이지 내용 -->
</div>
<script>
// 스크롤 이벤트를 감지하여 헤더의 클래스를 변경하는 JavaScript 코드
window.addEventListener('scroll', function () {
const header = document.querySelector('.header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
</script>
</body>
</html>
이 예제는 기본적인 헤더 스크롤 효과를 보여줍니다. 페이지를 스크롤할 때 헤더의 배경 색상이 변경됩니다.
예제 2: 페이드 인/아웃 효과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>헤더 스크롤 효과</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
opacity: 1;
transition: opacity 0.3s;
}
/* 스크롤 효과 스타일 */
.header.hidden {
opacity: 0;
}
</style>
</head>
<body>
<header class="header">
<h1>스크롤 효과 헤더</h1>
</header>
<div style="height: 800px;">
<!-- 페이지 내용 -->
</div>
<script>
// 스크롤 이벤트를 감지하여 헤더의 클래스를 변경하는 JavaScript 코드
let lastScrollTop = 0;
window.addEventListener('scroll', function () {
const header = document.querySelector('.header');
const scrollTop = window.scrollY;
if (scrollTop > lastScrollTop) {
header.classList.add('hidden');
} else {
header.classList.remove('hidden');
}
lastScrollTop = scrollTop;
});
</script>
</body>
</html>
이 예제는 페이드 인/아웃 효과를 사용하여 헤더를 숨기고 표시합니다. 페이지를 스크롤하면 헤더가 서서히 투명해지거나 나타납니다.
예제 3: 고정 헤더
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>헤더 스크롤 효과</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: background-color 0.3s;
}
/* 스크롤 효과 스타일 */
.header.scrolled {
background-color: #007BFF;
}
.content {
margin-top: 100px;
}
</style>
</head>
<body>
<header class="header">
<h1>고정 헤더</h1>
</header>
<div class="content" style="height: 800px;">
<!-- 페이지 내용 -->
</div>
<script>
// 스크롤 이벤트를 감지하여 헤더의 클래스를 변경하는 JavaScript 코드
window.addEventListener('scroll', function () {
const header = document.querySelector('.header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
</script>
</body>
</html>
이 예제는 페이지를 스크롤할 때 헤더가 화면 상단에 고정되도록 만듭니다. 스크롤 시 헤더의 배경 색상이 변경됩니다.
예제 4: 축소 헤더
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>헤더 스크롤 효과</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
transition: all 0.3s;
}
.header.shrink {
height: 60px;
padding: 10px;
}
</style>
</head>
<body>
<header class="header">
<h1>축소 헤더</h1>
</header>
<div style="height: 800px;">
<!-- 페이지 내용 -->
</div>
<script>
// 스크롤 이벤트를 감지하여 헤더의 클래스를 변경하는 JavaScript 코드
window.addEventListener('scroll', function () {
const header = document.querySelector('.header');
if (window.scrollY > 50) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
});
</script>
</body>
</html>
이 예제는 스크롤 시 헤더의 높이와 패딩을 조절하여 헤더를 축소하는 효과를 구현합니다.
예제 5: 헤더 내용 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>헤더 스크롤 효과</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
transition: all 0.3s;
}
.header.scrolled {
background-color: #007BFF;
}
.header h1 {
font-size: 24px;
margin: 0;
}
.header.scrolled h1 {
font-size: 18px;
}
</style>
</head>
<body>
<header class="header">
<h1>스크롤 효과 헤더</h1>
</header>
<div style="height: 800px;">
<!-- 페이지 내용 -->
</div>
<script>
// 스크롤 이벤트를 감지하여 헤더의 클래스를 변경하는 JavaScript 코드
window.addEventListener('scroll', function () {
const header = document.querySelector('.header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
</script>
</body>
</html>
이 예제는 헤더 스크롤 효과를 적용할 때 헤더 내용의 스타일을 변경합니다. 페이지를 스크롤하면 헤더의 텍스트 크기가 작아지고 배경 색상이 변경됩니다.
예제 6: 헤더 고정과 축소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>헤더 스크롤 효과</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
transition: all 0.3s;
}
.header.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.header.shrink {
height: 60px;
padding: 10px;
}
</style>
</head>
<body>
<header class="header">
<h1>고정 및 축소 헤더</h1>
</header>
<div style="height: 800px;">
<!-- 페이지 내용 -->
</div>
<script>
// 스크롤 이벤트를 감지하여 헤더의 클래스를 변경하는 JavaScript 코드
window.addEventListener('scroll', function () {
const header = document.querySelector('.header');
if (window.scrollY > 50) {
header.classList.add('shrink', 'fixed');
} else {
header.classList.remove('shrink', 'fixed');
}
});
</script>
</body>
</html>
이 예제는 헤더를 고정하고 동시에 축소하는 효과를 구현합니다. 페이지를 스크롤하면 헤더가 화면 상단에 고정되고 높이가 축소됩니다.
'CSS' 카테고리의 다른 글
| 아코디언 메뉴: 아코디언 메뉴 스타일링. (0) | 2023.12.23 |
|---|---|
| 그리드 레이아웃: 그리드 레이아웃 스타일링. (0) | 2023.12.23 |
| 랜딩 페이지 디자인: 랜딩 페이지 디자인. (0) | 2023.12.23 |
| 풀 페이지 스크롤: 풀 페이지 스크롤 디자인. (0) | 2023.12.23 |
| 드롭다운 메뉴 스타일링: 드롭다운 메뉴 디자인. (0) | 2023.12.23 |