8º exercício: Cabeçalho do site reaparece

Este exemplo será o mais simples possível, mas você pode complementar este efeito facilmente colocando em prática a sua criatividade e vontade.

O código fonte inicial deste exercício é o código fonte final do exercício anterior, mais um código fonte JS inicialmente em branco. Vale a pena lembrar de trocar os títulos, e o link contido na tag link e adicionar uma tag script para linkar o JS.

Nessa altura deste curso acho que não preciso inserir o código fonte da tag script.

Vídeo:

Neste exemplo utilizaremos a tag h1 como cabeçalho, sei que não é um cabeçalho mas, para deixar mais fácil a possível migração com um site 100% prático e funcional vamos (ainda no HTML) adicionar uma classe em nossa tag h1.

<h1 class="titulo">Exemplo 08 de parallax</h1>

E no CSS, onde estava editando o body h1, eu substituiu por essa classe.

.titulo {
    font-size: 2em;
    padding: 1em;
    text-align: center;
    background-color: deeppink;
    height: 10vh;
}

Pronto, agora podemos começar com o JavaScript.Pronto, agora podemos começar com o JavaScript.

O inicio de tudo é uma função, onde dou a ela o nome que eu quiser.

function titullax () {
}

Dentro dessa função criamos aquela variável responsável por verificar a quantidade de pixels que a página rolou verticalmente.

alturaDoTitulo = window.scrollY;

Para evitar futuros "bugs" vamos voltar ao CSS rapidinho e adicionar algumas configurações em nosso cabeçalho.

.titulo {
    /* ... */
    position: relative;
    top: 0;
    z-index: 7;
    width: 100%;
}

No código fonte acima apenas informamos seu posicionamento inicial, um z-index maior que o conteúdo, e damos como referencia um position relative com um width de 100%. Sem o width de 100% ocorreria uma pequena não conformidade com nosso cabeçalho depois de terminarmos os JS.

A partir de agora só falta o if e o addEventListener, caso ainda tenha dúvida, por favor, assista ao vídeo ou adquira o ebook. A seguir você confere o código fonte final.

Link para adquirir o ebook.

Código fonte CSS final:

.parallax01 {
    background-image: url(imagem.jpg);
    height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    position: relative;
    z-index: 4;
}
.texto {
    font-size: 2em;
    text-align: center;
    padding: 1em;
    background-color: #E8E8E8;
    height: 100vh;
    z-index: 6;
    position: relative;
    box-shadow: 0 .1em .5em #E8E8E8;
}
.textoimg {
    left: 40%;
    top: 45%;
    width: 20%;
    text-align: center;
    background-color: #111;
    color: #fff;
    padding: .7em;
    font-size: 2em;
    letter-spacing: .3em;
    opacity: .9;

    position: fixed;
    z-index: 5;
}
.titulo {
    font-size: 2em;
    padding: 1em;
    text-align: center;
    background-color: deeppink;
    height: 10vh;
    position: relative;
    top: 0;
    z-index: 7;
    width: 100%;
}
footer {
    height: 15vh;
}
.textorodape {
    font-size: 2em;
    padding: 1em;
    text-align: center;
    background-color: #363636;
    letter-spacing: .3em;
    color: white;
    text-shadow: 0 0 0.1em #DCDCDC;
    position: fixed;
    bottom: 0;
    z-index: 3;
    width: 100%;
}

O código fonte HTML final tem apenas uma classe de diferença do HTML inicial, por isso, agora conferimos o código fonte JavaScript final.

Código fonte JavaScript final:

No próximo exercício rotacionamos qualquer elemento da página com base na rolagem da tela.

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