9º exercício: Rotacionando elemento com parallax (scroll)

Neste exercício nós rotacionamos um elemento HTML, isso utilizando a rolagem da tela como base, mas como assim?

Quando o usuário estiver descendo pela página o elemento ira girar em um sentido, e quando estiver subindo irá girar em outro sentido. Parece simples e, no final do exercício anterior informei que é simples, mas, é bem simples.

O código fonte inicial deste exercício é o código fonte final do exercício anterior, dica. Aumente o número de pixels que fazem com que o cabeçalho reapareça, ou, se preferir, pode excluir esse efeito. Eu irei exclui-lo. Então, o meu JS começa em branco, mas nada o impede de utilizar esses efeitos em conjunto.

Não se esqueça do padrão de nome dos arquivos e de linkar os novos arquivos CSS e JS em seu HTML, e alterar o título também.

Vídeo:

Neste exercício nós iremos rotacionar o texto da imagem.

Nosso JavaScript começará um pouco diferente, isso com relação aos outros arquivos JS deste ebook. Vamos começar criando duas variáveis, que serão responsáveis por rotacionar o que queremos rotacionar, cada uma será responsável por rotacionar em uma direção.

E agora sim criamos nossa função.

A primeira informação que inserimos na função é criar a variável responsável por verificar a quantidade de pixels que a página já rolou verticalmente.

Logo em seguida dizemos que uma das variáveis que, por uma questão de escolha criei fora da função, é igual ao número de pixels que a página já rolou verticalmente.

Antes da próxima linha JS, preciso informar que, vamos ver a quantidade de pixels que a página web já rolou. E para isso escolhi criar uma <p> em nosso HTML.

E com CSS vamos deixar ela fixa e sempre visível.

Lembra que antes eu citei que tínhamos que testar, pois bem, agora conseguimos ver. Voltando ao JS.

Na próxima linha do nosso JS vamos informar, através de um querySelector que, nesta <p> irá aparecer o número de pixels que a página web já rolou verticalmente.

Adicione um addEventListener no final da nossa função e teste em seu navegador.

Considero este exemplo bem legal. Na hora que estiver inserindo isso realmente em um projeto para ser colocado em prática, você não precisa deixar isso visível, mas neste exercício essa <p> será visível. Considero que é muito legal ver a variável que estamos trabalhando.

Voltando ao nosso exercício, precisamos pegar o valor que aparece, e para isso utilizamos a nossa segunda variável declarada fora da nossa função.

Algumas informações que já apresentei não precisariam, mas, achei interessante, pois fica mais fácil de entender com essas redundâncias. Agora está na hora do nosso if, e ele é bem simples. Se a variável gira for igual a variável rotate, determinado elemento HTML gira.

Teste em seu navegador e veja funcionando. Mas nesse momento vemos algo muito interessante. O elemento não volta certinho, a 0 (zero) de rotação ao voltarmos para o topo.

Para isso precisamos zerar uma dessas variáveis dentro do if.

E pasme, retirar o querySelector de dentro do if. Caso tenha ficado em dúvida, o código fonte fica assim.

Este código fonte está funcionando assim, mas como eu citei anteriormente, existem redundâncias. Está aí um ótimo exercício. Retire as redundâncias e boa sorte.

A seguir você confere o código fonte final (JavaScript), como foi adicionado apenas um elemento no HTML e a configuração do mesmo, não postarei o código fonte final do CSS e do HTML neste exercício, mas eles são extremamente simples, você não terá dificuldade com eles.

Caso queira ajuar o projeto você pode comprar o ebook ou um adesivo.

Código fonte JavaScript final:

Como já concluiu esse exercício deve saber que falta apenas mais um exercício para concluir esse ebook/curso aberto.