iBassini Postado Fevereiro 6, 2019 Compartilhar Postado Fevereiro 6, 2019 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. Autor iBassini Categoria HTML | CSS | Javascript Enviado 06-02-2019 11:39 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 para o comentário Compartilhar em outros sites More sharing options...
Posts Recomendados
Crie uma conta ou entre para comentar
Você precisar ser um membro para fazer um comentário
Criar uma conta
Crie uma nova conta em nossa comunidade. É fácil!
Crie uma nova contaEntrar
Já tem uma conta? Faça o login.
Entrar Agora