Front

스크롤 트리거 (Parallax Scrolling) 구현하기

oodada 2024. 1. 6. 20:52
반응형

Parallax Scrolling (CSS, JS, AOS, ScrollMagic, GSAP)

패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것

  • 레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법
  • 게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용
  • javascript, css, 라이브러리 등을 이용하여 구현

Parallax Scrolling

CSS를 이용한 패럴랙스 스크롤링

css perspective 속성을 이용한 패럴랙스 스크롤링 mdn

  • 해당 요소의 z = 0 평면과 사용자 사이의 거리
  • transform 효과를 주고자 하는 부모 요소에 적용
  • perspective에 따른 변형 효과
    • perspective: 100px; => 100px만큼 멀어져 보임
    • perspective가 클수록 (거리가 멀수록) 변형 효과가 줄어듦
    • perspective가 작을수록 (거리가 가까울수록) 변형 효과가 커짐
<div class="wrap">
    <div id="div1" class="parallax"></div>
    <div id="div2" class="parallax"></div>
    <div id="div3" class="parallax"></div>
    <strong class="title">Parallax Scolling (CSS)</strong>
</div>
.wrap {
    height: 100vh;
    overflow-x: hidden;
    perspective: 1px;
}

.parallax {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#div1 {
    background-color: #333;
    height: 150rem;
}

#div2 {
    top: 300px;
    background-color: aqua;
    height: 500px;
    transform: translateZ(-2px);
}

#div3 {
    top: 500px;
    background-color: blueviolet;
    height: 500px;
    transform: translateZ(-1px);
    opacity: 0.7;
}

.title {
    position: absolute;
    top: 300px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 3rem;
}

Javascript를 이용한 패럴랙스 스크롤링

javascript를 이용해서 패럴랙스 스크롤링 구현할 수 있습니다.

  • window.addEventListener('scroll', function() {})
  • window.scrollY : 현재 스크롤된 y축의 위치
  • window.innerHeight : 브라우저의 높이
  • element.offsetTop : 해당 요소의 top 위치
  • element.offsetHeight : 해당 요소의 높이
  • element.getBoundingClientRect() : 해당 요소의 위치와 크기 정보
<div class="section">
    <div class="parallax-element background"></div>
    <strong class="parallax-element title">글씨는 스크롤이 느림</strong>
</div>

<div class="extra-content">
    <p>Parallax Scrolling</p>
</div>
window.addEventListener('scroll', function () {
    // 스크롤 이벤트 리스너 등록
    var scrolled = window.pageYOffset;
    var background = section.querySelector('.background'); // 배경 요소
    var title = section.querySelector('.title'); // 제목 요소

    background.style.transform = `translateY(${scrolled * 0.8}px)`; // 제목을 스크롤 속도의 80%(빠르게)로 이동
    title.style.transform = `translateY(${scrolled * 0.3}px)`; // 배경을 스크롤 속도의 30%(느리게)로 이동
});

각 섹션이 보이는 범위에 따라 애니메이션 적용

window.addEventListener('scroll', function () {
    // 스크롤 이벤트 리스너 등록
    var sections = document.querySelectorAll('.section'); // 모든 섹션을 가져옴

    sections.forEach(function (section) {
        // 각 섹션에 대해 반복
        var bounds = section.getBoundingClientRect(); // 섹션의 위치와 크기 정보를 가져옴, 뷰포트 기준6+-
        var background = section.querySelector('.background'); // 배경 요소
        var title = section.querySelector('.title'); // 제목 요소

        // 섹션이 뷰포트 내에 있을 때
        // 뷰포트 : 현재 보이는 화면
        // 뷰포트의 top이 섹션의 bottom보다 작고, 뷰포트의 bottom이 섹션의 top보다 크면 뷰포트 내에 있다고 판단
        if (bounds.top < window.innerHeight && bounds.bottom >= 0) {
            var scrolled = window.pageYOffset - section.offsetTop; // 섹션의 시작점에서 스크롤된 거리를 계산
            background.style.transform = `translateY(${scrolled * 0.8}px)`; // 제목을 스크롤 속도의 80%(빠르게)로 이동
            title.style.transform = `translateY(${scrolled * 0.3}px)`; // 배경을 스크롤 속도의 30%(느리게)로 이동
        }
    });
});

AOS (Animate On Scroll)를 이용한 패럴랙스 스크롤링

AOS (Animate On Scroll)란 스크롤에 따라 요소에 애니메이션을 적용하는 라이브러리

AOS 설치

  • 태그 내에 AOS 라이브러리를 추가
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  • 태그 닫는 태그 바로 위에 AOS 라이브러리를 추가
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
    AOS.init();
</script>

AOS 사용

AOS 초기화

AOS 옵션

  • offset : 요소가 화면에 보이기 전에 애니메이션이 시작되는 위치
  • delay : 애니메이션이 시작되는 지연 시간
  • duration : 애니메이션의 지속 시간
  • easing : 애니메이션의 가속도
  • once : 애니메이션을 한 번만 실행
  • anchor-placement : 애니메이션이 실행되는 기준점

AOS 예제

GSAP과 ScrollTrigger를 이용한 애니메이션

GSAP은 웹 페이지나 웹 앱에서 다양한 애니메이션 효과를 만들 수 있도록 도와주는 강력한 도구로 널리 사용됩니다.
이 라이브러리는 웹 개발자들에게 다양한 기능과 API를 제공하여 스무스하고 반응적인 웹 애니메이션을 쉽게 구현할 수 있게 해줍니다.
https://gsap.com/
https://codepen.io/GreenSock (코드펜)

GSAP 설치

  • CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>
  • NPM
npm install gsap
npm install gsap@3.6.0
npm install gsap@3.6.0 scrolltrigger

GSAP 사용법

https://gsap.com/docs/v3/GSAP/

  • gsap.to() : 해당 요소에 애니메이션을 적용
  • scrollTrigger : 해당 요소에 스크롤 트리거를 적용
  • trigger : 트리거가 되는 요소
  • start : 트리거가 되는 요소의 시작 위치
  • end : 트리거가 되는 요소의 끝 위치
  • scrub : 스크롤 속도에 따라 애니메이션 속도가 달라짐
  • pin : 해당 요소를 고정
  • markers : 해당 요소의 트리거를 표시
gsap.to('요소', 시간, { 옵션 });
gsap.to('요소', { 옵션 });
gsap.to('요소', { 옵션, scrollTrigger: { 옵션 } });

gsap.to('.box', { rotation: 27, x: 100, duration: 1 });

기본 사용법

gsap.to('.green', { rotation: 360, x: 100, duration: 1 });
// 1초 동안 x축으로 100px 이동하면서 360도 회전

gsap.from('.purple', { rotation: -360, x: -100, duration: 1 });
// 1초 동안 x축으로 -100px 이동하면서 -360도 회전

gsap.fromTo('.blue', { x: -100 }, { rotation: 360, x: 100, duration: 1 });
// 1초 동안 x축으로 -100px에서 100px로 이동하면서 360도 회전

Timeline 사용법

var tl = gsap.timeline(); // Timeline 생성

tl.to('.box1', { duration: 2, x: 100 }, 1.5) // 2초 동안 x축으로 100px 이동 (1.5초 후에 실행)
    .to('.box2', { duration: 1, y: 200 }, '-=0.75') // 1초 동안 y축으로 200px 이동 (0.75초 전에 실행)
    .to('.box3', { duration: 3, rotation: 360 }, '+=1'); // 3초 동안 360도 회전 (1초 후에 실행)

실무 예제

https://oddcode.tistory.com/304

반응형
저작자표시 비영리 동일조건

'Front'의 다른글

  • 현재글스크롤 트리거 (Parallax Scrolling) 구현하기
티스토리 친구하기

티스토리툴바