Scroll UI

스크롤되면서 뒤로 희미하게 없어지는 UI를 만들어보자 

먼저, 카드container를 만들면서 시작한다.

<div class="card-background">
        <div class="card-box">
            <img src="/img/scroll ui/card1.png" alt="">
        </div>
        <div class="card-box">
            <img src="/img/scroll ui/card2.png" alt="">
        </div>
        <div class="card-box">
            <img src="/img/scroll ui/card3.png" alt="">
        </div>
</div>

.card-background {
    height: 3000px;
    margin-top: 800px;
    margin-bottom: 1600px;
}
.card-box img {
    display: block;
    margin: auto;
    max-width: 80%;
}
.card-box {
    position: sticky;
    top: 100px;
    margin-top: 200px;
    transition: all 0.2s;
}

위처럼 scroll가능하게 card-background에 높이를 3000px만큼 준다. 그리고 margin을 위아래 적당히 준 뒤, img에 display: block를 주고, 넓이를 주고, margin: auto;로 가운데 위치시킨다.

그 다음, card-box에 position: sticky를 주고 top: 100px을 주면서 이미지들이 위에서부터 100px거리를 두고 고정되어서  다음과 같이 된다.

이제 이미지가 희미해지며 작아지게 opacity와 scale를 조정해보자

    $(window).scroll(function() {
        var 높이 = $(window).scrollTop();
        console.log(높이);

        var y = -1/500 * 높이 + 23/10  //높이가 650일때 1이였다가 1150이되면 0이되는 방정식
        $('.card-box').eq(0).css('opacity', y);
        var z = -1/5000 * 높이 + 113/100
        $('.card-box').eq(0).css('transform', `scale(${z})`);

    });

먼저 $(window)에 scroll 함수를 쓰면서 스크롤이 되는 px을 높이라는 변수에 담아준다. 

그런 다음,

변수 y에는 스크롤이 650일때, opacity가 1이였다가, card-box가 사라졌으면 좋겠을 스크롤에 여기선 1150에 0이 되게끔 하는 일차방정식을 작성해주고, 

변수 z에는 스크롤이 650일때, 크기가 1에서 1150일때, 크기가 0.9배로 작아지게끔 하는 일차방정식을 작성해주면 된다.

eq와 방정식의 높이를 바꿔가며 적용해주면 마찬가지로 모든 이미지에 적용된다.