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.

Realizando este exercicio você completou 10% no nosso mini curso de Parallax.

Publicado dia 30 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

1º exercício: Conteúdo vs background

Publicidade

Sem mais delongas vamos começar o exercício um. Para realizar este curso você precisará de três imagens full HD, essas imagens serão utilizadas como background. E no mínimo uma imagem, que sugiro que seja 1:1 a escala, por exemplo, suas dimensões sejam 500px x 500px, 1000px por 1000px. Isso é apenas um sugestão, eu sugiro que essa quarta imagem seja quadrada.

Precisará criar uma pasta exclusiva para uso deste curso, pode colocar o nome dela de parallax. As dicas iniciais contém dois arquivos, um com extensão .html e outro com extensão .css, algumas dicas terão um terceiro arquivo com extensão .js, avisarei quando precisar deste terceiro arquivo.

Um segundo arquivo é necessário, o reset.css, este arquivo é responsável por zerar as configurações padrões de qualquer navegador, todos navegadores contém pequenas configurações, que no final, podem alterar um pouco o layout do seu site. A seguir você confere o link para o código fonte do reset css do Eric Meyer, existem outros códigos como este, se conhecer outro pode utiliza-lo.

Código fonte do reset css do Eric Meyer

Publicidade

Como já informei antes, neste primeiro exercício utilizaremos apenas HTML e CSS, criei um pequeno padrão para os nomes dos arquivos utilizados neste curso, o inicio do nome de cada arquivo chama-se parallax, e seguindo esse nome temos o número do exercício, neste caso 01. Então, o nome dos arquivos do exercício é parallax01, seguido pela extensão, .html e .css.

Se ainda não criou, crie os arquivos parallax01.html e parallax01.css.

Todos exercícios deste curso teremos algum código fonte inicial, algumas vezes o código fonte inicial poderá ser o código fonte final do exercício anterior, ou qualquer outro exercício, eu sempre vou informar no inicio de cada exercício.

O código fonte HTML inicial sofrerá apenas duas alterações até chegar no código fonte final. A seguir você confere o código fonte inicial (HTML).

<!DOCTYPE hmtl>
<html>
    <head>
        <title>Parallax 01</title>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
        <meta name="viewport" content="width=device-width", initial-scale="1.0">
        <link rel="stylesheet" href="parallax01.css">
        <link rel="stylesheet" href="reset.css">
    </head>
    <body>
        <h1>Imagens retiradas do pixabay.com</h1>
        <section>
            <div>
                <p>Neste exemplo nós apenas deixamos a imagem do background fixa, fazendo com que, o conteúdo que aparece, passe por cima da imagem.</p>
                <p>Parece simples (é simples), mas isso, é a base do famoso Parallax.</p>
            </div>
        </section>
    </body>
</html>

Vídeo:

Outros links que cito no vídeo:

Breakpoint em HTML5 CSS3
Exemplo de Parallax da W3C

O que é VH?

VH é uma medida que pode ser utilizada no desenvolvimento web, vh é a altura do viewport. Bem resumidamente, viewport é a tela do usuário, e a altura do viewport é a altura da tela. A medida vh trabalha com percentagem, onde 100vh é 100% da altura da tela.

background-size: cover;

A propriedade background-size possibilita alterar o comportamento padrão do navegador com relação a imagem do background. Utilizando o valor cover a imagem será dimensionada sempre proporcionalmente ao tamanho do elemento, neste caso, ao tamanho da tela do dispositivo que o usuário está utilizando.

O restante da explicação está no vídeo ou ebook.

Link para adquirir o ebook.

Código fonte HTML final:

<!DOCTYPE hmtl>
<html>
    <head>
        <title>Parallax 01</title>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
        <meta name="viewport" content="width=device-width", initial-scale="1.0">
        <link rel="stylesheet" href="ebook_parallax01.css">
        <link rel="stylesheet" href="reset.css">
    </head>
    <body>
        <h1>Imagens retiradas do pixabay.com</h1>
        <div class="parallax01"></div>
        <section>
            <div class="texto">
                <p>Neste exemplo nós apenas deixamos a imagem do background fixa, fazendo com que, o conteúdo que aparece, passe por cima da imagem.</p>
                <p>Parece simples (é simples), mas isso, é a base do famoso Parallax.</p>
            </div>
        </section>
    </body>
</html>

Código fonte CSS final:

.parallax01 {
    /* The image used */
    background-image: url(imagem.jpg);

    /* Set a specific height */
    min-height: 100vh;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.texto {
    background-color: deeppink;
    font-size: 2em;
    text-align: center;
    padding: 1em;
}
body {
    height: 250vh;
}
body h1 {
    font-size: 2em;
    padding: 1em;
    text-align: center;
    background-color: deeppink;
    height: 10vh;
}

Vamos para o próximo exercício. Até já já.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.