image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image
Daniela Segadilha
Daniela Segadilha22/09/2023 12:13
Compartilhe

Parallax effect

    Pra quem não conhece o efeito parallax, essa é a definição dele:

    O efeito parallax na programação acontece quando elementos na tela de um computador se movem a diferentes velocidades. Isso cria a ilusão de profundidade e faz com que alguns objetos pareçam mais próximos do que outros, assim como a árvore na janela do carro. Por exemplo, em um jogo de computador, você pode ter um personagem na frente e um fundo com montanhas. O personagem se moverá mais rápido na tela do que as montanhas ao fundo. Isso cria a sensação de que o personagem está mais perto de você do que as montanhas.

    Nos sites o efeito parallax pode dar um aspecto mais profissional e dinâmico ao seu layout e melhorar a experiência do usuário, se usado de maneira correta.

    Por isso resolvi deixar com vocês um site que encontrei uma vez com 26 exemplos de efeitos parallax ( porque existe do mais simples ao mais avançado), onde o site conta com as demos e o código feito para quem quiser usar: https://freefrontend.com/css-parallax/

    A foto da capa do artigo é de um demo de efeito parallax com sensação de profundidade no eixo Z, quando o mouse se move, a imagem também se move em todos os eixos. É um dos tipos que eu mais gosto, ele está no site acima, mas vou deixar um link diretamente pra ele, fica mais fácil de vocês verem: https://codepen.io/dazulu/pen/VVZrQv

    Compartilhe
    Comentários (0)