Boa noite! Já fazem dois dias que estou quebrando a cabeça tentando reproduzir o efeito parallax no cabeçalho. Isto é, estou procurando informações complementares na internet sobre como criar tal efeito utilizando CSS puro. Eu segui as instruções do curso e o efeito foi bem legal, porém, ainda existem muitas lacunas para o meu entendimento. Alguém, por obséquio, poderia digitar um Passo a Passo (sei que é pedir muito) de como criar tal efeito?
Após o exercício, abri um novo arquivo html para tentar repetir o efeito, mas de alguma forma, as palavras do meu "li" ficam muito pequenas. Nesta tentativa, tentei focar apenas no cabeçalho. Estou fazendo isso:
1)
<header class="cabecalho">
<h1 class="titulo-cabecalho">Efeito Parallax</h1>
<p class="subtitulo-cabecalho">Milésima Tentativa</p>
<ul class="palavras-cabecalho">
<li class="palavra-home eficiencia">Eficiência</li>
<li class="palavra-home boas-praticas">Boas práticas</li>
<li class="palavra-home codigo-limpo">Código limpo</li>
<li class="palavra-home css3">CSS3</li>
<li class="palavra-home html5">HTML5</li>
<li class="palavra-home javascript">JavaScript</li>
<li class="palavra-home acessibilidade">Acessibilidade</li>
<li class="palavra-home responsivo">Responsivo</li>
<li class="palavra-home otimizacoes">Otimizações</li>
<li class="palavra-home agilidade">Agilidade</li>
<li class="palavra-home design">Design</li>
</ul>
</header>Dúvida: Apenas com o HTML acima já é possível estruturar o meu Parallax?
Agora, configurando o CSS:
2)
/*Primeiro Passo*/
.cabecalho {
position: relative;
}
/*Segundo Passo*/
.palavras-home{
position: absolute;
perspective:6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* Terceiro Passo*/
.palavra-home {
position: absolute;
font-family: Arial sans-serif;
font-weight: bold;
color: #D5447E;
font-size: 80%;
}
/* Quarto passo */
.eficiencia {
top: 50%;
left: 60%;
transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px);Depois disso, eu aplico uma fonte de 400% ao meu "li" e em seguida adiciono uma SCALE (0.25).
Dúvida: Por que a fonte precisa ser de 400%? E por que a escala de 0.25? Como se chegou a esse número? A fórmula abaixo para scale procede? Scale= perspective/perspective-translate
Bom, quando atualizo minha página até este ponto, as palavras do "li" ficam muito pequenas. Aumentei a escala para 1, ajudou um pouco, mas o problema é que precisa funcionar com 0.25. Não sei o que estou fazendo de errado.
Resolvi continuar, já que meu objetivo era conseguir o efeito Parallax, pensei que daria um jeito no tamanho da fonte mais tarde. Pois bem:
/* Quinto passo*/
html, body {
height: 100%;
overflow-x: hidden;
}
/*Sexto passo*/ E ao mesmo tempo retiro perspective do meu UL*/
body {
perspective: 6px;
perspective-origin: 50% 160px;
}
/*Sétimo passo*/
.palavras-cabecalho, .cabecalho{
transform-style: preserve-3d;
}Neste processo tenho as seguintes dúvidas:
Por que dar um height de 100% para o html e para o body?
Por que perspective precisa ser trocada de lugar?
- Por que perspective-origin é de 50% e por que 160px? (perspective-origin: 50% 160px;)
Ficaria muito grato se alguém separasse um tempo para esclarecer minhas dúvidas. Quero usar Effects Parallax adicionando background-image.
Estou adorando aprender HTML e CSS, mas ficaria frustrado se seguisse com o curso sem ter entendido essa parte.
Aguardando (ansiosamente) uma resposta =)
