4º exercício: Texto fixo em imagem

Neste exercício nós utilizamos apenas uma imagem de background, e o texto dessa imagem será fixo, a grande diferença desse exercício para o exercício anterior é o texto da imagem ser fixo. Neste exercício nós utilizamos apenas uma imagem e apenas um texto sobre imagem pois, para adicionar textos fixos sobre imagens de background diferentes precisamos utilizar JavaScript.

Isso mesmo, no próximo exercício já utilizaremos JS.

Os códigos fontes iniciais, tanto HTML quanto CSS desse exercício são os códigos fontes finais do exercício anterior, o exercício número 3.

Vídeo:

Lembre-se do padrão dos nomes dos arquivos, e a primeira informação desta dica é excluir tudo relacionado a segunda e terceira imagem de background, no vídeo eu apenas comento (não excluo), tudo (no HTML) entre a segunda imagem de background até antes do fechamento da tag body.

No CSS alteramos o valor da position da classe dos textos das imagens (textoimg) para fixo, e vale a pena testar o seu navegador nesse momento.

Depois de testar nós arrumamos o que está errado com z-index e no vídeo eu faço uma pergunta com relação ao z-index, caso queira responder lá no YouTube fique a vontade.

Existe outro erro nesse momento e é relacionado a tag body, nesse momento coloque a altura que está no body na própria classe do texto de conteúdo (.texto), não precisa ser tão alta assim para vermos tudo funcionando corretamente.

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:

<!DOCTYPE hmtl>

<html>
    <head>
        <title>Parallax 4</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="parallax04.css">
        <link rel="stylesheet" href="reset.css">
    </head>
    <body>
        <h1>Exercício 4 de parallax</h1>
        <div class="parallax01">
            <p class="textoimg">textos nas imagens</p>
        </div>
        <section>
            <div class="texto">
                <p>No exemplo anterior nós adicionamos uma imagem e fizemos o texto passar por cima desta image, esta imagem sendo "fixa".</p>
            </div>
        </section>
    </body>
</html>

Código fonte CSS final:

.textoimg {
    position: fixed;
    text-align: center;
    top: 50%;
    width: 34%;
    left: 33%;
        /*
        50-(17) = 33
        34 + 33 = 67
        */
    background-color: #111;
    color: #fff;
    padding: .7em;
    font-size: 2em;
    letter-spacing: .3em;
    opacity: .9;
    z-index: 2;
}
.parallax01 {
    /* The image used */
    background-image: url("imagem.jpg");
}
.parallax02 {
    /* The image used */
    background-image: url("imagem2.jpg");
}
.parallax03 {
    /* The image used */
    background-image: url("imagem3.jpg");
}

.parallax01, .parallax02, .parallax03 {
    height: 100vh;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    position: fixed;
}
.texto {
    position: relative;
    background-color: brown;
    font-size: 2em;
    text-align: center;
    padding: 1em;
    z-index: 4;
    height: 150vh;
}
.texto2 {
    background-color: tomato;
    font-size: 2em;
    text-align: center;
    padding: 1.5em;
}
body h1 {
    font-size: 2em;
    padding: 1em;
    text-align: center;
    background-color: deeppink;
    height: 10vh;
}

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. Sim adicionei o mesmo final novamente porque é possível.

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