Conheça

Já ouviu falar em scroll? nossa essa pergunta parece meio idiota ne?! mas é um efeito de deslizamento em rolagem de tela… eu sei como eu falei pode até bugar sua compreensão, mas dá uma sacada nesse site aqui, ele é uma api que usamos para gerenciar mensagens de erros.

Como baseia-se?

Esse efeito viralizou por volta de 2015 em boa parte da web, criaram vários artigos bem legais falando do efeito, e equipes que trabalham com psicologia cada vez mais apoiava a criação deste efeito, e mostrava os seus diversos pontos positivos.

Ele é um calculo de medidas, através de valores de posições do eixo x e eixo y, tem valores em Javascript onde ele ajuda bastante nisso, como o valor que captura a posição e retorna o valor em pontos, no qual é útil e a função que move o scroll até determinado ponto, isso causa este efeito, mas como notou a grande dificuldade e o nível de complexidade, as pessoas optaram por usar bibliotecas e/ou frameworks para isso, como o Jquery ou o Angular-scroll.

O uso delas ainda hoje é bastante comum e fácil, mas iremos usar aqui apenas css, então prepare-se para os bilhões de códigos 😅

Show me the code

Mas sim, concordo que realmente é e sim fica bem simples usar através dessas bibliotecas para criar tanto esse quanto outros efeitos legais no frontend.

Acho que pode reduzir um pouco suas linhas de códigos...

É, eu não estou louco e nem você por acreditar nisso, mas é verdade, a mozila montou uma documentação bem detalhada de seu funcionamento aqui na MDN e em português, eu fiquei abismado ao saber disso, para usar em seu código basta você colocar algum link na própria página e, fim.

A grande bad

Eu fiquei full animado com tudo isso, mas fui verificar e fazer testes, até que me deparei com a informação que o navegador Google Chrome havia tirado o suporte deste recurso em CSS, na real… eu esperava isso do Explorer, do Edge ou sei lá… mas não do Google Chrome.

Espero que ele venha criar um suporte pra isso, afinal ele é usado por aproximadamente 58% da internet.

Mas fiz um outro artigo, mostrando como é possível fazer esse efeito usando o JS para o Google chrome (no caso o que não suporta, mas essa forma é funciona em todos os browsers), usando apenas seis linhas de puro JS, veja aqui.