parallax 애니메이션 효과

parallax란?

▶ 패럴랙스(Parallax)는 웹디자인이나 애니메이션에서 사용되는 기술로, 일반적인 스크롤 방식을 벗어나서 배경, 이미지, 텍스트 등의 요소들이 서로 다른 속도로 스크롤되는 효과를 만들어내는 것을 말합니다.
패럴랙스를 활용하면 웹사이트나 애플리케이션의 시각적 흥미를 유도할 수 있는데 일반적으로 CSS와 JavaScript를 조합하여 구현되며, 요소들의 위치, 크기, 투명도 등을 조절하여 효과를 만들어냅니다.
오늘은 이미지에 다양한 효과를 넣는 8가지 방법에 대해 간단히 알려드릴테니 한번 따라해보세요!

1. to & from

<script>
gsap.to("#section01 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100
});

gsap.from("#section01 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100
});
</script>

▶ 설명에 앞서 to와 from의 차이를 알려드리자면,
‘to : 설정대로 움직임 / from : 설정의 반대로 움직임’ 이라는 점입니다.
위의 예시는 2초 동안 x축 방향으로 500px정도 360도 방향으로 돌며 이동하는데, 이동함과 동시에 모서리가 둥글어지도록 설정하였습니다.
각각의 역할을 이해했다면 to는 설정대로 움직일테고 from은 뒤로 가면서 둥근 모습에서 각진 모습으로 변한다는 것을 알 수 있습니다.

2. trigger

<script>
gsap.to("#section02 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    // 화면에 보이면 바로 설정대로 움직임
    scrollTrigger: {
        trigger: "#section02 .img"
    }
});
</script>

▶ ‘trigger’를 사용할 땐 일반적으로’scrollTrigger’와 함께 사용해주는 경우가 많습니다.
trigger를 사용하면 내가 설정을 준 이미지가 웹브라우저 화면에 보였을 때 실행된다는 특징이 있어 해당 이미지가 화면에 노출되지 않으면 조건이 충족되지 않아 애니메이션 효과가 나타나지 않습니다.

3. toggleActions

<script>
gsap.to("#section03 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    // onEnter, onLeave, onEnterBack, onLeaveBack 네 종류가 있음
    // "play", "pause", "resume", "reset", "restart", "complete", "reverse", "none"
    scrollTrigger: {
        trigger: "#section03 .img",
        toggleActions: "play none reverse none"
    }
});
</script>

▶ toggleActions는 ScrollTrigger에서 사용되는 옵션 중 하나로, ScrollTrigger가 트리거될 때 어떤 액션을 취할지를 지정해주는데 일반적으로 애니메이션을 시작하거나 정지시키는데 사용됩니다.
또한 toggleActions는 다양한 옵션을 지정할 수 있는데 아래의 표를 통해 각각의 옵션 특징에 대해 정리했으니 알아두시면 좋을 것 같습니다.

옵션	옵션 설명
onEnter	요소가 스크롤 영역에 들어올 때 실행되는 액션
onLeave	요소가 스크롤 영역을 벗어날 때 실행되는 액션
onEnterBack	요소가 스크롤 영역에 들어온 후 다시 나갈 때 실행되는 액션
onLeaveBack	요소가 스크롤 영역을 벗어난 후 다시 들어올 때 실행되는 액션
play	애니메이션을 실행하는 액션
pause	애니메이션을 일시정지하는 액션
resume	일시정지된 애니메이션을 다시 실행하는 액션
reset	애니메이션을 초기 상태로 되돌리는 액션
restart	애니메이션을 처음부터 다시 시작하는 액션
complete	애니메이션을 완료 상태로 이동시키는 액션
reverse	애니메이션을 역방향으로 실행하는 액션
none	어떤 액션도 취하지 않는 상태

4. start & end

<script>
 gsap.to("#section04 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section04 .img",
        toggleActions: "play reverse none none",
        markers: true,
        start: "top 50%",
        end: "bottom 30%"
    }
});
</script>

▶ start & end는 언제 트리거되고 언제 종료되는지를 설정하는 옵션입니다. 좀 더 자세히 알아보자면,
start : 트리거되기 시작하는 지점으로 일반적으로 “top”, “center”, “bottom”과 같은 키워드와 픽셀 값을 사용하여 지정합니다.
end: 트리거를 종료하는 지점으로 일반적으로 “top”, “center”, “bottom”과 픽셀 값을 사용하여 지정할 수 있습니다.

5. scrub

<script>
 gsap.to("#section05 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section05 .img",
        markers: true,
        start: "top 50%",
        end: "bottom 10%",
        scrub: true // true or number (ex. 4) 사용 가능
    }
});
</script>

▶ scrub는 내가 스크롤한 만큼만 움직이는 옵션으로 true로 쓸 수도 있지만, 4 / 3.5 와 같은 숫자로도 입력이 가능합니다.

6. pin

<script>
 gsap.to("#section06 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section06 .img",
        start: "top 50%",
        end: "bottom 200px",
        scrub: true,
        pin: true,
        markers: true
    }
});
</script>

▶ pin은 요소가 화면에 고정되어 스크롤될 때의 동작을 정의합니다. 일반적으로 “pin”은 요소를 스크롤에 따라 고정하고 다음 요소들이 스크롤되는 동안 해당 요소가 고정된 상태로 남아있게 하며 특히 페이지의 섹션을 고정해 두고 스크롤하는 경우나, 일종의 스크롤링 애니메이션을 구현할 때 유용하게 사용됩니다.

7. toggleClass

<script>
gsap.to("#section07 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section07 .img",
        start: "top center",
        end: "bottom 200px",
        scrub: true,
        toggleClass: "active",
        markers: false,
        id: "box7"
    }
});
</script>

▶ toggleClass는 요소가 스크롤에 의해 특정 지점을 지나거나 트리거되었을 때 클래스를 토글하여 CSS 스타일을 변경하는데 사용됩니다.
주로 요소가 스크롤 영역에 진입했을 때나 스크롤을 트리거로 하는 애니메이션에서 특정 요소의 스타일을 변경하는 데 사용되는데 이를 통해 스크롤 효과에 따라 동적인 스타일 변화를 구현할 수 있을 뿐 아니라 배경색을 변경하거나 텍스트를 페이드 인/아웃하는 등의 스타일 변경도 가능합니다.

8. callback

<script>
gsap.to("#section08 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section08 .img",
        start: "top center",
        end: "bottom 200px",
        scrub: true,
        markers: true,
        // onEnter: () => { console.log("onEnter") },
        // onLeave: () => { console.log("onLeave") },
        // onEnterBack: () => { console.log("onEnterBack") },
        // onLeaveBack: () => { console.log("onLeaveBack") }
        onUpdate: (self) => { console.log("onUpdate", self.progress.toFixed(3)) },
        onToggle: (self) => { console.log("onToggle", self.isActive) },
    }
});
</script>

▶ 콜백(callback) 함수들은 ScrollTrigger 이벤트에 따라 실행되는 함수들을 말합니다. 즉, ScrollTrigger가 특정 상태에 도달했을 때 실행되는 사용자 지정 함수로 콜백 함수들의 역할은 아래와 같습니다.

• onUpdate: ScrollTrigger의 상태가 업데이트될 때마다 호출되는 콜백 함수
  
• onToggle: ScrollTrigger가 트리거될 때와 해제될 때 호출되는 콜백 함수

오늘은 이미지에 다양한 효과를 넣는 9가지 방법에 대해 알아봤는데요,
다양한 옵션들을 활용하면 더 다양한 느낌의 웹사이트를 만들 수 있으니 조금씩 알아가보면 코드를 만들 때 도움이 되겠죠?
기회가 된다면 다음엔 다른 종류의 옵션을 소개하는 글을 들고 오도록 할게요😁!