Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Apenas foi adicionando alteração em 1 elemento

por Rebeca Teodosio Maciel De Oliveira
| 67.1k xp | 63 posts

O que fazer pra que todos os elementos recebam a mesma alteração?

<div class="socialMedia">
                <ul class="sci">
                    <li >
                        <a href="#" class="linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                    </li>
                    <li>
                        <a href="#" class="github"><i class="fa fa-github" aria-hidden="true"></i></a>
                    </li>
                </ul>
            </div>

.socialMedia{
    display:flex;
    justify-content: center;
    margin: 2rem auto;
}

.sci{
    display:flex;
}

.sci li{
    list-style: none;
}

.sci li a{
    display:inline-block;
    width:120px;
    height:120px;
    background:var(--azul-forte);
    display: flex;
    justify-content: center;
    align-items: center;
    color:var(--neon-azul);
    border-radius:10px;
    text-decoration:none;
    margin: 20px;
    font-size: 4rem;
    transform-style:preserve-3d;
    perspective:500px;
}

.js-tilt-glare{
    border-radius:10px;
}

.sci li a .fa{
    transition:0.3s;
}

.sci li a:hover .fa{
    transform: scale(1.75) translateZ(50px);
}

VanillaTilt.init(document.querySelector(".sci li a"), {
    max:30,
    speed: 400,
    glare: true,
    "max-glare": 1,
});

Esse é o site: https://rebecati.github.io/Portfolio-Rebeca/ Esse é o git: https://github.com/RebecaTI/Portfolio-Rebeca (O site esta nem de longe pronto então ainda há muito oq fazer)

2 respostas
solução!
por Victor Costa Santos
| 1937.4k xp | 3735 posts
Alura Scuba Team Monitor de ForumOps

Olá, Rebeca!

Primeiramente, gostaria de parabenizá-a pelo seu projeto. Está ficando incrível mesmo! Vejo o quanto você explorou o universo de front e como dedicou a para torná-lo um projeto tão bacana e autêntico.

Mas quanto a dúvida, isso está acontecendo porque você está utilizando "document.querySelector" que retorna apenas o primeiro elemento que corresponde ao grupo especificado de seletores.

Para resolver isso, você pode usar "document.querySelectorAll" que retorna todos os elementos que correspondem ao grupo de seletores. No entanto, como "document.querySelectorAll" retorna uma lista de nós (NodeList), você precisa iterar sobre essa lista para aplicar a alteração a cada elemento, e ai podemos iterar sobre a lista com a ajuda de um foreach e seguir a sua lógica já feita.

let efeito = document.querySelectorAll(".sci li a");
efeito.forEach((elemento) => {
    VanillaTilt.init(elemento, {
        max:30,
        speed: 400,
        glare: true,
        "max-glare": 1,
    });
});

Neste código, primeiro selecionamos todos os elementos que correspondem a ".sci li a" e armazenamos em "efeito". Em seguida, usamos "forEach" para iterar sobre cada elemento na lista e aplicar a alteração que estava sendo feito apenas para o linkedin, seu projeto deve ficar assim:

Gif mostrando o funcionamento do efeito

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Rebeca Teodosio Maciel De Oliveira
| 67.1k xp | 63 posts

Muito obrigada, estou me dedicando e me divertindo muito nos estudos do front-end.