CSS의 background-attachment: fixed 속성을 활용하면 자바스크립트 없이도 간단하게 시차 스크롤(패럴랙스) 효과를 구현할 수 있습니다. 핵심 원리는 배경 이미지를 화면에 고정해 두고, 콘텐츠 영역만 위로 스크롤되도록 하는 것입니다. 이렇게 하면 페이지를 내릴 때 배경은 그대로 머물러 있는 반면 텍스트는 흘러가기 때문에 깊이감 있는 시각적 효과가 연출됩니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
height: 100vh;
margin: 0px;
padding: 0px;
}
.parallax {
background-image: url("https://i.picsum.photos/id/250/800/800.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallaxText {
font-size: 20px;
height: 100%;
}
</style>
</head>
<body>
<div class="parallax"></div>
<div class="parallaxText">
<h1>Some random text</h1>
<h1>Some random text</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, praesentium assumenda
illum nisi minima libero accusamus adipisci aspernatur architecto qui aliquam quo similique
eos vitae. Cum iste laboriosam vero excepturi eum sed ex fuga repellat accusantium officia
rerum ducimus sequi maiores reprehenderit veniam corrupti, aspernatur explicabo nesciunt
architecto voluptate! Consectetur.
</p>
</div>
<div class="parallax"></div>
</body>
</html>코드 설명
- .parallax 클래스: 배경 이미지를 지정하고
background-attachment: fixed를 적용해 뷰포트 기준으로 이미지를 고정합니다. - background-size: cover: 요소 크기와 관계없이 배경 이미지가 항상 영역 전체를 꽉 채우도록 합니다.
- background-position: center: 이미지가 항상 중앙을 기준으로 표시되도록 정렬합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
페이지를 조금 아래로 스크롤하면 다음과 같이 배경 이미지는 고정된 채 가운데 텍스트 콘텐츠만 움직이는 시차 효과를 확인할 수 있습니다.
참고 사항
background-attachment: fixed 방식은 구현이 매우 간단하지만, 모바일 환경에서는 성능 문제나 호환성 이슈로 인해 일부 브라우저에서 제대로 작동하지 않을 수 있습니다. 모바일 대응이 중요한 프로젝트라면 미디어 쿼리로 모바일에서는 scroll 값으로 되돌리거나, 자바스크립트 기반 패럴랙스 라이브러리를 사용하는 것을 고려해 보세요.