패럴랙스(Parallax) 효과란?

패럴랙스(Parallax) 효과는 웹 디자인에서 배경과 전경(콘텐츠 요소)이 서로 다른 속도로 움직이는 시각적 기법을 위미한다. 이를 통해 화면에 깊이감을 주고, 마치 3D처럼 보이게 만드는 효과이다.

---

패럴랙스의원리

패럴랙스 효과는 시차(parallax)원리를 이용한다. 즉, 사용자가 페이지를 스크롤할 때,

• 배경 이미지 천천히 움직이고
• 앞쪽 콘텐츠는 더 빠르게 움직임

이 차이로 인해 입체감과 부드러운 동적 경험을 제공하게 된다.

---

패럴랙스 효과의 종류

1. 스크롤 기반 패럴랙스
   • 사용자가 스크롤을 내리면 배경과 요소가 다른 속도로 움직인다.
   • 가장 많이 사용되는 패럴랙스 방식
   • 예시) 배경 이미지는 천천히 내려가고, 텍스트나 버튼은 빠르게 움직인다.
2. 마우스 기반 패럴랙스
   • 마우스 커서를 움직일 때 배경과 요소가 다르게 반응하는 효과
   • 게임, 포트폴리오, 크리에이티브 웹사이트에서 자주 활용된다.
   • 예시) 마우스를 움직이면 이미지가 약간 따라오는 듯한 효과
3. 요소 이동 패럴랙스
   • 특정 요소(텍스트, 아이콘, 이미지 등)가 스크롤에 따라 부드럽게 움직인다.
   • 배경이 아닌 개별 요소가 애니메이션 되면서 더 동적인 느낌을 준다.
   • 예시) 스크롤할 때 텍스트가 부드럽게 왼쪽에서 오른쪽으로 등장
4. 비디오 패럴랙스
   • 배경을 고정하고, 스크롤할 때 영상이 부드럽게 재생되는 방식
   • 인터랙티브한 웹사이트에서 많이 사용됨
   • 예시)사이트를 스크롤하면 배경 비디오가 느리게 재생됨

---

 

패럴랙스 효과 구현 방법

css로 간단한 패럴랙스 구현

.parallax {
  background-image: url('배경이미지.jpg');
  background-attachment: fixed; /* 배경을 고정 */
  background-size: cover;
  background-position: center;
  height: 100vh; /* 전체 화면 높이 */
}

• background-attachment: fixed; 배경을 고정해서 콘텐츠가 위로 올라갈 때 패럴랙스 효과 발생
• 단점 : 일부 모바일 브라우저에서는 fixed 속성이 잘 적용되지 않음

JavaScript(jQuery)로 패럴랙스 구현

$(window).scroll(function() {
  let scrollTop = $(this).scrollTop(); 
  $('.parallax').css('transform', 'translateY(' + scrollTop * 0.5 + 'px)');
});

 

• scrollTop 값을 활용해서 배경을 조금씩 이동시키는 방식
• 0.5를 곱하면 배경이 더 천천히 움직여서 패럴랙스 효과가 지연스러워짐

---

 

패럴랙스 효과를 잘 활용하는 사이트

• 애플 : 제품 소개 페이지에서 부드러운 패럴랙스 효과 사용
• Nike : 패럴랙스와 3D 효과를 결합하 스크롤 인터랙션
• Airbnb : 여행지를 소개하는 페이지에서 패럴랙스를 활용