반응형
간단한 CSS 패럴랙스 효과 만들기
패럴랙스 스크롤링은 배경 요소가 전경 요소와 다른 속도로 움직여 깊이감을 만드는 인기 있는 웹 디자인 기법입니다. 이번 블로그 포스트에서는 HTML과 CSS만을 사용하여 간단한 패럴랙스 효과를 만드는 방법을 배워보겠습니다.
1단계: HTML 설정
먼저 기본 HTML 구조를 설정합니다. A, B, C 세 가지 레이어를 포함하는 래퍼 요소를 만들겠습니다. 각 레이어는 서로 다른 깊이 수준을 나타냅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./index.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple CSS Parallax Effect</title>
</head>
<body>
<div id="parallax-wrapper">
<div id="parallax-A" class="parallax">A</div>
<div id="parallax-B" class="parallax">B</div>
<div id="parallax-C" class="parallax">C</div>
</div>
</body>
</html>2단계: CSS로 스타일링
다음으로, 패럴랙스 효과를 달성하기 위해 CSS를 사용하여 요소를 스타일링합니다. HTML 및 body의 기본 스타일을 정의한 후 #parallax-wrapper와 자식 요소 내에서 패럴랙스 효과를 설정합니다.
/* HTML 및 body의 기본 스타일 */
html {
font-family: sans-serif;
font-size: 16px;
}
html, body {
padding: 0;
margin: 0;
height: 100%; /* body가 전체 높이를 차지하도록 설정 */
}
/* 패럴랙스 레이어를 위한 래퍼 */
#parallax-wrapper {
height: 100vh;
overflow-x: hidden;
perspective: 1px; /* 패스펙티브 값 조정 */
position: relative;
transform-style: preserve-3d;
}
/* 각 패럴랙스 레이어의 기본 스타일 */
.parallax {
position: absolute;
top: 0;
left: 0;
right: 0;
transform-style: preserve-3d; /* 3D 컨텍스트가 유지되도록 설정 */
}
/* 각 레이어의 특정 스타일 */
#parallax-A {
opacity: 0.5;
background: transparent;
height: 100rem;
z-index: 1; /* 가시성을 위한 레이어링 */
}
#parallax-B {
background: skyblue;
opacity: 0.5;
height: 500px;
transform: translateZ(-0.5px); /* 패럴랙스 효과를 위한 변환 조정 */
z-index: 2; /* parallax-A 위에 있도록 설정 */
}
#parallax-C {
display: block;
top: 300px;
opacity: 0.5;
background: greenyellow;
height: 500px;
z-index: 3; /* parallax-A와 B 위에 있도록 설정 */
transform: translateZ(-1px); /* 패럴랙스 효과를 위한 변환 조정 */
}3단계: CSS 이해하기
여기 사용된 CSS 속성들을 살펴보겠습니다:
perspective: 1px: 이 값은 매우 미묘한 패럴랙스 효과를 줍니다. 값을 높이면 깊이 효과가 더 두드러집니다.transform-style: preserve-3d:#parallax-wrapper의 자식 요소들이 3D 위치를 유지하도록 합니다.transform: translateZ(-0.5px)및translateZ(-1px): 요소를 Z축을 따라 이동시킵니다. 작은translateZ값을 가진 요소는 더 가까이 보이고, 큰 음수 값을 가진 요소는 더 멀리 보입니다.z-index: 요소들의 쌓이는 순서를 관리합니다. 높은 값은 다른 요소들 위에 위치하도록 합니다.
4단계: 불투명도와 배경색 적용
시각적 매력을 높이기 위해 각 레이어에 서로 다른 배경색과 불투명도를 적용합니다. 이를 통해 레이어를 구분하고 패럴랙스 효과를 강조할 수 있습니다.
- 불투명도:
0.5값은 요소를 반투명하게 만들어 배경 요소가 부분적으로 보이도록 합니다. - 배경색: 각 레이어에 다른 배경색을 적용하여 시각적으로 구분합니다.
최종 생각
이러한 CSS 속성을 결합하여 간단하지만 효과적인 패럴랙스 스크롤링 효과를 만들 수 있습니다. 다양한 값과 스타일을 실험하여 독창적인 패럴랙스 디자인을 만들어보세요.
전체 예제 코드
다음은 간단한 CSS 패럴랙스 효과를 만드는 전체 HTML 및 CSS 코드입니다:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./index.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple CSS Parallax Effect</title>
</head>
<body>
<div id="parallax-wrapper">
<div id="parallax-A" class="parallax">A</div>
<div id="parallax-B" class="parallax">B</div>
<div id="parallax-C" class="parallax">C</div>
</div>
</body>
</html>index.css
/* HTML 및 body의 기본 스타일 */
html {
font-family: sans-serif;
font-size: 16px;
}
html, body {
padding: 0;
margin: 0;
height: 100%; /* body가 전체 높이를 차지하도록 설정 */
}
/* 패럴랙스 레이어를 위한 래퍼 */
#parallax-wrapper {
height: 100vh;
overflow-x: hidden;
perspective: 1px; /* 패스펙티브 값 조정 */
position: relative;
transform-style: preserve-3d;
}
/* 각 패럴랙스 레이어의 기본 스타일 */
.parallax {
position: absolute;
top: 0;
left: 0;
right: 0;
transform-style: preserve-3d; /* 3D 컨텍스트가 유지되도록 설정 */
}
/* 각 레이어의 특정 스타일 */
#parallax-A {
opacity: 0.5;
background: transparent;
height: 100rem;
z-index: 1; /* 가시성을 위한 레이어링 */
}
#parallax-B {
background: skyblue;
opacity: 0.5;
height: 500px;
transform: translateZ(-0.5px); /* 패럴랙스 효과를 위한 변환 조정 */
z-index: 2; /* parallax-A 위에 있도록 설정 */
}
#parallax-C {
display: block;
top: 300px;
opacity: 0.5;
background: greenyellow;
height: 500px;
z-index: 3; /* parallax-A와 B 위에 있도록 설정 */
transform: translateZ(-1px); /* 패럴랙스 효과를 위한 변환 조정 */
}이 가이드를 통해 CSS만으로 간단하고 효과적인 패럴랙스 스크롤링 효과를 만들 수 있습니다. 다양한 값과 스타일을 실험하여 독창적인 패럴랙스 디자인을 만들어보세요!
반응형
'UX 개발 > UX - 스크롤 애니메이션' 카테고리의 다른 글
| 스크롤 애니메이션 연습 - HTML 요소에 스크롤 애니메이션 주기 (0) | 2024.06.25 |
|---|---|
| 자바스크립트로 스무스 스크롤(Smooth Scroll) 구현하기 (0) | 2024.06.24 |
| 초간단한 스크롤 패럴랙스 애니메이션 구현하기 (CSS, JS) (0) | 2024.06.23 |
| 간단한 스크롤 내비게이션 만들기 (CSS+JS) (0) | 2024.06.10 |
| 간단한 웹스크롤애니메이션 라이브러리 AOS (0) | 2019.12.23 |
