Efeito Scroll

Código Script

<script>
    const elementos = document.querySelectorAll(".scroll-bottom, .scroll-left, .scroll-top, .scroll-right");
    const posicaoScroll = window.innerHeight * 0.7;
    
    function fadeScroll(){
        elementos.forEach(elemento =>{
            const elementoTop = elemento.getBoundingClientRect().top - posicaoScroll;
            if(elementoTop < 80){
                elemento.classList.add("ativo");
            }
                else{
                    elemento.classList.remove("ativo")
                }
        })
    }
    
    window.addEventListener("scroll", fadeScroll);
</script>

Código CSS

.scroll-left{
    opacity: 0;
    transition: 0.5s all;
    transform: translate(-30px, 0);
}

.scroll-right{
    opacity: 0;
    transition: 0.5s all;
    transform: translate(30px, 0);
}

.scroll-top{
    opacity: 0;
    transition: 0.5s all;
    transform: translate(0, -30px);
}

.scroll-bottom{
    opacity: 0;
    transition: 0.5s all;
    transform: translate(0, 30px);
}


.ativo{
    opacity: 1;
    transition: 0.5s all;
    transform: translate(0, 0);
}