Ter um site atrativo faz muita diferença independente do que você esteja querendo fazer com seu site, e uma das coisas que chamam muita atenção em um site são as imagens com efeito parallax.
Efeito parallax é quando uma imagem que está no fundo do site passa com uma velocidade diferente do resto do conteúdo.
Antes de começarmos este tutorial, clique aqui para conferir como é uma imagem com efeito parallax.
Agora vamos começar.
1º – Crie a estrutura HTML
Neste exemplo faremos o efeito de parallax em uma imagem que está junto com o texto, então dentro da div onde ficará o conteúdo de sua página crie uma nova div com uma classe que será nosso parallax, neste exemplo a chamaremos de ‘parallax’ mesmo.
<!DOCTYPE html> <html> <body> <div class="conteudoTuto"> <div class="parallax"></div> </div> </body> </html>
Após isso pode colocar o restante do conteúdo de sua página tranquilamente, a única div que precisávamos criar é esta.
2º – Criar o efeito com css
Após ter criado a div responsável por exibir a imagem, temos que criar o css para mostrar a mesma.
Primeiramente defina a imagem que escolheu para ser o background de nossa div, logo em seguida defina a altura que essa div terá, como nossa imagem agora é um background ela precisa ter um tamanho definido.
Agora vem o passo chave para criar o nosso efeito, adicione a propriedade ‘background-attachment’ como ‘fixed’, é aqui que a mágica acontece, a imagem ficará fica no fundo e o restante do conteúdo passará por cima dela criando nosso efeito de parallax, mas ainda não acabou, mas algumas propriedades precisam ser acrescentadas.
Agora que ela está fixa, precisamos posiciona-la e redimensiona-la para que tudo fique certo.
.parallax {
/* Coloque a imagem a ser usada como background */
background-image: url("img/img.jpg");
/* Defina uma altura para a visão que o usuário terá da imagem */
min-height: 350px;
/* defina o background como fixo e posicione a imagem */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Pronto, o parallax está pronto, você pode criar vários em sua página, basta atribuir uma nova imagem a uma nova classe e acrescenta-la a uma div.
Publicidade
Surgindo dúvidas coloque nos comentários.
Publicidade
