Post

GSAP) Parallax에 대해 알아보자 +사용방법

Posted Updated
Preview Image
By parksohyunnn 8 min read

Parallax

Parallax는 물체의 위치가 변할 때 발생하는 시각적 효과를 말합니다. 이는 일반적으로 물체를 관찰하는 관찰자가 위치를 변경함에 따라 발생합니다. 가장 흔한 예는 눈으로 본 물체의 이동에 따라 배경이 움직이는 것처럼 보이는 것입니다. 이는 물체 간의 상대적인 거리 차이로 인해 발생합니다. Parallax는 천문학, 광학, 그래픽 디자인 등 다양한 분야에서 사용되며, 거리나 위치를 측정하는 데 유용하게 활용될 수 있습니다.
1940년대부터 전통적인 애니메이션이나 게임에서 사용됐던 기법으로 화면을 구성하는 배경이미지들과 기타 이미지들간의 움직임이나 동작 시간을 다르게 주어 스크롤이 될 수 있도록 하는 디자인 표현 기법입니다.
Parallax(시차 : 관측 위치에 따른 물체의 위치나 방향의 차이)의 뜻에서도 볼 수 있듯이 물체의 위치와 방향의 차이로 사용자에게 평면적인 웹사이트가 아니라 마치 살아 숨쉬는 듯한 느낌의 웹사이트를 제공할 수 있습니다.

Parallax Scrolling (패럴랙스 스크롤링)

  1. 패럴랙스 스크롤링 효과는 웹 디자인에서 사용되는 시각적 기법 중 하나입니다.
    이 효과는 웹 페이지를 스크롤할 때 배경과 전경 요소가 서로 다른 속도로 움직이는 것을 의미합니다. 이는 사용자가 스크롤할 때 더욱 동적이고 인터랙티브한 경험을 제공하여 웹 페이지에 깊이와 입체감을 부여합니다.

  2. 패럴랙스 스크롤링을 구현하는 방법은 다양합니다.
    일반적으로는 CSS와 JavaScript를 사용하여 배경 이미지나 요소의 위치를 스크롤 속도에 따라 제어합니다. 일부 웹 개발 프레임워크나 라이브러리에는 패럴랙스 스크롤링을 구현하기 위한 특별한 기능이 내장되어 있기도 합니다.

  3. 이 기법은 사용자 경험을 향상시키고 시각적 흥미를 더해줄 뿐만 아니라, 브랜드나 제품의 스토리텔링에도 도움이 될 수 있습니다.하지만 과용될 경우 사용자의 주의를 분산시키고 성능 문제를 야기할 수 있으므로 적절하게 사용해야 합니다.

등장배경

  1. 패럴랙스 스크롤링 효과는 웹 디자인에서 사용되는 시각적 기법 중 하나입니다.
    이 효과는 웹 페이지를 스크롤할 때 배경과 전경 요소가 서로 다른 속도로 움직이는 것을 의미합니다. 이는 사용자가 스크롤할 때 더욱 동적이고 인터랙티브한 경험을 제공하여 웹 페이지에 깊이와 입체감을 부여합니다.

  2. 패럴랙스 스크롤링을 구현하는 방법은 다양합니다.
    일반적으로는 CSS와 JavaScript를 사용하여 배경 이미지나 요소의 위치를 스크롤 속도에 따라 제어합니다. 일부 웹 개발 프레임워크나 라이브러리에는 패럴랙스 스크롤링을 구현하기 위한 특별한 기능이 내장되어 있기도 합니다.

  3. 이 기법은 사용자 경험을 향상시키고 시각적 흥미를 더해줄 뿐만 아니라, 브랜드나 제품의 스토리텔링에도 도움이 될 수 있습니다.하지만 과용될 경우 사용자의 주의를 분산시키고 성능 문제를 야기할 수 있으므로 적절하게 사용해야 합니다.

Parallax 사용방법

GSAP (GreenSock Animation Platform)을 사용하여 Parallax 효과를 구현하는 기본 셋팅 방법을 알려드리겠습니다. Parallax 효과는 사용자가 스크롤할 때 배경이 전경보다 느리게 움직이는 것처럼 보이게 하는 시각적 효과입니다. 이를 구현하기 위해 GSAP와 ScrollTrigger 플러그인을 사용할 것입니다.

01. 필요한 리소스

1
2
3

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

GSAP과 ScrollTrigger 플러그인을 포함합니다. ScrollTrigger는 GSAP의 공식 플러그인으로, 스크롤 기반 애니메이션을 쉽게 구현할 수 있게 해줍니다.

02. 기본 HTML 구조

1
2
3
4
5

<div class="parallax-container">
    <div class="parallax-content">
        <!-- 여기에 Parallax 효과를 적용할 콘텐츠를 넣습니다. -->
    </div>
</div>

03. CSS 스타일링

1
2
3
4
5
6
7
8

.parallax-container {
  overflow-x: hidden; /* 수평 스크롤을 방지합니다. */
  perspective: 100px; /* Parallax 효과의 깊이감을 추가합니다. */
}

.parallax-content {
  transform: translateZ(-50px) scale(2); /* Parallax 효과를 위한 초기 설정입니다. */
}

04. GSAP 및 ScrollTrigger를 사용한 JavaScript

1
2
3
4
5
6
7
8
9
10
11
12

gsap.registerPlugin(ScrollTrigger);

gsap.to(".parallax-content", {
  scrollTrigger: {
    trigger: ".parallax-container",
    start: "top top", // 트리거 시작 지점
    end: "bottom bottom", // 트리거 끝 지점
    scrub: true // 스크롤과 애니메이션 속도를 동기화합니다.
  },
  y: 200, // 수직 방향으로 얼마나 움직일지 결정합니다.
  ease: "none" // 움직임의 가속도를 제거합니다.
})

이 코드는 스크롤에 따라 .parallax-content 요소가 수직 방향으로 부드럽게 움직이도록 합니다. scrub 옵션은 스크롤 바의 위치에 따라 애니메이션 속도를 조정하여, 사용자가 스크롤하는 속도에 따라 애니메이션도 같은 속도로 진행되게 합니다.

위의 예시는 매우 기본적인 Parallax 효과 구현입니다. GSAP와 ScrollTrigger는 매우 강력하므로, 다양한 옵션을 조합하여 더 복잡한 효과도 구현할 수 있습니다. 공식 문서를 참고하여 여러분만의 독특한 효과를 만들어보세요.

GSAP
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github