스크롤 시 올라오는 효과 추가하기

1. HTML 작성

<!-- Animation Test -->
<ul class="test-ul">
    <template for:each={testArr} for:item="con" for:index="index">
    <li key={con} class="test-con fadeOutDown">
            <p> Num : {con}</p>
            <p>Test 용 Content입니다.</p>
            <p>Test 용 Content입니다.</p>
    </li>
    </template>
</ul>

2. JS 작성

async renderedCallback() {
    if(this.isFirstRender) {
        window.addEventListener('scroll', () => this.isScroll());
        this.isFirstRender = false;
    }
}

@track testArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
isScroll(){
    let elementsArray = this.template.querySelectorAll(".test-con");
    // console.log(elementsArray);
    elementsArray.forEach((el) => { 
        let distInView = el.getBoundingClientRect().top - window.innerHeight + 200;
        if (distInView < 0) {
            el.classList.replace("fadeOutDown", "fadeInUp");
        } else {
            el.classList.replace("fadeInUp", "fadeOutDown");
        }
    });
}

3. CSS 작성

.test-ul{
    max-width: 800px;
    margin: 1000px auto 0;
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr 1fr 1fr;
}

.test-ul li.test-con{
    width: 100%;
    height: 300px;
    background-color: #FFF;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding: 20px;
    transition: all 0.3s ease-out;
}

.fadeOutDown{
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
}

.fadeInUp{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

4. 결과 화면 확인

↑ 스샷

↑ 동작화면 GIF

JS는 아래 사이트 참고했습니다
Fade in on scroll vanilla Javascript