Landing: scroll que vira seção fluida
Quando um bloco parece 'plataforma solta', o trabalho é transformá-lo em seção fluida no scroll — hierarquia e ritmo visual.
Problema visual
Nesta parte do material sobre landing page scroll secoes, o foco é «Problema visual». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Colar agora tá bom, vamos ver comecei a rolar a página, beleza né agora tá fluindo, o que falta agora então é a gente tirar essa plataformazinha aqui, fazer com que isso daqui vire uma seção, isso aqui é meio que uma ilusão de óptica, e a gente fez aqui ó, que é o seguinte ó, essa partezinha pam, pam, pam, e aí ó pode ver que essa seção 3, ela sempre esteve aqui, só que ela tava com opacidade zero, então ela se torna visível e conforme a gente rola a página Tem essa transformação 3D. Como que a gente pode fazer uma transformação 3D com CSS? Obrigado A nossa div, a gente pode ter as transformações Dentro do CSS, certo?
Transformações, por exemplo, de movimento Então tá aqui e se move no eixo X Que é o eixo horizontal Ou se move no eixo Y Ou se move no eixo Z, que é pra dentro e pra fora Da tela, ou então rotaciona No eixo X, uma rotação Esse é o nosso elemento Esse é o eixo X horizontal A rotação seria assim No eixo Y, a rotação seria assim Meio difícil de mostrar aqui E no eixo Z seria assim. A rotação que a gente vai querer aqui é a rotação no eixo X, que o nosso elemento está assim. E aí ela começa a abrir até que ela fica 90 graus aqui.
Virar seção real
Nesta parte do material sobre landing page scroll secoes, o foco é «Virar seção real». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
O texto, ele não tá interpretando como se a DivPy estivesse realmente fazendo assim, ó, porque senão o texto também ficaria uma perspectiva. Se eu colocar 90 graus, você pode ver que agora ficou igual uma lâmina e sumiu. Quando você tem um cenário, você tem uma câmera filmando esse cenário, como se fosse o nosso site está aqui e temos uma câmera.
Então, se eu colocar, por exemplo, 2000 pixels, ah lá, temos uma perspectiva. Usuário, de um observador que está enxergando isso no meio, fica certinho como se fosse uma lâmina. Se eu estou vendo no meio e a div está 90 graus no meio.
Na prática
Do mock 'plataforma' solta para seção fluida no scroll da landing.
Scroll e hierarquia
Nesta parte do material sobre landing page scroll secoes, o foco é «Scroll e hierarquia». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Só que se ela está mais para baixo, você pode ver que eu, que ainda estou observando do meio, eu estou vendo ela meio de cima. Só que se eu colocar para que esse observador também fique para baixo, aí E aí vai voltar a ver somente uma lâmina. E no eixo X, realmente eu vou querer 50%, não que o cara veja daqui ou daqui, do centro horizontal, só que vertical eu vou querer que fique um pouquinho mais para baixo.
Então, sei lá, 60% e a gente vai fazendo testes. Então, se eu colocar 71, 2, 3, só que ficou muito para baixo, né? Só que uma coisa, só para a gente poder visualizar de novo, eu vou colocar, sei lá, 74.
Checklist de polish
Nesta parte do material sobre landing page scroll secoes, o foco é «Checklist de polish». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Se eu colocar, por exemplo, 0.5, ah lá, já ficou menorzinho, mas a pontinha dele ainda está pegando ali, ó. E aqui em vez de 0.74, vou colocar 0.73 para que ela meio que suma mesmo. E agora com o gsap, eu vou fazer com que ela volte à posição original, que é preenchidinho, sem 3D, sem nada.
Deixa eu pegar esse nosso código, em vez de script.js, eu vou criar aqui um excluir.html e vou jogar tudo aqui. E aqui vai dar na mesma, só para que a gente possa ver melhor o código. E vou colar aqui para a gente fazer agora a continuação do nosso código.
Sinais de que está funcionando
Nesta parte do material sobre landing page scroll secoes, o foco é «Sinais de que está funcionando». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
No código, no código está 0.44, ele vai para 1. E também no código está 90 graus, RotateX. A esse elemento sincronizado com scroll né depois não quero que aconteça junto vai acontecer depois mesmo dessa animação dos cards essa nossa essa nossa dívida obrigado ela vai surgir vou copiar o código vou colar tudo aqui publicar vamos ver alterações para ver se vai funcionar ó começou card um card dois card três e agora não aconteceu nada porque deixa eu pensar aqui de obrigado a tá Perdão, pessoal.
Eu joguei esse código aqui, ó, fora do nosso DOM Content Load, que é esse último fechamento. Ele não tava identificando essa constante linha do tempo, porque a gente jogou o código fora do DOM Content Load. Ele pode Originalmente ter bordas arredondadas E depois eu zero essa borda Esse border radius, igual tá aqui Você pode ver, inicialmente Tem uma bordinha arredondada Então é um charmezinho, são detalhes Então eu posso colocar, por exemplo, border radius Que no gsap é assim Junta a segunda palavra maiúscula Vou colocar zero E o padrão dele, aqui dentro da nossa divpy Eu vou ter div Obrigado com border Radius 40 pixels, por exemplo Vamos ver se agora vai funcionar.
O que evitar na primeira semana
Nesta parte do material sobre landing page scroll secoes, o foco é «O que evitar na primeira semana». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Diretamente no editor de código do Elementor aqui mesmo, para a gente poder ganhar tempo. Eu vou fazer o seguinte, eu posso falar que essa div obrigado, ela inicialmente, from, vai ter uma opacidade de zero. Então vai ter uma opacidade de zero, isso daí vai ser em uma duração bem rapidinho, por exemplo, 0.5 segundos, e pode começar junto com esse efeito anterior.
Então aqui eu vou colocar vírgula, e vou colocar que vai acontecer menor ou igual a 0.5. Então 0.5 antes dessa animação anterior acabar, Essa nossa div obrigado, ela vai ganhar opacidade 1, ela vai ficar visível, né? Porque ela vai vir de uma opacidade 0, ganha opacidade e depois acontece realmente a animação dela, que é ela ganhar esse scale e surgir.
Como explicar isso para o time
Nesta parte do material sobre landing page scroll secoes, o foco é «Como explicar isso para o time». Em vez de teoria genérica, o raciocínio parte do que acontece quando você executa de verdade.
Por isso que é sempre bom você utilizar o console do navegador para ver erros. Não tá ficando aqueles pixels, a parte do texto aqui visível, ó, e só depois vai surgir, ó. Algo que eu posso fazer também, quando surge, começa a vir, essa luz de fundo se apaga, né?
Assim, a minha intenção aqui é que vocês realmente entendam o que está acontecendo aqui para que vocês possam personalizar esse efeito, fazer outros layouts para clientes como vocês quiserem. Eu vou pegar a div gradient2, então div gradient2, e vou jogar, em vez de from, vai ser to para uma passidade zero, pode ser em ponto 5 aqui mesmo. Essa segunda aqui, então em vez de colocar ponto 5, eu vou falar que vai acontecer junto com a outra.
Na prática
Próximo passo: escolha uma métrica (taxa de sucesso, tempo, retries ou conversão) e rode um experimento de 7 dias antes de escalar o padrão.