1
resposta

[Sugestão] Para quem quiser um código mais clean no projeto Culturama (main.js)

Depois de fazer vários testes e usar bastante o modo desenvolvedor (F12) do navegador, com muitos console.log para obter as informações necessárias, consegui criar um código mais enxuto, onde faço um array de observadores e, com forEach, if, else e for, construo um código com o menor número de linhas possível.

JS:

const observador = new IntersectionObserver((e) => {
    //primeiro for each é as animaçoes do banner, como é uma array de 3 section o if ve se o elemento esta na tela e verifica se o elemento é o que tem a classe name banner(section)
    e.forEach((e => {
        if (e.isIntersecting && e.target.classList.value === "banner") {
            e.target.children[0].classList.add('animacao');
            e.target.children[1].classList.add('animacao-2');
            e.target.children[2].classList.add('animacao-3');
            e.target.children[3].classList.add('animacao-4');
        } else {
            e.target.children[0].classList.remove('animacao');
            e.target.children[1].classList.remove('animacao-2');
            e.target.children[2].classList.remove('animacao-3');
            e.target.children[3].classList.remove('animacao-4');
        }

    //segundo for each é os botões da categoria, como é uma array de 3 section o if ve se o elemento esta na tela e verifica se o elemento é o que tem a classe name categorias__lista(Ul)
        if (e.target.classList.value === "categorias__lista" && e.isIntersecting) {
            //para não ter repetições de codigos, temos um for, para passar em todos os arrays de informações, e colocando e retirando as classes automaticamente
            for (i = 0; i < e.target.children.length; i++) {
                if (i <= 3) {
                    e.target.children[i].classList.add('animacao-botao-esquerdos');
                } else {
                    e.target.children[i].classList.add('animacao-botao-direitos');
                }
            }
        } else {
            for (i = 0; i < e.target.children.length; i++) {
                if (i <= 3) {
                    e.target.children[i].classList.remove('animacao-botao-esquerdos');
                } else {
                    e.target.children[i].classList.remove('animacao-botao-direitos');
                }
            }
        }

        //terceiro for each é a mesma teoria do segundo, só com mais if pois as classes adicionadas não esta em ordem, e sim a cada par. (Ul eventos__lista)
        if (e.target.classList.value === "eventos__lista" && e.isIntersecting) {
            for (i = 0; i < e.target.children.length; i++) {
                if (i <= 1) {
                    e.target.children[i].classList.add('card-esquerda');
                }

                if (i >= 2 && i <= 3) {
                    e.target.children[i].classList.add('card-direita');
                }

                if (i >= 4 && i <= 5) {
                    e.target.children[i].classList.add('card-esquerda');
                }

                if (i >= 6 && i <= 7) {
                    e.target.children[i].classList.add('card-direita');
                }

            }
        }else {
            for (i = 0; i < e.target.children.length; i++) {
                if (i <= 1) {
                    e.target.children[i].classList.remove('card-esquerda');
                }

                if (i >= 2 && i <= 3) {
                    e.target.children[i].classList.remove('card-direita');
                }

                if (i >= 4 && i <= 5) {
                    e.target.children[i].classList.remove('card-esquerda');
                }

                if (i >= 6 && i <= 7) {
                    e.target.children[i].classList.remove('card-direita');
                }

            }
        }

    }))
})

// variavel que pega os 3 datas-atributes fazendo uma array (assim nao precisa criar 3 conts diferentes para o observador)
const animacao = document.querySelectorAll('[data-animacao]')
animacao.forEach((e) => {
    observador.observe(e);
})

Se tiverem mais alguma dica, para deixar o código ainda melhor, mandam para mim :D

1 resposta

Olá, Eric!

Legal sua iniciativa de refatorar o main.js para as animações de scroll e compartilhar sua versão mais enxuta!

Muito bom seu empenho em otimizar e testar. Continue assim!

Espero ter ajudado! Bons estudos!

Sucesso