6º ex: Movimento diferenciado nos textos das imagens

Parabéns, você passou da metade deste ebook. O código fonte inicial deste exercício é o código fonte final do exercício anterior, cuidado com o padrão de nomes de arquivos, também não se esquecendo de alterar o endereço da tag script e <link>.

Como o título já diz iremos adicionar um movimento diferenciado nos textos das imagens, isso parece meio trivial depois desses seis exercícios anteriores mas não é. Alias, alterei o conteúdo dos textos de conteúdo, caso queira alterar o seu também fique a vontade.

No quarto exercício nós fixamos o texto que fica dentro da imagem, a diferença é que utilizamos apenas um texto.

No quinto exercício nós voltamos os textos do exemplo 3, só que, agora todos estão fixos. Primeiro exemplo com JavaScript.

No sexto exercício nós criamos movimento nos textos das imagens, deixando-os com uma velocidade diferenciada.

Vídeo:

Vamos começar pelo JS, na primeira função, função esta que altera o CSS do primeiro texto de imagem. Utilizando querySelector iremos informar que o margin-top diminuirá um pixel para cada 2 pixels que a página descer. Atenção nesta parte.

A primeira função faz o elemento desaparecer a partir de um determinado número de pixels que a página for rolada para baixo, então pode acontecer que, antes do texto desaparecer para cima da página ele desapareça, mas calma, é só alterar esse número de pixels que, faz esse elemento HTML desaparecer.

O código fonte a seguir faz o que acabei de falar, insira ele no lugar certo e teste em seu navegador.

let velMov = document.querySelector('.textoimg1').style.marginTop = -(qualquer/2)+"px";

Se está em dúvida qual é o lugar certo assista ao vídeo.

Repare que utilizei uma variável local, preferi utilizar uma variável local para que eu possa utilizar o mesmo nome de variável em todas as funções.

Mas daí você deve se perguntar. Mas é só eu inserir essa linha em todas as funções que estará tudo funcionando corretamente?

Desculpe-me, a resposta é não. Podemos sim utilizar a mesma linha de código fonte, mas, essa linha de código fonte faz o texto já se mover, existe mais de uma caminho para arrumar isso, e eu escolhi o que não altera tanto o JS, em outras palavras, escolhi o caminho que não precise criar novas linhas em nosso código fonte JS.

Mas antes de entrar em nossas outras funções, vamos alterar o número de pixels que faz nosso elemento sumir.

/* ... */
if (qualquer <= 750) {
document.querySelector('.textoimg1').style.display = 'block';
let velMov = document.querySelector('.textoimg1').style.marginTop = -(qualquer/2)+"px";
}else{
/* ... */

Não é querendo ser chato mas, com o código fonte que já passei você consegue terminar esse exercício, e, eu quero que você assista ao vídeo, então eu não vou explicar o restante aqui no site.

Para ver o restante deste exercício, assista ao vídeo ou adquira o ebook.

Link para adquirir o ebook.

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;
}
.textoimg2 {
    top: 80%;
}

.textoimg3 {
     top: 120%;
}

Código fonte JavaScript final:

No código HTML não fizemos nenhuma alteração, a não ser aquela do conteúdo dos textos do conteúdo, que por algum acaso são opcionais. Eu acho legal alterar os textos de conteúdo. Se quiser, sugiro um exercício extra no vídeo.

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