Javascript를 이용한 Parallax Scrolling

Javascript를 이용한 Parallax Scrolling

패럴랙스 스크롤링이란?

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

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

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

• window.addEventListener('scroll', function() {})
• window.scrollY : 현재 스크롤된 y축의 위치

- translate, transform, scrollY 등을 이용하여 패럴랙스 스크롤링 구현

js를 이용하면 스타일을 변경할 수 있다. 이를 이용하여 스크롤에 따라 요소의 스타일을 변경할 수 있다.

<div class="item">item</div>

<script>
    const item = document.querySelector('.item')

    item.style.color = 'red'
    item.style.fontSize = '20px'
    item.style.transform = 'translate(100px, 100px) rotate(45deg) scale(1.5)'
</script>

- 윈도우의 스크롤 값 가져오기

window.addEventListener('scroll', function () {
    const scrolled = window.scrollY // 윈도우의 스크롤값
    console.log('scrollY : ' + scrolled) // 스크롤값
    console.log('scrollY : ' + scrolled * 0.5) // 스크롤값의 50%
})

- 예제

<div class="section">
    <div class="parallax-element background"></div>
    <div class="parallax-element square"></div>
    <div class="parallax-element circle"></div>
    <strong class="parallax-element title"
        >텍스트는 빠르고 <br />
        배경은 느림</strong
    >
</div>

<div class="extra-content">
    <p>Parallax Scrolling</p>
</div>

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

    const background = sections.querySelector('.background') // 배경 요소
    const title = sections.querySelector('.title') // 제목 요소
    const circle = sections.querySelector('.circle') // 원 요소
    const square = sections.querySelector('.square') // 사각형 요소

    const scrolled = window.scrollY // 윈도우의 스크롤값

    console.log('scrollY : ' + scrolled)

    background.style.transform = `translateY(${scrolled * 0.8}px)`
    // 제목을 스크롤 속도의 80%(빠르게)로 이동
    title.style.transform = `scale(${scrolled * 0.001})`
    // 배경을 스크롤 속도의 30%(느리게)로 이동
    circle.style.transform = `translate(${scrolled * 0.5}px, ${scrolled * 0.5}px)`
    // circle 왼쪽에서 오른쪽으로 이동
    square.style.transform = `translate(${scrolled * -0.5}px, ${scrolled * 0.5}px)`
    // square 오른쪽에서 왼쪽으로 이동
})

구역별 패럴랙스 스크롤링

for each문을 이용하여 각 섹션에 대해 애니메이션 적용

- for each 란?

• 배열의 각 요소에 대해 주어진 함수를 실행
• 배열의 각 요소에 대해 반복문을 실행

const items = ['item1', 'item2', 'item3']

items.forEach(function (item) {
    console.log(item)
})

- for each문을 이용하여 각 섹션에 대해 애니메이션 적용

<div class="extra-content">
    <p>Parallax Scrolling (JS)</p>
</div>
<div class="section">
    <div class="parallax-element background"></div>
    <div class="parallax-element square"></div>
    <div class="parallax-element circle"></div>
    <strong class="parallax-element title">느림의 중요성을 깨달은 달팽이</strong>
</div>

<div class="extra-content">
    <p>Parallax Scrolling</p>
</div>
<div class="section">
    <div class="parallax-element background"></div>
    <div class="parallax-element square"></div>
    <div class="parallax-element circle"></div>
    <strong class="parallax-element title">그냥 느린 가을이</strong>
</div>

<div class="extra-content">
    <p>Parallax Scrolling</p>
</div>

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

    sections.forEach(function (section) {
        // 각 섹션에 대해 반복
        let bounds = section.getBoundingClientRect() // 섹션의 위치와 크기 정보를 가져옴
        const background = section.querySelector('.background') // 배경 요소
        const title = section.querySelector('.title') // 제목 요소
        const circle = section.querySelector('.circle') // 원 요소
        const square = section.querySelector('.square') // 사각형 요소

        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%(느리게)로 이동
            circle.style.transform = `translate(${scrolled * 0.5}px, ${scrolled * 0.5}px)` // circle 왼쪽에서 오른쪽으로 이동
            square.style.transform = `translate(${scrolled * -0.5}px)` // square 오른쪽에서 왼쪽으로 이동
        }
    })
})