Jump to content

Como criar um efeito Parallax em seu site com HTML e CSS


iBassini
 Share

Recommended Posts

Como criar um efeito Parallax em seu site com HTML e CSS


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. 1 2 3 4 5 6 7 8 9 <!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. 01 02 03 04 05 06 07 08 09 10 11 12 13 .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.

 

9dd35565353000e11f3d1fc3aa5f6307.gif

Aquela pessoa que ajuda os outros simplesmente porque deveria ou precisa ser feito, e porque é a coisa certa a fazer, é sem dúvida, um super-herói de verdade.

- Stan Lee

Link to comment
Share on other sites

  • 529
  • 675
  • 7
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share




×
×
  • Create New...

pc jenkins GIF by South Park

AdBlock extension detected!

GGames is maintained by advertisements for our visitors.

Please disable your browser's AdBlock Extension first, in order to use our Forum.

Rest assured, our ads will not disturb your browsing and reading.

I've Dissable