CSS 패럴랙스(시차) 스크롤 효과란?
패럴랙스(Parallax) 스크롤은 배경과 전경 콘텐츠가 서로 다른 속도로 움직이도록 하여 화면에 깊이와 입체감을 더하는 웹 디자인 기법입니다. 별도의 자바스크립트 없이도 CSS의 background-attachment: fixed 속성 하나만으로 손쉽게 구현할 수 있습니다.
핵심이 되는 CSS 속성은 다음과 같습니다.
- background-attachment: fixed : 배경 이미지를 뷰포트에 고정하여, 페이지를 스크롤해도 배경이 함께 움직이지 않도록 합니다.
- background-position: center : 배경 이미지를 요소의 중앙에 배치합니다.
- background-repeat: no-repeat : 배경 이미지가 반복되지 않도록 설정합니다.
- background-size: cover : 배경 이미지가 요소 영역 전체를 덮도록 크기를 조절합니다.
아래 예제는 두 개의 고정 배경 섹션 사이에 일반 텍스트 콘텐츠를 배치하여, 스크롤 시 배경은 제자리에 머무르고 텍스트만 흐르는 시차 효과를 보여줍니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
text-align: center;
}
.example {
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#demo {
background: url("https://images.unsplash.com/photo-1612698565524-1101522e9a21?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
#dist {
height:150px;
background-color: rgba(102,234,99,0.5);
padding: 2%;
}
#d2 {
background: url("https://images.unsplash.com/photo-1611489473774-5d881f1153f1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
</style>
</head>
<body>
<div id="demo" class="example"></div>
<div id="dist">
Sed a porttitor enim. Integer euismod dui massa, at posuere sem fermentum at. Fusce vehicula fringilla tortor, ut mattis sapien tristique ac. Phasellus eleifend malesuada orci, et facilisis arcu egestas vel. Duis in tempus libero. Nunc nibh arcu, tempus quis lectus ut, blandit tincidunt felis. Suspendisse potenti.
</div>
<div id="d2" class="example"></div>
</body>
</html>
실행 결과
위 코드를 실행하고 페이지를 스크롤하면 다음과 같은 결과를 확인할 수 있습니다. 초록색 반투명 박스 안의 텍스트는 스크롤에 따라 위아래로 이동하지만, 배경 이미지는 화면에 고정되어 있어 마치 배경 앞을 지나가는 듯한 깊이감 있는 화면이 연출됩니다.
