Home
Imagem-Perfil-Circulo com Efeitos

Menu Fixo estilo Aplicativo

CSS

				
					.containerMenu{
    background-color: #EBEAEB;
}


.iconePreenchido{
    opacity: 0;
    transition: all .5s;
    padding: 0px 2px;
    border-radius: 50%;
    margin: 16px 18px;
    
}

.containerIcone.ativo .iconePreenchido{
    background-color: #EBEAEB;
    opacity: 1;
    padding: 12px 16px;
    margin: 0px 2px;
    transition: all .3s .1s;
   
}

.containerIcone{
    transition: all .3s .2s;
    position: relative;
}

.containerIcone.ativo{
     transform: translateY(-32px);
     transition: all .3s
     
}

.tituloIcone{
    opacity: 0;
     transition: all .3s;
}

.containerIcone.ativo .tituloIcone{
    opacity: 1;
    transition: all .3s .4s;
}

@media (max-width: 767px){
    .containerIcone.ativo{
     transform: translateY(-20px);
}
}

				
			

JavaScript

<script>
const containersIcone = document.querySelectorAll(".containerIcone");
const secoes = document.querySelectorAll(".secao");

let observar = new IntersectionObserver(aparecerSecao, {threshold: .3});

function aparecerSecao(listaSecoes, observar){
    listaSecoes.forEach(secao => {

        if(secao.isIntersecting){
            containersIcone.forEach(containerIcone => containerIcone.classList.remove("ativo"));
            let iconeAtivo = document.querySelector(`a[href="#${secao.target.id}"]`);
            iconeAtivo.classList.add("ativo")
        }
    });
}


secoes.forEach(secao => {
    observar.observe(secao);
})
</script>

TESTE POPUP

Recupere seu investimento

Se você for um completo iniciante, levará em média 1 a 2 meses para assistir todas as aulas básicas. Após isso, já estará apto a conseguir seus primeiros clientes. Acredite ou não, com apenas um site, que pode ser criado em 2 ou 3 dias, você já terá a chance de recuperar seu investimento com a comunidade!