Alguém pode me explicar de forma clara e detalhada como fazer o efeito paralax apenas com CSS? No curso fica difícil entender.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Alguém pode me explicar de forma clara e detalhada como fazer o efeito paralax apenas com CSS? No curso fica difícil entender.
Oi Ana tudo bem?
O professor usa o transform: translate-z para jogar as palavras para frente da tela usando o eixo-z. Mas como nossa tela é bidimensional as palavras parecem ficar maior. Só que na verdade é questão de perspectiva.
Se tivesse um monitor 3D que lesse o translate-z teriamos a sensação das palavras estarem saindo da tela. Como na legenda de um filme 3D que sai da tela.
Então o professor usa isso para criar uma ilusão de ótica e um efeito bonitinho que desafia a lógica rsrsrs.
Eu tenho separado essa página que mostra o translate-z em um cubo assim conseguimos ver claramente como funciona essa propriedade do css. Dá uma olhada https://3dtransforms.desandro.com/cube
Espero ter ajudado!!!