O que é parallax?

Para a W3C, parallax é uma tendência, onde o conteúdo do fundo é movido em uma velocidade diferente do conteúdo do primeiro plano.

Antes de darmos continuidade preciso explicar o que é W3C. W3C é o consórcio www, o Consórcio World Wide Web (W3C) é um consórcio internacional, a W3C é a responsável por desenvolver os padrões da WEB.

Legal, sabemos por cima o que é parallax e o que é W3C, mas se você caiu de paraquedas neste mini artigo, saiba que ele só existe pois temos um curso de parallax. Este é o artigo de presentação deste mini curso.

Mas o que vemos neste mini curso?

Ementa

Este curso de parallax é dividido em exercícios, ao total são dez exercícios onde começamos do absoluto zero conhecimento de parallax e vamos aprimorando, exercício por exercício.

O que fazemos em cada exercício?

1º exercício: Conteúdo vs background

Uma imagem cobrindo toda a tela do usuário, não importa o dispositivo (desktop, smartphone ou tablet), o conteúdo sobrepõem a imagem, e quando termina o conteúdo, a imagem não está mais visível.

2º exercício: Múltiplas imagens no background

Mais de uma imagem no background, cada imagem aparece de cada vez e sempre fixas, neste exemplo os conteúdos aparecem entre a transição das imagens.

3º exercício: Textos nas imagens

Textos são adicionados dentro das imagens, o mais simples possível, ainda apenas utilizando HTML5 e CSS3.

4º exercício: Texto fixo em imagem

Neste exercício é utilizado apenas uma imagem de background e nela é inserido um texto fixo. Lembrando que no exercício anterior os textos das imagens se moviam, mesmo as imagens sendo fixas.

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

Primeiro exercício utilizando JavaScript. A única diferença do exercício 3 com este é o fato dos textos das imagens estarem fixos, isso, enquanto as imagens estão fixas e o conteúdo que aparece entre a transição das imagens sendo a única informação que se move na tela.

6º exercício: Movimento diferenciado nos textos das imagens

A base do parallax é velocidade diferenciada, neste exercícios temos três velocidades, imagens fixas (velocidade zero), conteúdo em velocidade normal e textos nas imagens na velocidade que você quiser.

7º exercício: Rodapé aparece por trás

Eu gosto muito deste efeito, e neste exercício acabamos de entrar em profundidade (de vez), em exercícios anteriores já falamos por cima de profundidade.

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

Depois de descer um pouco pelo site, as vezes pode ser interessante o cabeçalho reaparecer. Este exercício é funcional, mas você pode complementa-lo com o que já vimos em exercícios anteriores.

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

Neste penúltimo exercício achei legal rotacionar o texto que está dentro de uma das imagens de background, você pode fazer isso com qualquer elemento HTML.

10 exercício: Múltiplas imagens com movimentos sincronizados, ou não

Até agora aviamos trabalhado com uma imagem de cada vez, agora inserimos uma imagem sobre o background, "multiplicamos" ela e damos movimento a todas, lembrando que podem ser utilizadas imagens diferentes.

Lista de e-mail do Em Busca do Código

Pré-requisitos

Saber um pouco HTML, CSS e JavaScript. Você não precisa ser um expert, mesmo porque eu também não sou. Para este mini curso de parallax eu busquei o que eu colocaria em um site. Alem de um editor de código fonte e um navegador.

HTML

É indicado você saber fazer um site com HTML, sem utilizar WordPress, Bootstrap ou sem outro CMS ou framework.

CSS

A parte do CSS eu até explico, deixando assim o CSS como um requisito diferenciado. É bom conhecer CSS.

JavaScript

Os pré requisitos de JS nada mais é que função, if, querySelector, variáveis. Se você sabe trabalhar com funções e querySelector, vamos ao exercício número um.

Como editor de código fonte eu utilizo o Brackets e como navegador o Mozilla Firefox, ambos atualizados, mas você pode utilizar o editor, IDE ou navegador de sua preferência.

Conteúdo

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