Desenvolvimento Web / CSS e CSS3

Adicione efeito de profundidade na sua página com Parallax Scroll

Veja como desenvolver o efeito totalmente do zero trabalhando com jQuery para monitorar o browser do usuário

Por Gustavo Web

Publicado por Gustavo Web
em 07/09/2018 às 10h00

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

Salve salve webmaster! Gustavo Web por aqui e hoje vamos ver como desenvolver o parallax.

É um efeito bem tranquilo de se criar e dá um efeito legal na página e vários sites utilizam essa técnica, mas antes de sair usando o efeito, vamos entender o que ele é, qual o objetivo e as contra-indicações?

Parallax

O objetivo desse efeito é de colocar uma maior atenção "na linha dos olhos" de quem está lendo o seu conteúdo. Com isso, tudo o que há por fora que não tem tanta atenção acabaria passando quase desapercebido dos usuários com a consequência de realmente entregar o que importa para o visitante.

Como tudo se modifica na web, esse estilo de efeito foi sendo adaptado com o passar do tempo e agora é aplicado para dar uma sensação de profundidade e praticamente que não há mais a tal preocupação com a "linha dos olhos".

Navegabilidade fluida

É claro que sempre tem quem exagera no uso e acaba fazendo com que a navegação do usuário fique presa e passe a controlar até mesmo a velocidade do scroll da página, ou ainda omite os conteúdos para ficar mostrando cada um na sua devida ordem!

Quando o seu visitante não está com pressa, seja um simples estudo ou ainda navegando de curioso pela sua página pode até ser legal ficar reparando nos efeitos...

... mas quando ele quer o seu telefone para entrar em contato, ele tem 1% de bateria no smartphone e número está lá no rodapé, provavelmente você terá um acesso frustrado ao seu conteúdo.

Use com responsabilidade

O equilíbrio é a chave para suas preocupações! Você vai ver na aula que basicamente trabalhamos com o efeito no background e só com deslocamento de posição.

É claro! Você pode combinar com outros efeitos de opacidade, tamanhos, cores, sombras... Tudo o que puder combinar para atingir o seu objetivo principal. Mas nunca se esqueça de quem está do outro lado tela :)

Biblioteca Javascript jQuery

Nessa aula vamos trabalhar com a lib jQuery para ficar monitorando o evento de scroll, e a cada novo valor que recebemos tratamos de manipular nossos elementos até atingir o objetivo.

Emmet na IDE

Você pode notar que nessa aula não temos nem repositório para material de apoio! Você pode pegar qualquer imagem da sua máquina e seguir comigo o passo a passo.

Todo o HTML será desenvolvido em aula, bem como o CSS.

Você vai notar que eu uso um helper para escrever as tags para mim, isso me torna bastante ágil e permite eu criar vários blocos de conteúdo.

Você pode estudar se a sua IDE possui esse tipo de recurso, no meu caso (PHPStorm) isso já vem nativamente :)

Feedback

Me conta aqui abaixo o que você achou dessa aula e se você vai aplicar isso em um projeto! Se já tem esse efeito rolando, deixa o link aqui abaixo para servir como material de estudo e até mesmo como fonte de inspiração para os demais colegas.

Compartilhe:

Em Desenvolvimento Web:

Deixe seu comentário: