Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

como chegar a tal conclusão

Boa tarde, na aula de Paralaxe, o exercício pede para adicionarmos transform-origin: 50% 160px. Sou iniciante na programação, e gostaria de saber como a pessoa que desenvolveu a questão chega a estes parâmetros para que ocorra tudo bem com as palavras e que elas não saem do espaço delas

4 respostas

Primeiramente, a propriedade transform-origin muda a origem dos eixos x, y e z daquele elemento (cada elemento tem os seus eixos). Além disso, transform-origin: 0 0; significa posicionar os eixos do elemento no canto superior esquerdo do elemento pai. Mais ainda, as porcentagens, quando usadas na propriedade transform-origin, tomam como base a largura e a altura, respectivamente, do elemento pai. Sabendo de tudo isso, posso explicar alguma coisa.

Quando usamos transform-origin: 50% 160px; estamos dizendo que a posição dos eixos do nosso elemento deve ficar na metade da largura do elemento pai e a 160px do topo dele. Além disso, são essas coordenadas que especificam a localização do olho do observador da página.

Essa questão é um exercício de imaginação, pense numa paisagem de montanhas, porém com um arbusto na sua frente. Se você se mover para esquerda, o arbusto irá, aparentemente, se mover mais rápido para a direita do que as montanhas, porque ele está mais próximo. Da mesma forma, se você se agachar, o arbusto irá subir mais rápido do que as montanhas. A cada movimento que você faz, o seu transform-origin está mudando, pois o seu olho está se movendo. Porém, como esse não é o caso do curso, é melhor ir para o caso de um ônibus numa estrada com paisagem de montanhas, você estará "parado" (transform-origin constante) e a paisagem estará se movendo (scroll da página), vale a mesma coisa para objetos que estão próximos e longes (as montanhas estarão "lentas" e os arbustos "rápidos").

Então, colocar o olho do observador no meio da paisagem é interessante, pois o efeito paralaxe será simétrico. Não haverá diferença de velocidade comparando esquerda e direita. Já os 160px do topo são mais por meio de testes que chegamos a valores interessantes. Como as palavras estão na parte do topo, o instrutor achou interessante posicionar o olho do observador perto do topo. Provavelmente foi um valor que dá mais ou menos no meio do cabeçalho. Dessa forma, o olho do observador ficaria praticamente no meio do cabeçalho tanto na horizontal quanto na vertical, realmente no centro.

deixa eu ver se entendi. Então todas as palavras e estão sendo ajustadas para ficarem no ponto da origem de perspectiva. As palavras com o Z maior, elas estão mais perto da origem, e o contrário estão mais longe. É como se fosse um ventilador o centro de origem, onde os elementos próximos sofrem um vento maior e tendem a saírem do seu lugar mais rápido do que os que estão mais longe.

solução!

Ainda não ficou claro.

1 - As palavras foram ajustadas para ficar no header, apenas isso.

2 - Quando usamos a propriedade transform-origin estamos posicionando o olho do observador, como se fosse o olho do usuário ! Não estamos alterando as palavras de forma alguma. O que estamos alterando é como esse olho vai enxergar as palavras.

3 - Só que você comentou uma coisa muito importante que é a perspectiva ! Ao juntar a propriedade transform-origin com a perspective você está definindo perfeitamente onde o olho do observador está localizado. A perspective define o quão distante o observador está da tela e a transform-origin define em quais coordenadas da tela o observador está olhando. Se você estiver, por exemplo, a 3200px de distância da sua tela e estiver olhando no centro dela só que um pouco à esquerda, as propriedades que descrevem o seu olho são:

perspective: 3200px; // sua distância da tela
transform-origin: 40% 50%; // coordenadas onde o seu olho está focado.
// 40% da largura vindo da esquerda e 50% da altura vindo de cima.

4 - As palavras com Z maior estão saindo da tela e indo na sua direção, então essas palavras estão na verdade se distanciando da origem dos eixos. Já as palavras com Z menor também se distanciaram da origem dos eixos, porém menos. Então observe que, quanto maior o Z de uma palavra, mais perto ela estará do olho do observador, portanto, mais rápida, aparentemente, ela estará. É mesma coisa do exemplo do arbusto e da montanha. A paisagem está na sua frente e você a olha de uma certa distância.

Muito Obrigado Axell você literalmente abriu meus olhos kkkk de verdade.

Entendi perfeitamente!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software