5º exercício: Textos fixos em múltiplas imagens

Este exercício é quase idêntico ao exercício três, entretanto, os textos das imagens são fixos. O código fonte inicial é quase idêntico ao código fonte final do exercício três, as configurações que aproximaram esse exercício do exercício quatro passo já já, lembre-se, o código fonte inicial deste exercício é o código fonte final do exercício três, exceto que, além dos arquivos parallax05.html e parallax05.css, você também deve criar o arquivo parallax05.js.

O inicio deste exercício é uma mescla dos exercícios três e quatro, e uma configuração importante no exercício quatro é deixar o texto da imagem fixo, então vamos já fazer isso, alias, com relação ao nome da classe do texto imagem, daqui a pouco a gente "arruma", vamos primeiro deixa-los fixos.

.texto {
    /* ... */
    z-index: 2;
    position: relative;
}
.textoimg {
    /* ... */
    position: fixed;
    z-index: 1;
}

Vídeo:

Agora sim vamos arrumar o nome da classe no CSS, na verdade, deixe todas as classes recebendo a mesma configuração.

.textoimg1, .textoimg2, .textoimg3 {
    position: fixed;
    z-index: 1;
    left: 33%;
    top: 50%;
    width: 34%;
    text-align: center;
    background-color: #111;
    color: #fff;
    padding: .7em;
    font-size: 2em;
    letter-spacing: .3em;
    opacity: .9;
}

Teste em seu navegador.

Como pode ver o último texto aparece na frente, e só conseguimos ver que os outros textos estão lá porque temos uma leve transparência na configuração dessas classes, isso nós arrumaremos, em partes, com JavaScript.

Antes de começar a programar em JavaScript precisamos escolher um caminho de como fazer isso, primeiramente eu preciso informar que existe mais de um caminho, e escolho esse caminho pois utilizaremos o que será visto aqui mais vezes.

O caminho que eu escolhi é, deixar o elemento (texto da imagem) invisível quando necessário e visível quando nós quisermos. Para isso nós utilizaremos JavaScript, para alterar o CSS, mas antes uma pergunta tem que ser respondida.

Qual o primeiro texto de imagem que deve aparecer?

O texto da primeira imagem deve aparecer primeiro, então as classes do segundo e terceiro textos das imagens deve receber display: none.

.textoimg2, .textoimg3 {
display: none;
}

Pronto, agora só o primeiro texto aparece. Vamos começar com o JavaScript e vamos por parte, eu quero que o primeiro texto de imagem de background suma quando o texto de conteúdo passar por ele.

Já no arquivo JS criamos uma função, essa função será a base do aparecer e desaparecer dos textos das imagens.

function desaparecerAparecer() {
}

Eu coloquei o nome dessa função de desaparecerAparecer mas você pode dar a ela o nome que você quiser.

Já ouviu falar de scrollY?

window.scrollY

Segundo a Fundação Mozilla window.scrollY retorna o número de pixels que o documento já rolou verticalmente. A primeira linha dentro da nossa função será uma variável que o valor dela é o número de pixels que o documento já rolou verticalmente.

var qualquer = window.scrollY;
}

Ainda dentro da nossa função, agora temos um simples if else. Se nossa variável chamada qualquer for menor ou igual ao número de pixels que eu informei, o valor da propriedade display, do elemento que contém uma classe chamada textoimg1 será block, OU, se for maior será none e ele fica invisível.

Teste em seu navegador e veja que não irá funcionar.

Eu sei que JavaScript é um pré requisito, mas, addEventListener não é tão básico assim, então vamos explicar basicamente o que a próxima linha do código fonte está fazendo.

A partir de um objeto (window) o addEventListener vai registrar um evento e, passar essa informação para uma função fazer algo.

window.addEventListener('scroll', desaparecerAparecer);

Teste em seu navegador e veja o texto da primeira imagem aparecer e desaparecer, role até o fim. Claro que, se você reparou eu coloquei 1000px para ele desaparecer e, para configurar certinho esse valor você precisa "testar". Na verdade você não precisa testar mas, teste. Eu testei.

Em meus testes e, em um desktop, o valor de pixels necessários foi de 440. Mas lembre-se, isso depende e muito do cabeçalho, das margens, da quantidade de texto, e de muitos outros fatores. Mas tem uma forma melhor de ver, ainda não é a melhor mas ver os pixels que o documento já rolou verticalmente já ajuda.

Nós já fizemos o primeiro texto desaparecer e aparecer, e com isso já fizemos a parte mais dificil deste exercício. Caso precise de ajuda para configurar isso nos outros textos de imagens, assista ao vídeo ou adquira o ebook.

Link para adquirir o ebook.

Código fonte HTML final:

<!DOCTYPE hmtl>
<html>
    <head>
        <title>Parallax 05</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_parallax05.css">
        <link rel="stylesheet" href="reset.css">
        <script src="ebook_parallax05.js"></script>
    </head>
    <body>
        <h1>Exemplo 05 de parallax</h1>
        <div class="parallax01">
            <p class="textoimg1">Parallax</p>
        </div>
        <section>
            <div class="texto">
                <p>Na primeira dica nós adicionamos uma imagem e fizemos o texto passar por cima desta image, esta imagem sendo "fixa".</p>
            </div>
        </section>
        <div class="parallax02">
            <p class="textoimg2">Salve</p>
        </div>
        <section>
            <div class="texto">
                <p>Na segunda dica nós utilizamos mais de uma imagem como background, algo que nós vimos que é só posicionar uma classe no lugar certo.</p>
            </div>
        </section>
        <div class="parallax03">
            <p class="textoimg3">Textos nas imagens</p>
        </div>
        <section>
            <div class="texto">
                <p>E na terceira adicionamos texto nas imagens, ainda sem nenhum efeito no texto.</p>
            </div>
        </section>
    </body>
</html>

Código fonte CSS final:

.parallax01 {
    background-image: url(imagem.jpg);
}
.parallax02 {
    background-image: url('imagem2.jpg');
}
.parallax03 {
    background-image: url("imagem3.jpg");
}

.parallax01, .parallax02, .parallax03 {
    height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

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

.textoimg1, .textoimg2, .textoimg3 {
    position: fixed;
    z-index: 1;
    left: 33%;
    top: 50%;
    width: 34%;
    text-align: center;
    background-color: #111;
    color: #fff;
    padding: .7em;
    font-size: 2em;
    letter-spacing: .3em;
    opacity: .9;
}
.textoimg2, .textoimg3 {
    display: none;
}

Código fonte JavaScript final:

Um bom exercício extra seria adicionar uma nova imagem com um texto de imagem também fixo. Este exercício extra que acabei de pedir para você fazer em alguns casos pode parecer cansativo, mas vale a pena, e demora menos de meia hora. Boa sorte e até o próximo exercício.

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