10º exercício: Imagens com movimentos sincronizados, ou não

Legal, se você chegou até aqui é porque já sabe um pouco mais que o básico de parallax. No inicio deste ebook informei o número de imagens que precisaríamos e, informei também que precisaríamos de uma imagem em escala 1:1.

Chegou o momento de usar esta imagem que você escolheu, pode ser uma foto sua com fundo transparente, o logotipo da sua escola, empresa, uma marca que você gosta, mas lembre-se, fundo transparente. A escala 1:1 nem é tão importante assim, mas o fundo da imagem tem que ser transparente.

Neste exercício nós utilizamos apenas uma imagem, e utilizando HTML e CSS nós multiplicamos ela na tela e em seguida criamos movimento. Este exercício é prático (lógico), mas sendo bem claro, são dois exemplos práticos.

A primeira parte desse exercício é deixar todas as imagens com o mesmo movimento, e na segunda parte damos movimento aleatório em apenas uma imagem.

O código fonte inicial deste exercício é o código fonte final do exercício 8 deste ebook, exceto o JavaScript, o arquivo JS inicialmente está em branco. Lembrando de alterar os títulos, e os links das tags script e link. Eu alterei o conteúdo do paragrafo, que agora são parágrafos, adicionei os 4 primeiros parágrafos deste capítulo. Nada de mais, você pode escrever o que quiser, mas, sem mais delongas, vamos ao exercício 10 de parallax.

Vídeo:

Vamos começar pelo HTML. Depois da <div> do parallax e antes do conteúdo crie oito novas <div>s.

Todas essas <div>s receberam a mesma classe.

Essa classe será responsável por movimentos sincronizados, mas precisamos criar outra classe, uma classe diferente para cada <div>. Se você for buscar informações, algumas pessoas utilizam id, uma vez que, essa nova classe será utilizada apenas uma vez. Neste caso, eu preferi criar novas classes pelos simples fato de se economizar caracteres. Se você tiver um motivo maior para utilizar IDs nesse caso, utilize.

Terminamos aqui o nosso HTML e agora vamos ao CSS. No CSS primeiramente nós vamos informar a configuração de todas as 8 <div>s, e a configuração principal neste exercício é que, em todas as <div>s aparecerá a mesma imagem, por isso a nossa primeira classe chamada imgs receberá em seu background a imagem que eu/você escolhemos, já vamos deixar ela fixa e especificar o seu tamanho.

.imgs {
    background: url("001.png") no-repeat;
    position: fixed;
    background-size: 10vh;
    width: 10vh;
    height: 10vh;
}

Achou estranho o height? Pois é, sem ele nossa imagem nem aparece, teste em seu navegador.

Eu citei que a imagem não iria aparecer e não apareceu, mas por outro motivo, o índice z. Além do z-index nós também precisamos posiciona-la, e neste exercício estou usando top. Irei usar a propriedade top mais vezes nesse exercício, e ela se enquadrou bem no que eu preciso simplificando a explicação, por isso estou utilizando top.

.imgs {
    background: url("001.png") no-repeat;
    position: fixed;
    z-index: 10;
    top: 0vh;
    background-size: 10vh;
    width: 10vh;
    height: 10vh;
}

Teste em seu navegador e veja que uma imagem apareceu no canto superior esquerdo. Legal, mas eu acabei de informar para você testar em seu navegador, espero que tenha testado.

Anteriormente neste ebook já havia citado bastante a unidade de medida vh, que é relacionada ao tamanho vertical da tela do usuário, 100vh é igual a tela do usuário, cada imagem tem 10vh e nós temos 8 imagens.

Cada <div> dessas que acabamos de criar tem uma segunda classe, e iremos utilizar essa segunda classe para posiciona-la. Coisa simples, vamos alterar apenas o valor do top de cada uma dessas classes. A primeira começa com 10vh e vai se somando 10vh para a próxima, e assim consecutivamente.

.img1 {
    top: 10vh;
}
.img2 {
    top: 20vh;
}
.img3 {
    top: 30vh;
}
.img4 {
    top: 40vh;
}
.img5 {
    top: 50vh;
}
.img6 {
    top: 60vh;
}
.img7 {
    top: 70vh;
}
.img8 {
    top: 80vh;
}

Teste em seu navegar e verá que agora conseguimos ver todas as nossas imagens. Que tal partimos para o JS agora, lembrando que voltaremos ao CSS em breve.

O primeiro efeito que vamos dar a todas, é fazer elas girarem, para isso precisamos de uma função.

function girando () {
}

Agora (dentro da função) precisamos criar a variável que verá o número de pixels que a página já foi rolada.

var desceSobe = window.scrollY;

Assim como no exercício anterior precisaremos de outra variável que sempre tenha o mesmo valor da variável do scrollY.

var rotate = desceSobe;

O legal de pegar o código fonte final do exercício 8 e não do exercício 9 é que estamos refazendo o exercício 9 agora (achei interessante fazer isso). Por isso precisamos voltar em nosso HTML e criar uma tag p e configura-la no CSS, para que possamos ver o número de pixels.

Como essa <p> será fixa, esse código fonte acima pode ser inserido em qualquer lugar do <body> do site. Informei que ela será fixa, então vamos fixa-la no CSS.

.escrever {
    position: fixed;
    margin-left: 1200px;
    top: 20%;
    background-color: aqua;
    z-index: 9;
    font-size: 2em;
}

Fizemos tudo isso para inserirmos as duas próximas linhas do JavaScript.

document.querySelector(".escrever").innerHTML = rotate;
var giraimg = document.querySelector('.escrever').value;

Essas duas linhas são responsáveis por mostrar para nós o número de pixels que a tela já rolou verticalmente. Pode não parecer, mas ver esse número é muito bom. Depois de inserir o addEventListener teste em seu navegador.

window.addEventListener('scroll', girando);

Se você reparou bem no penúltimo código fonte percebeu que já criamos a variável giraimg dentro da nossa função, diferente do nosso último exercício que criamos a variável que faz a mesma coisa fora da função.

Agora está na hora de zerarmos ela.

if (giraimg = rotate) {giraimg = 0;}

Se utilizássemos apenas querySelector para girar nossas imagens, giraria apenas a primeira, por isso utilizamos querySelectorAll, mas mesmo assim precisamos de um algo a mais para sincronizarmos um determinado movimento em diferentes elementos HTML. E para isso criamos uma nova variável.

var todas = document.querySelectorAll(".imgs");

Essa variável será responsável por gerenciar o movimento de todos elementos HTML que contenham uma determinada classe, nesse caso a classe imgs.

Este artigo não contém todo conteúdo do ebook/vídeo, caso queira ajuar o projeto você pode comprar o ebook ou um adesivo. O vídeo está completo, caso queira, pode assistir ao vídeo.

Link para adquirir o ebook.

Código fonte HTML final:

<!DOCTYPE hmtl>
<html>
    <head>
        <title>Parallax 10</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_parallax10.css">
        <script src="ebook_parallax10.js"></script>
        <link rel="stylesheet" href="reset.css">
    </head>
    <body>
        <h1 class="titulo">Exemplo 10 de parallax</h1>
        <div class="parallax01">
            <p class="textoimg">Parallax</p>
        </div>
        <div class="imgs img1"></div>
        <div class="imgs img2"></div>
        <div class="imgs img3"></div>
        <div class="imgs img4"></div>
        <div class="imgs img5"></div>
        <div class="imgs img6"></div>
        <div class="imgs img7"></div>
        <div class="imgs img8"></div>
        <div class="texto">
            <p>Legal, se você chegou até aqui é porque já sabe um pouco mais que o básico de parallax. No inicio deste ebook informei o número de imagens que precisaríamos e, informei também que precisaríamos de uma imagem em escala 1:1.</p>
            <br>
            <p>Chegou o momento de usar esta imagem que você escolheu, pode ser uma foto sua com fundo transparente, o logotipo da sua escola, empresa, uma marca que você gosta, mas lembre-se, fundo transparente. A escala 1:1 nem é tão importante assim, mas o fundo da imagem tem que ser transparente.</p>
            <br>
            <p>Neste exercício nós utilizamos apenas uma imagem, e utilizando HTML e CSS nós multiplicamos ela na tela e em seguida criamos movimento. Este exercício é prático (lógico), mas sendo bem claro, são dois exemplos práticos.</p>
            <br>
            <p>A primeira parte desse exercício é deixar todas as imagens com o mesmo movimento, e na segunda parte damos movimento aleatório em apenas uma imagem.</p>
        </div>
        <p class="escrever"></p>
        <footer>
            <div>
                <p class="textorodape">RODAPÉ</p>
            </div>
        </footer>
    </body>
</html>

Código fonte CSS final:

.escrever {
    position: fixed;
    margin-left: 1200px;
    top: 20%;
    background-color: aqua;
    z-index: 9;
    font-size: 2em;
}
.imgs {
    background: url("001.png") no-repeat;
    position: fixed;
    background-size: 10vh;
    width: 10vh;
    height: 10vh;
    z-index: 10;
    top: 0vh;
}
.img1 {
    top: 10vh;
}
.img2 {
    top: 20vh;
    float: right;
    right: 0;
}
.img3 {
    top: 30vh;
    left: 40%;
}
.img4 {
    top: 40vh;
}
.img5 {
    top: 50vh;
}
.img6 {
    top: 60vh;
}
.img7 {
    top: 70vh;
}
.img8 {
    top: 80vh;
    left: 50%;
}
.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%;
}

Código fonte JavaScript final:

Repare dentro do if da terceira imagem, existe um detalhe que deixa muito mais fácil um dos exercícios desse ebook. Insira este detalhe neste exercício, vale a pena. Se você fez esse mini curso inteiro, eu só tenho a agradecer, muito obrigado, se puder ajudar compartilhando, desde já agradeço. Muito obrigado mesmo por ter feito este mini curso, em breve teremos mais mini cursos.

Pode ir na aba códigos e dar uma conferida também em nosso curso de JS, também estou aprendendo JS.

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