구현화면

페럴렉스 구현페이지
위 링크에서 확인 가능합니다 😀
(모바일에서도 확인 가능해요 😁)

벤치마킹을 하다보면 화려한 사이트가 정말 많다…….!
그중 눈에 띄였던 건 페럴렉스 기법이었다. 큰 효과도 아닌데 호기심과 눈을 자극하니 멋진 기법이다.
그리고 구현하고 싶어졌다!!!!! 호기심으로 시작하게 된 프로젝트 😀

해당 기법은 스크롤에 따라 좌표를 줘야한다는 것이 중요했다.
좌표를 어떤 식으로 줄 지 고민했고, 조작할 요소의 기본 좌표값과 스크롤의 값을 활용하기로 했다.

<div class="icon back-01" icon-idx=1><img src="assets/img/scroll2/back-02.png"></div>
<div class="icon back-02" icon-idx=2><img src="assets/img/scroll2/back-03.png"></div>

먼저 조작할 요소에 icon-idx 속성값을 넣어주었다.

const iconTriggerMargin = 300;
const iconElementList = document.querySelectorAll('.icon');

그리고 조작할 요소를 iconElementList에 담아주었다. iconTriggerMargin 는

뷰 상단과 조작할 요소 사이가 300일 시점에 동작하도록 만든 상수다.

const iconElement=function(index, trans){
    this.index=index;
    this.trans=trans;
}

const iconList=[
    new iconElement(1,2),
    new iconElement(2,3),
    new iconElement(3,6)
]

그리고 조작할 요소의 값을 셋팅해주었다.
index는 icon-idx 값이고 trans 는 후에 설명하겠다 😀

const iconFunc = function() {
    for (const element of iconElementList) {
        iconList.forEach( ico => {
            if (ico.index == element.getAttribute('icon-idx')){
                if (window.innerHeight > element.getBoundingClientRect().top + iconTriggerMargin) {
                    element.style.transform=`translateY(-${window.pageYOffset/ico.trans}px)`;
                    console.log(ico.index + " : " + window.pageYOffset/ico.trans)
                }              
            }
        });
    }
}

스크롤 할 때 마다 호출될 함수를 작성했다.
iconElementList 에 담긴 값을 하나하나 계산해서 넣어줄 것이다.
그리고 위에 생성한 iconElement 생성자는
if (ico.index == element.getAttribute(‘icon-idx’) 여기에 활용된다 😀
먼저 조작할 돔 속성과 index 값이 일치한지 체크한다.
그리고 transform 값을 계산해서 해당 요소에 넣어주는데 요소마다 머무를 속도를 조절해주기 위해 iconElement 의 trans를 사용하였다!
스크롤 할 때마다 모든 요소가 똑같은 속도로 머무르지 않는 역할을 한다.

window.addEventListener('load', iconFunc);
window.addEventListener('scroll', iconFunc);

이벤트 호출 부분 😎