O Em Busca do Código é um site em formato de plataforma EAD aberta e gratuita.
Aprendendo e ensinando, essa é a minha regra para mim.
Com este exercicio você completou 20% no nosso mini curso de Parallax.
Publicado dia 31 de agosto de 2017, atualizado (código fonte) dia 30 de outrubro de 2017.
Compre um adesivo do Em Busca do Código.
Publicidade
Publicidade
Publicidade
Publicidade
Neste segundo exercício nós utilizamos mais de uma imagem no background, uma de cada vez e com textos entre as transições das imagens. O código fonte inicial é o código fonte final do exercício anterior, HTML e CSS.
Neste exercício vamos trabalhar com três imagens no background, e como nós inserimos a primeira imagem?
Nós criamos uma <div> e, a esta <div> nós informamos uma classe. Essa classe recebe a imagem de background. E é isso que nós iremos fazer, criaremos mais duas tags div com uma classe para cada uma. O parallax já funcionaria assim, mas eu quero textos entre as imagens, por isso, nós vamos adicionar textos logo depois da <div> de cada imagem de background, para isso basta seguir o padrão do nosso código fonte inicial.
Vídeo:
No vídeo eu alterei um pouco o modo de explicar do ebook, mas resumindo nós utilizamos a mesma estrutura do primeiro exercicio de parallax.
O código fonte a seguir é feito tendo base o parallax que utiliza apenas uma imagem de background. Repare nas classes parallax02 e parallax03. O nome dessas classes e o que está escrito nas tags p, são as unicas informações alteradas.
O grande diferencial deste segundo exercício de parallax está nas novas imagens, vamos ao CSS.
Já no arquivo CSS sabemos que todas as imagens recebem a mesma configuração, quais são essas configurações?
Publicidade
Teste em seu navegador e veja que a mesma imagem se repete três vezes.
Já entendeu essa dica? Para uma melhor explicação assista ao vídeo ou adquira o ebook.
Link para adquirir o ebook.Código fonte HTML final:
Código fonte CSS final:
Caso tenha conseguido e, ainda assim tenha ficado com alguma dúvida, faça este exercício sem olhar o código fonte inicial e nenhum código fonte. Você vai conseguir.
Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.