Desmistificando a paralaxe: aprenda a criar páginas web interativas com Javascript

1. Por que você deveria fazer este curso: Parallax é um efeito 3D incrível que você pode ver em toneladas de sites, jogos e aplicativos. É um prazer de interação e atrai pessoas como loucas. Nesta classe, vou mostrar-lhe como colocar código sua própria experiência de paralaxe usando JavaScript. Pode parecer vodu e magia negra, mas na verdade é bastante simples e extremamente gratificante. Meu nome é Rich Armstrong e tenho feito as coisas se moverem com código desde 2006. Nesta classe, vamos passo a passo através de paralaxe consagrado experimentado respondendo ao movimento do mouse e documentos eventos de rolagem. A aula é repleta de vídeos teóricos e práticos e, no final, você será capaz de surpreender seus amigos e trazer vida e magia para seus projetos web. Eu crio a classe para alguém que conhece o caminho, HTML, CSS e JavaScript. Muito ansioso para criar algumas interações de paralaxe. Vejo você no próximo vídeo. 2. O que é a paralaxe: Então, qual é exatamente o efeito de paralaxe? Se você já ouviu este termo antes, o que pode vir à mente é um site que faz com que as coisas se movam a diferentes velocidades à medida que você rola. Este é um bom ponto de partida. O efeito de paralaxe é realmente uma ilusão de profundidade que ocorre quando dois ou mais objetos se movem em velocidades diferentes, mas relacionadas, fazendo-nos acreditar que há uma distância entre eles, que há profundidade. Um dicionário define paralaxe como o deslocamento aparente de um objeto observado devido à mudança na posição do observador. Acrescentei a ênfase. Na vida real, quando nos movemos, tudo ao nosso redor parece estar se movendo e tudo em velocidades diferentes. Pense em quando você está olhando para fora de uma janela e um carro ou um trem, ou até mesmo mover a cabeça ou andar por aí agora, você pode ver como as coisas parecem estar se movendo ao seu redor? Você verá que as coisas que estão mais distantes parecem estar se movendo a uma velocidade mais lenta e as coisas que estão mais próximas. Claro que somos nós que estamos nos movendo. Isso pode parecer bastante óbvio para você. A questão então é, como podemos replicar isso em um mundo digital quando nossas telas são realmente planas sem qualquer profundidade? Bem, temos que criar uma ilusão de profundidade. Temos que fazer as pessoas acreditarem que há profundidade onde não há nenhuma. Podemos ser ilusionistas e mágicos. Isto é muito fixe, certo? Para criar a ilusão de paralaxe de uma forma simples. Podemos fazer com que as coisas se movam a velocidades diferentes. Isto é o que a animação oferece, mas não tem nada a ver com o observador. Não é controlado pelo usuário. Não é interativo. Onde o efeito Parallax realmente ganha vida é quando os elementos se movem com base nos movimentos de um usuário, como quando eles rolam ou quando eles movem o mouse ou quando eles inclinam o telefone, e é nisso que nós vamos estar entrando em nesta classe. 3. Como este curso vai funcionar: Há duas partes nesta classe, na verdade. O lado paralaxe das coisas e o lado de codificação das coisas. Vamos esmagar esses dois mundos juntos. Você pode pegar essa classe e aplicá-la a qualquer linguagem de codificação que você gosta, mas nós estaremos fazendo isso em HTML, CSS e JavaScript. Por quê? Porque é super acessível, é super divertido, e você pode fazer algumas coisas muito rapidamente com ele. Isso significa que vamos cobrir muitos tópicos HTML, CSS e JavaScript e como eles se relacionam uns com os outros, que é fundamental para o design de interação na web. Nesta aula, há três coisas principais que vamos abordar. O primeiro é o que eu gosto de chamar, entradas. Vamos aprender a rastrear o movimento do usuário e usá-lo para informar como nossos objetos em nossa tela se movem. O segundo é o que eu gosto de chamar, saídas. É aqui que aprenderemos a manipular como nossos objetos se movem com base em nossas entradas. A terceira é que vamos aprender sobre paralaxe, o que já fizemos. Mas também vamos aprender a usar as entradas e saídas para criar uma experiência de paralaxe interativa. O que é realmente importante é que você aprenda a fazer essas experiências de paralaxe baseadas na teoria e não apenas copiando código. Estaremos programando tudo nesta aula e se você está falando sério sobre aprender melhor, sugiro que escreva seu próprio código enquanto vai. Aprendo melhor acompanhando, pausando o vídeo quando estou tentando lidar com o que eles acabaram de dizer ou quando eu quero entender algo. Escreva seu próprio código, experimente coisas, quebre coisas e até experimente coisas antes de eu chegar a eles. Grite se não entender nada ou se tiver alguma dúvida. Vou usar um serviço online chamado CodePen para fazer toda a minha codificação nesta classe. Eu gosto de ensinar com ele porque podemos ver o HTML, o CSS e o JavaScript tudo em um só lugar e ele recarrega a visualização enquanto eu digito. Eu recomendo que você usá-lo também. É gratuito, é fácil criar novas canetas, desviar-se de uma existente usando a funcionalidade de garfo e, como já está online, é muito fácil de compartilhar. que significa que se você tiver algum problema, você pode apenas compartilhar o URL comigo e também significa que você pode compartilhar seu trabalho incrível com outros alunos, com sua mãe e com qualquer outra pessoa. A única coisa que você não será capaz de fazer com a versão gratuita do CodePen é fazer upload de imagens, mas isso pode ser facilmente superado e eu vou te mostrar como fazê-lo mais tarde na aula. Se você quiser escrever seu código em seu computador, usando seu editor de código, isso é totalmente legal. Eu recomendo usar Sublime Text, é meus favoritos ou Visual Studio Code, é feito pela Microsoft. Eu também usaria o GitHub para fazer backup do seu código e do GitHub Pages para compartilhamento. Isso é de graça. Se você tem seu próprio site, você pode carregá-lo lá também. Então vamos indo, vamos nos divertir muito. 4. Entradas e saídas: O que são entradas e saídas? Eu gostaria de ver entradas como coisas que podem ser rastreadas e respondidas. Então eu gosto de ver uma saída como algo que podemos controlar. Em um mundo de codificação, ajuda quando uma entrada tem um intervalo. Isso significa que podemos rastreá-lo muito mais fácil e, em seguida, responder de acordo. Pense em um mostrador de forno. Tem um valor mínimo e máximo, ou um valor inicial e um valor final. Estes valores correspondem a uma faixa de temperatura. Com o código, podemos alterar as propriedades do objeto com base em uma entrada. Aqueles que são os mais divertidos e os mais realistas, são aqueles sobre os quais o usuário tem mais controle. Nesta classe, vamos estar trabalhando com a mouse do usuário e documentos posição de rolagem, como nossas entradas de usuário. Então vamos mudar a posição do objeto com base nesta entrada. 5. Capturando o movimento do mouse: Vamos começar. O que vamos fazer neste vídeo é acabar com dois valores de entrada que podemos usar para conectar nossos valores de saída. Eles serão valores de fração transmitindo a posição X e Y do mouse. Estamos usando valores de fração porque isso facilitará a conexão de nossos valores de saída futuros. Para obter um valor de fração, precisamos obter a posição atual do mouse e compará-lo com sua posição máxima. Vou trabalhar com a posição X por enquanto, mas o mesmo se aplica com a posição Y. A posição máxima neste caso será a largura das janelas. Tudo o que precisamos fazer é dividir a posição atual do mouse pela posição máxima. É um cálculo bastante fácil. Mas isso pressupõe que queremos rastrear o mouse desde o início da janela até o final da janela. E se você quiser rastrear a posição do mouse de 100 pixels da esquerda para 200 pixels da direita. Como calculamos o valor da fração então? Vamos anotar alguns valores. Queremos que o valor da fração seja zero quando a posição do mouse estiver em 100 pixels e o valor da fração seja um quando o mouse estiver na posição é que a largura das janelas -200 pixels. Precisamos calcular o valor entre o final e os valores iniciais. Podemos fazer isso subtraindo o valor inicial do valor final, que chamaremos de nosso intervalo de entrada e, em seguida, quando obtivermos nossa posição atual do mouse, podemos subtrair o valor inicial dele para negar o valor das posições iniciais. Isso significa que se a posição do nosso mouse for de 100 pixels, ele será realmente zero em nosso cálculo. Agora, comparamos esse valor com o nosso intervalo para obter um valor preciso de fração. Usando este cálculo, sempre obteremos o valor correto da fração. O cálculo agora é ligeiramente diferente do anterior, mas também podemos usar esse cálculo se quisermos rastrear a partir da esquerda da janela todo o caminho para a direita. Agora você pode estar perguntando o que acontece se a posição do mouse estiver entre zero e 100 pixels? Que tipo de valor de fração teremos então? Vamos obter valores negativos e se a posição do mouse estiver além do valor final das entradas, então o valor da fração que obteremos será maior do que um. Esses valores serão realmente importantes mais tarde, mas por enquanto, podemos restringir os valores de fração a valores que variam entre zero e um com um pouco de código. Se precisar de um momento para digerir estes cálculos, sugiro que pare o vídeo aqui, pegue uma caneta e papel e resolva isso sozinho. Faz um mundo de diferença quando você realmente entende. Essa é a teoria da entrada. Agora, vamos implementá-lo em código. Nós não temos nenhum HTML até agora, e isso é ótimo. Vamos escrever um pouco no final do vídeo e eu tenho um pouco de CSS que eu apliquei ao corpo. Tem uma cor de fundo e tem uma margem de zero. Nós não vamos escrever muito CSS também, então nós vamos fechar isso por enquanto. Vamos começar a escrever um pouco de JavaScript. Eu vou criar uma variável chamada entrada, onde eu vou configurar todas as minhas informações de entrada e isso vai ser um objeto e dentro deste objeto nós vamos dizer que há um objeto MouseX e objeto MouseY. Isso conterá todas as informações para MouseX e para MouseY. Eu só vou trabalhar com MouseX principalmente e, em seguida, no final do vídeo, eu vou atualizar tudo para trabalhar com MouseY também. Temos a nossa posição inicial, vamos apenas definir isto em zero por enquanto. Temos nossa posição final, que será a largura da tela ou a largura da janela. Então eu vou dizer window.innerwidth e então eu vou definir meu valor atual em zero inicialmente e, em seguida, eu também preciso colocar no meu intervalo, e eu preciso colocar no meu valor de fração. Vou fazer isso fora desta configuração inicial para que também possamos atualizá-lo mais tarde. Input.mousex.range = input.mousex.end - input.mousex.start. O intervalo do mouseX é igual ao final do mouseX menos o início do mouseX, que neste caso será literalmente apenas o valor final. Isso se parece muito com o cálculo inicial, mas atualizaremos a posição inicial e final, o que tornará o intervalo muito mais útil. Então podemos calcular nosso valor de fração, mas nosso valor de fração não será muito útil a menos que possamos realmente calcular a posição atual X e Y do nosso mouse. Como fazemos isso em JavaScript? Bem, temos essas coisas chamadas ouvintes de eventos e podemos adicioná-las a um monte de objetos diferentes. Um dos objetos que podemos adicionar um ouvinte de evento é a janela. Eu vou dizer window.Addevent ouvinte e esta função aceita um monte de argumentos ou informações diferentes que podemos passar para ele. A primeira coisa que podemos passar para ele é o tipo de eventos que queremos ouvir. Eu vou ouvir os eventos de movimento do mouse e, em seguida, o que eu quero passar aqui é o que fazer quando os eventos de movimento do mouse ocorrem e esta é uma função. Quando os eventos de movimento do mouse ocorrerem, execute o código dentro desta função e, por enquanto, vamos apenas escrever console.log e vamos apenas certificar-nos de que soletramos tudo corretamente e vamos dizer, “Trabalhando”. Em seguida, abrimos nosso console, que é o console CodePen, e movemos nosso mouse e vemos que o console tem um monte de mensagens de trabalho chegando através. Isso significa que está funcionando, o que é fantástico. Agora, eu não quero parar este pedaço de código aqui porque esta é uma função anônima, isso significa que não podemos acessá-lo fora dos eventos de movimento do mouse. Eu poderia cortar isso e eu vou armazenar esse pedaço de código dentro de uma variável chamada manípulo do mouse. Você também pode armazená-lo dentro de uma função nomeada. Gosto de guardar coisas dentro de variáveis. Vou colá-lo lá. Isso significa que eu posso copiar e colar isso e isso significa que quando o mouse mover eventos ocorrem, que acontece o tempo todo ele vai chamar esta variável que então executa este pedaço de código. Fantástico. Se limparmos o console e movermos o mouse ao redor apenas para verificar se ele está de fato funcionando. Agora, a próxima coisa que precisamos alcançar como precisamos obter o valor X do mouse ou o valor Y do mouse. Como é que fazemos isto? Bem, em JavaScript, obtemos este objeto de evento que é passado para a nossa função. Pode chamar isso do que quiser. Algumas pessoas vão para E, algumas pessoas vão para EV. Se você realmente quisesse, poderia chamá-lo de Bob. Gosto de eventos porque descreveu exatamente o que é. Em vez de registrar, trabalhar, vou registrar meu evento e, em seguida, meu objeto de eventos. A razão pela qual eu tenho evento na string é que eu sei exatamente o que eu estou registrando a qualquer momento. Se você tem um monte de logs de console em todo o seu código e você não tem um indicador do que ele é, ele pode ficar realmente confuso. Permite limpar o nosso console e mover o mouse ao redor. CodePen dirá que o log foi ignorado. Ele dirá que é muito grande para o console deles e talvez seja necessário usar o console do navegador. console do CodePen não é tão poderoso. Então, teremos que usar o console do Chrome. Então vamos para View Developer e, em seguida, vamos para o console JavaScript e vamos apenas mover nosso console um pouco para baixo para que possamos mover nosso mouse por aqui. Você verá que, ao rolar para baixo no console do Chrome, há muitos outros eventos chegando. Vamos ver o que esse objeto de evento é. É um monte de chaves e valores aqui. Vamos apenas fazer isso um pouco mais alto, assim e nós temos LayerX, Layery, nós temos cliente X, cliente X. Nós também temos offset X offset Y, PageX, PageY. Todos estes parecem realmente bons X e Y. Nós temos um monte de outras informações também mas eu estou mais interessado nestes valores X e Y. O que eu gostaria que você fizesse é escolher um desses e ver se funciona. Eu vou para o cliente X e cliente Y, ou talvez PageX e PageY. Todos parecem muito parecidos no momento. Vamos fechar isso e vamos registrar event.ClientsX e vamos ter certeza que ele vai lá para. Limpe nosso console aqui e mova-se e estamos recebendo alguns valores que parecem realmente promissores. Então, se você for todo o caminho para a esquerda, devemos esperar um zero, que é e se formos todo o caminho para a direita, devemos esperar um número bastante grande, 572. Agora, podemos verificar se este é realmente o valor colocando em window.innerwidth que é indefinido e isso é porque nós soletramos largura com um grande I, 573. Isso é um pouco suspeito, não acha? Bem, por enquanto vamos trabalhar com isso, é muito bom. Agora, temos o nosso ClientX, o que significa que podemos realmente ir e atualizar o nosso Input.mousex.Current que é igual ao nosso Event.ClientX. Isso significa que também podemos atualizar nosso valor de fração. Então input.mousex.fraction é igual a. Você pode se lembrar qual foi o nosso cálculo para isso? Bem, é a nossa input.mousex.current menos o valor inicial. Vamos colocar isto dentro de um aparelho para que funcione primeiro. Vamos então dividir isso pela input.mousex.range. Este é um pedaço de código bastante longo. Isso é só porque estamos sendo excessivamente detalhados sobre isso, estamos dizendo input.mousex.current. Isso é apenas para que vocês saibam exatamente o que está acontecendo com todos esses valores a qualquer momento. Temos o nosso valor actual, temos o nosso valor de fracção. Bem, vamos ver se isso está realmente funcionando. Vamos sair do nosso valor de fração e input.mousex.fraction. Vamos fazer isso um pouco maior. Vamos da esquerda para a direita. É estranho que vá para 1.36. O que está acontecendo aqui? Bem, você deve ter visto que eu redimensionei minha tela um pouco. Eu sempre começaria no zero. Mas dependendo da largura da minha tela, pode chegar a um valor muito maior do que um. O que realmente está acontecendo aqui? Nós vamos, verificar isso. Estamos armazenando nosso valor final dentro de nosso objeto, inicialmente. Ele não está atualizando quando a tela ou a janela é redimensionada. Precisamos atualizar esse valor para que possamos atualizar alguns outros valores para que ele possa nos dar um valor preciso de fração. Como é que fazemos isto? Bem, este pedaço de código aqui. Vou copiar e colar. Em vez de ouvir um evento de mousemove, vou ouvir um evento de redimensionamento. Em seguida, em vez de chamar a função HandleMouseMove, eu vou chamar a função HandleSize. Então var handleResize e isso vai armazenar uma função. Dentro desta função vamos atualizar nosso código input.mousex.end igual a, e ele vai ser exatamente o mesmo que o nosso valor inicial. Lá vamos nós. Como nosso valor final é atualizado, também precisamos atualizar nosso valor de intervalo porque ele faz uso do valor final. Isso deve lidar com isso. Vamos ver se funciona. Para limpar nosso console, vá da esquerda para a direita. Quase chega a um. 0.998, é quase um. Vamos trabalhar com isso. Se redimensionarmos nosso navegador 0-99, as coisas estão definitivamente funcionando. O que precisamos fazer agora é verificar se o nosso valor inicial está em 100 e algum outro valor, isso realmente também funciona. Vamos começar com o nosso valor inicial e depois vamos chegar ao nosso valor final. O que eu vou fazer é, dentro do nosso HTML, eu vou criar uma div com uma classe de bloco. Estou usando uma coisa chamada Emmet que funciona em CodePen, Sublime Text e Visual Studio Code. Uma vez que você tem essa abreviatura, basta pressionar “Tab” e ela expande para algum código para você. Tenho uma turma inteira nisto, se quiseres verificar. Dentro do nosso CSS, onde Emmet também trabalha, eu posso ir. block. Vou dar a isso uma cor de fundo e, em seguida, ir para uma cor que CodePen tem. Vamos para esta cor verde. Vamos copiá-lo para a área de transferência, vamos colá-lo. Muito obrigado. Vou definir uma largura de 100 pixels e, em seguida, definir uma altura de 100 altura do visualizador. Agora temos um ótimo bar verde. Isso vai ser 100 pixels. Quando limparmos isso, saberemos que quando chegarmos a 100 pixels, que é sobre lá, deve ser zero, que parece ser. Agora precisamos definir nosso fim para o InnerWidth menos 200. Não se esqueça que também podemos copiar isso e colá-lo abaixo onde atualizamos nosso valor final. Bastante importante. Vamos apenas copiar e colar este bloco pedaço de código, vamos chamá-lo de block2. Dentro do nosso CSS, vamos fazer praticamente a mesma coisa para o block2. Daremos a ele uma largura de 200 pixels desta vez, uma altura de 100 altura do visualizador. Vamos dizer posição absoluta, e vamos dizer certo, dar-lhe um valor de zero e um valor superior de zero também. Quer dizer que está do lado direito. Se formos até aqui, deve ser zero. Se formos para aqui, deve ser um, o que é. Se passarmos por cima de um, será um valor sobre um. Se formos abaixo de zero, será um valor abaixo de zero. Lá vamos nós. Isto é exatamente o que queríamos deste vídeo. Vou mostrar-te mais duas coisas. A primeira coisa é que se não queremos que nossos valores sejam abaixo de zero e acima de um, o que podemos fazer aqui é dizer. Se Input.mousex.fraction é maior do que um, então vamos apenas tampá-lo em um. Se o nosso valor for menor que zero, nós também vamos apenas limitá-lo a zero. Assim como. Então vamos fazer o logout do nosso valor de fração depois de termos acertado essas duas coisas. Quando vamos da esquerda para a direita, é zero, zero, zero, zero, zero, zero. Então começa a funcionar, chega a um, e então fica em um. Essa é uma maneira muito fácil de garantir que nossos valores variam de 0 a 1. Mas esses valores negativos e valores superiores a um serão muito importantes em um vídeo posterior. Agora, a próxima coisa é que nós temos nosso valor Y para trabalhar fora. O que eu vou fazer aqui é, eu vou dizer para pausar o vídeo e você tentar descobrir seus valores Y. Divirta-se, experimente. Vou entrar no meu valor Y em apenas alguns segundos. Vamos fazer o nosso valor Y. Vou mudar meu começo para zero novamente e meu fim para InnerWidth. Eu vou descer aqui e fazer a mesma coisa. Então eu vou tirar meus dois quarteirões porque eu realmente não os quero. Eu vou para o meu HTML e tirar esses dois blocos também. Agora, vamos para os nossos valores y. Eu só posso copiar e colar um monte de coisas diferentes aqui. Em vez de ir para window.InnerWidth, eu vou para window.InnerHeight. Então eu vou configurar meu alcance MouseY, meu fim MouseY, e meu começo MouseY. Quando eu disser para lidar com o rato, vou copiar e colar isto. Vamos copiar e colar o mouse em todos esses lugares diferentes. É tudo basicamente o mesmo cálculo, o mesmo algoritmo, estamos apenas mudando os valores. Em vez do evento de ClientX, eu vou para o ClientY. Não temos de usar isto se não quisermos. Eu só vou comentá-los. Vou pressionar “Command” ou “Control ” e “Slash”. Vou comentar. Podemos ir para registrar a fração X e a fração Y, e vamos mudar isso para MouseY. Em seguida, quando lidarmos com o nosso redimensionamento, vamos apenas copiar e colar isso novamente, e, em seguida, copiar e colar o nosso MouseY e alterar o nosso InnerWidth para InnerHeight. Isso deve funcionar tecnicamente, então vamos verificar se funciona. Vamos percorrer todo o caminho no canto superior esquerdo, deve ser muito perto de 0,0. Em seguida, vamos todo o caminho para a direita que deve ser muito perto de um para o valor-x, e então vamos verificar se o nosso y funciona. Eu vou até o topo. Lá vamos nós, zero até o fundo, o que quase nos dá um. Mas por causa de algumas razões com este navegador, ele não nos dá um valor de um. Lá vamos nós, temos valores de fração para a posição do mouse X e Y. Isso significa que podemos conectar alguns valores de saída no próximo vídeo. Fantástico. 6. Conectando o movimento do mouse a uma saída: Neste vídeo, conectaremos nossos valores de fração de entrada calculados no vídeo anterior com alguns valores de saída. O que significa que podemos começar a fazer as coisas se moverem com base na posição do rato, o que é super fixe. Nossa configuração de saída será bastante semelhante à nossa configuração de entrada. Haverá um valor inicial e final, bem como um intervalo. Para calcular o valor de saída atual, vamos pegar o valor de fração de nossa entrada e multiplicá-lo pela faixa de saída antes de adicioná-lo ao valor de estoque. Ou podemos pegar esse valor e subtraí-lo do valor final dependendo do que você deseja fazer com ele. Agora, essa é a teoria, vamos entrar em algum código. Vamos nos divertir um pouco agora e fazer alguns olhos do Googley se moverem quando nosso mouse se move. Vai ser ótimo. Dentro do meu HTML, vou criar dois olhos. Então vamos para o olho e para a pupila interior, assim e depois dentro do meu CSS, eu vou para.eye. Vou definir uma cor de fundo de branco e, em seguida, uma largura de, digamos , 200 pixels, uma altura de 200 pixels, um raio de borda de 50% porque queremos que seja redondo. Sim. Em seguida, uma pausa A para absoluto, e então vamos dizer uma esquerda de 50 por cento. Bem, obrigado. Vamos guardar isso. À esquerda de 50 por cento e eles vamos dizer uma margem esquerda de digamos, menos 100 pixels, apenas isso é bem no meio e então podemos dizer o mesmo para o topo de 50 por cento e uma margem superior de menos 100 pixels também está lá bem no meio. Vamos então colocar .pupil aqui, e vamos dizer VGC é preto, vamos dizer largura de 50 pixels, uma altura de 50 pixels, raio de fronteira de 50%, um valor superior de 50%. Podemos simplesmente copiar tudo isso e, em vez de 100 pixels, diríamos apenas 25 pixels. Não parece certo. Agora, não parece muito certo. Faz isso? Porque não colocamos uma posição absoluta. Lá vamos nós. Temos um globo ocular, temos uma pupila, temos um olho. Agora quero outro olho. Vamos pegar outro olho. Talvez chamemos este olho 1 e este olho 2. Ótimo. Eye 1 terá, digamos, uma margem esquerda de menos 200 pixels.eye 2. Não tenho três olhos. Olho 2, uma margem esquerda, talvez você possa dizer 0. Podemos arranjar um pouco mais de espaço. Então vamos adicionar 25 pixels a isso e 25 pixels a isso. Lá vamos nós. Temos alguns olhos. Agora, ao mover o mouse da esquerda para a direita, quero que os globos oculares das pupilas sigam o mouse, ou talvez olhem para outra direção para onde o mouse está indo. O mesmo com a minha posição. Fizemos nosso HTML e CSS. Agora vamos entrar em alguns JavaScripts. Vamos fazer esses painéis um pouco maiores. Por aqui, vamos criar nossa configuração de saída. Isso parecerá muito familiar. Nós vamos para uma configuração x e uma y, e x e y porque não é realmente o mouse x e mouse y, é na verdade a exposição x ou uma posição x traduzido e a posição y. Vamos para um valor inicial, e eu vou dizer menos 100 pixels, exceto sem o px e o final, digamos, 100, a corrente será 0 e, em seguida, um intervalo, poderíamos apenas colocar o nosso intervalo aqui de 200, mas nós irá criar dinamicamente que depois de criarmos o objeto. Eu só vou trabalhar com a posição x por enquanto, e eu vou fazer você fazer a posição y mais tarde antes eu terminar e mostrar exatamente como eu faria a posição y. Então o que está depois disso é o nosso output.x.range e este é nosso output.x.end menos output.x.start. Fantástico. Eu só vou cortar e colar os valores de entrada onde os codificadores de entrada e a saída onde os codificadores de saída. Isso faz um pouco mais de sentido. Também podemos começar a contar bits do codificador só para sabermos o que está acontecendo. Fantástico. Então aqui embaixo, provavelmente não precisamos mais disso a menos que você esteja indo para fazer uso de um intervalo de entrada onde o início não é 0 e o fim não é a janela em uma largura. Então podemos cortar isso e então podemos fazer mais alguns comentários aqui. Então podemos fazer mouse x, podemos dizer mouse y, ou podemos simplesmente chamar esse mouse de entrada x para entrada y mouse. Então nós temos alguns registros de console acontecendo aqui, que eu vou apenas comentar por agora. Agora temos nossas entradas acontecendo. Nós configuramos nossas saídas. Agora, como nós realmente convertemos ou conectamos nossas entradas às nossas saídas? Saída, vamos soletrar corretamente, output.x.current é igual, e temos um valor de fração que podemos trabalhar com. Então vamos dizer que o nosso valor de fração multiplicado pela nossa saída.x.range, que vai ser um valor em si mesmo. Então você não precisa fazer isso, mas às vezes é um pouco mais fácil dizer, ok, esse é um valor que vai funcionar primeiro, e então vamos dizer output.x.start mais esse valor. Agora vamos sair daqui. Vamos ver o que acontece. Tudo pronto. Se limparmos isso primeiro, você está todo o caminho da esquerda, que é menos 100, todo o caminho para a direita, que é quase mais 100. Muito legal. Então isso está funcionando, nossos valores de saída estão chegando. Agora só precisamos conectá-lo ao HTML. Mas como diabos fazemos isso? Tudo até agora tem sido simples codificação. Bem, um pouco de matemática, mas nada de HTML. Como nós realmente conectamos o HTML? No topo do meu documento. É aqui que vou configurar o meu HTML. Então configuração HTML. Dentro do nosso HTML, temos algumas aulas, temos olho e aluno. Eu quero mudar e fazer mudanças na pupila. Então vamos tentar obter os elementos HTML para essas classes de alunos. Alguém diz var alunos HTML Coleção equivale document.get elementos por nome da classe e você vê como estamos usando caso camelo aqui e, em seguida, eu quero obter pupil/não alunos, aluno. Digamos que console.log, alunos coleção HTML. Você pode ter visto aquele flash rápido, diz log ignorado. Na verdade, teremos que verificar o que está usando o Console do desenvolvedor do Chrome. Podemos registrar isso aqui novamente. Você vê? Registro ignorado. Então vamos para Developer e JavaScript console. Isto registra a Coleção HTML, que é div de pupila e div de pupilo. Você pode ver que ele está realmente selecionando se esses elementos HTML, enquanto eu passar o mouse sobre eles, nós também podemos clicar com o botão direito do mouse e dizer revelar um painel de elementos, e lá vamos nós. Temos esses dois olhos, o que é fantástico. Então vamos fechar isso. Isso não vai nos ajudar muito. Precisamos converter esta coleção HTML alunos em uma matriz. Há algumas maneiras de fazer isso, mas uma das mais simples são as pupilas var. Array é igual a array.from, e nós apenas colar em nossos alunos HTMLCollection lá. Se você quiser tornar o código pronto para produção, basta verificar se esse pedaço de código funciona em todos os navegadores em que você deseja que seu código funcione. Agora nós temos nossos alunos Array, vamos apenas verificar isso novamente, também um registro ignorado. Novamente, log ignorado. Vamos ver o que isso traz de volta. Novamente, ele vai nos dar nossos dois alunos, mas em vez de uma coleção HTML, não vai ser um array, que significa que podemos trabalhar com ele. Vamos fechar isso, vamos copiar esta matriz de pupilas, e vamos para a nossa seção ascendente aqui. Nós trabalhamos fora nossa saída x, agora vamos e aplicar saída para HTML. Nós copiamos nossas pupilas Array, e então usamos matriz rad função chamada FoREach. Agora nossa função ForEach leva um argumento de função. Podemos dizer função e dentro daqui, vamos colocar uma função anônima. Lá vamos nós, e executamos código para cada aluno que está dentro da nossa matriz. Dentro desta função, obtemos informações possíveis. A primeira informação é o elemento real. Você poderia escrever elemento, eu vou escrever aluno, porque eu quero saber que eu estou trabalhando com um aluno, e então você também passar o que Luca diz. O primeiro aluno, vai obter um valor zero quando nós registramos i, o próximo vai obter um valor de um quando nós registramos i. Isso é realmente, muito legal porque isso significa que você pode mudar seu código, você pode mudar alguma lógica baseada em O que eu é que é. É um pouco confuso quando digo que precisamos de algo como k aqui. Digamos pupil.style.transform, e isso realmente vai mudar o HTML, igual. Eles querem dizer traduzir x. Eu vou usar traduzir x por enquanto. Eu vou dizer traduzir x, e eu vou dizer 75 pixels. Lá vamos nós. Vamos ver se isso realmente funciona. Neste momento, não está a fazer nada porque ainda não tivemos o nosso rato a mexer-se. Vamos limpar estes consoles, e talvez possamos limpar os registos por enquanto. Você vê agora como nossas pupilas foram codificadas para 75 pixels. Se clicarmos com o botão direito do mouse e dissermos Inspecionar, você pode ver que ele tem uma tradução de 75 pixels aplicada. Isso é fantástico. Vamos fechar isso novamente, podemos rolar para o topo, e podemos apenas tirar este log do console, e então nós rolar para baixo para aplicar a saída ao pedaço HTML do código. Em vez de tornar este um valor estático, vamos tornar este um valor dinâmico. Podemos dizer mais mais, e agora podemos colocar um valor de output.x.current aqui. O que isso está fazendo é, isso está concatenando três valores diferentes. Esta string, este valor numérico com esta string, e está colocando-os todos em um valor de string. Chama-se concatenação de cordas. Uma palavra descritiva incrível. É aplicá-los ao valor pupil.style.transform. Vamos ver se isto funciona. Lá vamos nós. É muito divertido. Vamos limpar nosso console e fechar isso. Isso é muito, muito legal. É divertido. Ele está se sobrepondo um pouco, então nós poderíamos mudar nossos valores de entrada ou saída um pouco. Se rolarmos aqui para cima, alteramos nossos valores de saída para menos 70 e talvez nosso fim para 70. Lá vamos nós. Nunca chega a ele, ou o que poderíamos fazer é dentro do nosso CSS, poderíamos mudar o nosso i, poderíamos apenas dizer overflow para oculto. Isso significa que quando chegamos ao limite, ele não se sobrepõe, ele só vai para trás. Então sua escolha o que fazer aqui. Vamos esconder isso de novo. Qual é o próximo? Deixe-me mostrar-lhe algumas coisas muito legais. No momento, nossas pupilas seguem o mouse. Como podemos fazê-lo não seguir o mouse, mas ser inverso? Ao mover meu mouse da esquerda para a direita, as pupilas se movem da direita para a esquerda. Isso é possível? Bem, veja isso. Nosso output.x.current é igual ao output.x.start nos momentos. O que acontece se começarmos no final, e dissermos menos esse valor? Isso significa que, à medida que vamos do lado direito para o lado esquerdo, ele não está fazendo o inverso do que nosso mouse está fazendo. Agora o que eu quero que você faça é pausar este vídeo e tente fazer com que os valores y funcionem para os alunos. Vou mostrar a vocês como eu faria os valores Y para os alunos. Vamos indo. Vou colocar seções aqui, vamos copiar e colar isso. Menos 100 a 100, deve ser aproximadamente os mesmos valores. Você pode alterá-los se quiser. Talvez possamos, talvez mudemos para 125, assim. Então vamos calcular nosso alcance para o nosso y. lá vamos nós. Nós temos uma entrada x do mouse, e mouse y entrada, saída x. Vamos obter a nossa saída y, assim, e podemos começar no final novamente. Ele muda para y, mouse y fração, o que é realmente importante. Você pode realmente experimentar com mouse x com seu y, isso é um pouco engraçado. Vou deixar isso com você. Então aqui onde nos aplicamos ao HTML, em vez de usar translate x, eu vou usar translate, o que significa que eu preciso colocar em outro valor aqui. Podemos dizer 50 pixels e movemos nosso mouse. Isso sempre permanecerá na mesma posição. Isso não é bem o que queremos, queremos que isso seja dinâmico, então, em vez de 50 pixels, queremos usar uma concatenação mais string aqui. Vamos colocar entre aspas simples, mais, mais, e, em seguida, entre as vantagens irá usar nossa saída y.current. Vamos ver o que acontece aqui. Isso vai exatamente onde nosso mouse não está indo, e você vê que podemos realmente esconder nossos globos oculares, o que não é ideal. Eu vou mudar meus valores aqui para talvez 75, e eu vou mudar estes para 75 e 75 também. Lá vamos nós. Muito legal. Se quiséssemos que nosso valor y seguisse nossa posição do mouse em vez de ser inverso, poderíamos começar na posição inicial e, em seguida, adicionar esta parte do cálculo. Você vê como eu movo meu mouse para cima, ele segue meu mouse. À medida que vou da esquerda para a direita, os olhos fazem o oposto. Você pode alterar o código facilmente e simplesmente atualizar o HTML. Para exercícios de alongamento com isso, o que eu quero que você faça é, eu quero que você tente para cada aluno, faça um movimento em uma direção diferente. Ao mover o mouse da parte superior da tela para a parte inferior da tela, quero que um olho siga o mouse e quero que o outro não siga o mouse. Quero que seja inverso. A mesma coisa para o x. Como eu movo meu mouse da esquerda para a direita, eu quero que um olho siga o mouse, e eu quero que o outro olho faça o inverso. Pause o vídeo aqui, e veja se consegue fazer isso. Vamos tentar isto. Quero que os meus alunos façam as coisas opostas. O que é ótimo é que eu tenho esse valor k ou i, o que você quiser chamá-lo. Eu vou dizer se, e eu vou dizer k é igual, igual, igual a zero, que será o primeiro i, fazer algo, outra coisa, fazer outra coisa. Vamos copiar e colar isto aqui, copiar e colar isto aqui, e vamos tirar isto, que se parece com isso. Isso ainda deve funcionar exatamente da mesma forma, nós temos o mesmo pedaço de código nele. Agora eu tenho meus valores atuais aqui. O que eu vou fazer é, eu vou mudar ou adicionar um valor diferente. Eu vou copiar e colar esta saída x, e eu vou dizer ponto oposto. Eu vou dizer começar mais este valor aqui, e eu vou fazer exatamente o mesmo para o meu valor y. Eu vou dizer o oposto é o fim, menos, e começar mais. Agora, você pode chamar isso do que quiser. Você poderia chamá-lo de inverso, você pode até mesmo mudar isso para começar, e isso para fim, e isso para mais, e isso para menos, o que você quiser. Agora tenho dois valores de saída com os quais posso trabalhar. Eu tenho a corrente e eu tenho o oposto. Vamos ver o que acontece aqui, se eu atualizar isso para o oposto e o oposto, e este para o atual e atual, o que acontece? Se eu for até o meio, ele é normal, e se eu for todo o caminho para a esquerda, ele vai um pouco estranho, se eu for todo o caminho para a direita, super squinty. Lá vamos nós, você pode começar a se divertir, tudo codificado. O HTML está apenas sendo atualizado pelo seu código, muito legal. No próximo vídeo, vamos levar isso para o próximo nível. Aprendemos como mover as coisas com JavaScript. Tem sido muito divertido. Mas no momento, não há muita profundidade. Não há muito paralaxe. Vamos introduzir paralaxe e profundidade no próximo vídeo. Estou ansioso por isso. 7. Criando o efeito de paralaxe: Neste vídeo, vamos criar uma ilusão de profundidade. Existem várias maneiras de fazer isso, mas uma maneira que eu gosto muito é dar a cada elementos de paralaxe com um valor de profundidade entre zero e um. Sim, estamos falando de valores entre zero e um novamente, mas, por quê? Porque é fácil conectar-se aos nossos valores de saída. Zero significa muito perto e um significa muito longe. À medida que um elemento fica cada vez mais longe, ele se moverá cada vez menos rapidamente. Como fazemos isso no código é, para cada elemento começamos com as saídas x e y que trabalhamos no último vídeo, então subtraímos um valor que é composto multiplicando as saídas x ou y atuais pelo elemento Profundidade. Se a profundidade de um elemento 0,5, em seguida as saídas x dos elementos serão metade da saída x atual. Se a profundidade de um elemento é zero, as saídas x desse elemento será a saída x completa e se a profundidade de um elemento é um, então a saída x para esse elemento será zero. A outra coisa que precisamos estar cientes é onde nossos elementos aparecem na tela. Em HTML, a menos que você especifique elementos z-index, ele aparecerá abaixo dos elementos que vêm depois dele e em cima dos elementos que vêm antes dele. Se o nosso primeiro elemento tem uma profundidade de 0,1 e o nosso segundo elemento tem uma profundidade de 0,8 em HTML o segundo elemento apareceria no topo do primeiro. Mas de acordo com as profundidades dos elementos, queremos que o primeiro elemento apareça no topo porque tem um valor de profundidade mais baixo. A menos que você queira definir manualmente índices z ou colocar todos os elementos que estão mais longe na parte superior do documento, então precisamos ajustar os valores do índice z em cada elemento com código. Podemos fazer isso definindo um zIndexRange. Em seguida, trabalhamos elementos zIndex subtraindo o intervalo zIndex multiplicado pela profundidade do zIndexRange. O ZnDiexRange deve correlacionar-se com ou ser maior do que a quantidade de casas decimais que você pretende usar em seus valores de profundidade. Se você estiver usando casas decimais simples, então um zIndexRange pode ser 10. Se você estiver usando duas casas decimais, use um zIndexRange de 100 e assim por diante. Um zIndexRange de 1.000 ou 10.000 é uma aposta muito segura. Como você pode ver, tudo tem a ver com profundidade. Agora, vamos entrar no código. Temos um pouco para cobrir. Enquanto no exemplo olhos googly foi muito divertido para jogar com e para criar não é realmente vai nos ajudar na criação de uma experiência de paralaxe. Vou fazer uma nova modelagem aqui. Primeiro, vou remover meus olhos do HTML e criar alguns elementos de item de paralaxe para que possamos criar talvez três desses. Em seguida, no meu CSS, em vez de eye1 e eye2, em vez de meu aluno, eu vou mudar my.eye2 talvez vamos apenas copiar e colar isso para item de paralaxe. Cor de fundo, podemos mudar isso para preto. A cor de fundo é preta. A largura e altura 200. Radiolimite, podemos tirar isso, certo? A posição é absoluta esquerda e superior margin-esquerda, margin-top. Isso é tudo bom. Está parecendo ótimo. Está no centro da página. O transbordamento: escondido, podemos tirar isso. O que vamos fazer é para cada um desses elementos irá definir uma cor de fundo separada. Em seguida, no topo aqui, em vez de PupilsHTMLCollection, podemos dizer itens HTMLCollection e podemos copiar e colar isso. Em vez de olhar para o fechamento do aluno, vamos novamente estar procurando por paralax-item. Podemos copiar e colar isso. Em seguida, em vez de PupilsArray eu vou para itens Array. Nós, então, temos nossas entradas e nossas saídas que são todos muito bons. Vou mudar estes de 75 para 100 só para que haja um pouco mais de movimento, talvez possamos até dizer 150. Vamos copiar e colar isto. Nossas saídas são manuseadas. Em seguida, temos todas as entradas MouseX e MouseY sendo trabalhadas. Nós temos nossa saída x. Eu não preciso de uma corrente e um oposto sendo trabalhado o tempo todo. Eu só vou para a corrente. Vou ficar com o fim menos este valor aqui. Aplicar saída para HTML, isso é ótimo, então vamos para ir com nossos valores atuais. Vamos pegar isso e sobrescrever isso porque não haverá mais olhos. Em vez de nosso PupilsArray aqui vamos para ItemsArray. Em vez de fazer referência a este elemento com pupi, podemos ir item e, em seguida, item.style.transform e, em seguida, traduzi-lo. Parece que está funcionando de forma fantástica. Vamos colocar algum estilo nesses blocos. Eu quero dizer cor de fundo. Que cor eu quero? Bem, este vai ser preto, então isso é ótimo. Vamos copiar e colar esses atributos de estilo. Vamos abrir nosso painel de ativos em caneta colorida. Vou copiar um destes e colá-lo aqui. Então vamos pegar um azul e colá-lo aqui. Muito obrigado. Agora temos todos os nossos quadrados se movendo exatamente na mesma velocidade. O que está acontecendo aqui é que se eu entrar nisso, você verá o mindinho e se eu sair dessa, você verá o preto. Se eu entrar em ambos e novamente, apenas me diga que eles estão todos se movendo exatamente na mesma velocidade. O que vamos fazer aqui é começar a introduzir a nossa profundidade. Para este item 1 eu quero uma profundidade de digamos 0,1. Em JavaScript podemos usar profundidade de dados e quando eu digo profundidade, você pode colocar o que quiser aqui. Cabe a você. Vamos para 0,1 e vamos copiar e colar isso. Vamos fazer isso um pouco maior. Isso pode ser 0,3 e 0,6. Isso significa que este deve ser o nosso quadrado mais próximo. Este está no meio e este deve ser o mais distante. Aqui podemos ver que esse não é o caso, mas não fizemos qualquer codificação para torná-lo assim. Isso apenas destacar em html e CSS e vamos descer para a nossa matriz de itens para cada loop. Aqui podemos começar a brincar com a profundidade. Para realmente obter a profundidade em JavaScript, isso é o que vamos fazer. Vamos dizer profundidade var. Instalamos essa profundidade dentro de uma variável chamada profundidade. Vamos dizer item.dataset.depth. Quando eu disser profundidade aqui, se você nomeou sua profundidade de dados, algo como distância de dados, então você vai dizer dataset.distance, mas nós temos profundidade aqui. Vamos ver se isso realmente está chegando através de console.log. Vamos dizer k para o item, então vamos dizer profundidade e profundidade. Quando movemos nosso mouse, o primeiro item tem uma profundidade de 0,1, o segundo tem uma profundidade de 0,3 e o terceiro tem uma profundidade de 0,6. Os itens estão chegando. A questão é que estes são valores de texto. Quero que sejam valores numéricos. Como fazemos isso acontecer em JavaScript? Bem, podemos usar essa coisa chamada análise flutuante. Em seguida, selecionamos isso e depois colocamos em chaves. O que a análise float faz é que converte algo em um número e especificamente um número com casas decimais. Sabemos que temos casas decimais, então isso funciona muito bem. A outra coisa é que precisamos colocar vírgula 10. Se você não colocar isso não é um grande jogo trans, mas é a melhor prática. A razão pela qual eu coloquei vírgula 10 aqui é porque estamos dizendo que queremos que este seja um sistema decimal. Ele poderia converter um número ou um pedaço de corda para algo que conta por 15s, por exemplo. Este é realmente um bom treino. Vamos manter isso dentro. Agora, quando nos movermos e veremos que estes são todos números agora, eles são laranja, eles não têm aspas em torno deles. Agora, como nós realmente aplicamos isso a cada um de nossos quadrados? Vamos configurar uma saída de item. Isto vai parecer bastante semelhante à nossa saída acima aqui, exceto que não teríamos um final inicial e valor atual teremos apenas um valor x ou y. Não precisamos de cada um desses. Aqui em baixo, vamos ter o nosso valor x. Qual será o nosso valor x? Bem, vai começar na nossa saída x.current. Vai ser isso como um motor de partida e vamos dizer menos a saída x.current multiplicada pela profundidade. Podemos colocar chaves em torno deles apenas para ter certeza de que sabemos que ele está sendo calculado primeiro, mas ele realmente calculou primeiro por causa do sinal de multiplicação. Temos toda a nossa exposição. Agora eu digo itemoutput.x. Vamos ver se isso funciona. O y ainda é parte da posição geral ou global y, mas o nosso x é determinado pela nossa profundidade que é muito legal. Agora vamos colocar a posição y aqui. Podemos apenas copiar e colar este y:output.y, output.y e ItemOutput.y. Lá vamos nós. Agora você pode ver que ele está se movendo inversamente para a posição do mouse e é baseado na profundidade. Vamos limpar isso e fechar. Mas ainda há um pequeno problema. Em nosso HTML você verá que nossa profundidade, esta está em 0.1 o que significa que deve estar na frente, certo? porque está mais perto de nós. Mesmo que isso pareça bom, não é realmente verdade. Quanto mais perto está algo, mais rápido deve parecer estar se movendo. Como mudamos isso? Bem, em nosso JavaScript agora podemos começar a mudar o índice z ou o índice z, dependendo de qual parte do mundo você é. Vamos adicionar um novo valor aqui, z-index. O que vamos fazer é dizer que 10.000 vão estar fora do intervalo de índice z. Vamos criar uma nova variável em nossa saída em breve, mas começamos com 10.000. É só um número muito seguro para trabalhar. Vamos dizer 10.000 menos 10.000 multiplicados pela nossa profundidade, está bem? Agora, nós podemos apenas colocar isso em chaves para que você saiba que isso está sendo resolvido primeiro. Se a nossa profundidade for um, então o nosso índice z será zero. Se a nossa profundidade for zero, significa que o nosso índice z ou zIndex será de 10.000. Em seguida, adicionamos outra linha para o nosso item e dizemos item.style.zindex igual a e nós apenas plotar este número para lá. Isso não funciona. Vamos abrir nosso console, registros aparados. Não há mensagens de erro, as coisas não estão funcionando. O que está acontecendo aqui? Temos que ir para o nosso Chrome, desenvolvedor, JavaScript Console e diz ReferenceError: z Índice não está definido desde que acontece em todo o show. Podemos vir aqui e dizer ZIndex. Não é ItemOutput.zIndex é apenas zIndex. Lá vamos nós. Isso deve consertar as coisas para nós, fantástico. Agora nossa caixa preta está em cima da caixa azul está na parte inferior. As coisas parecem realmente reais agora, muito legal. Você pode notar algo um pouco estranho agora. Estes itens são todos na verdade a mesma largura e altura mas como nós os movemos para trás cada vez mais longe, eles não parecem estar cada vez mais longe. O que você poderia fazer é dimensioná-los manualmente ou alterar a largura e a altura mais longe que eles se afastam ou você poderia fazê-lo com código. Você poderia fazer um dinamicamente. É nisso que vamos nos meter no próximo vídeo. 8. Tornando o efeito mais realista: Fizemos alguma magia de paralaxe acontecer e parece incrível. Mas se estamos tentando fazer as coisas parecerem e se comportarem como fazem na vida real. Haverá sempre mais coisas que podemos fazer. Neste vídeo, vamos abordar dois deles. Nós também vamos fazer alguma otimização de código e eu substituo as caixas por algumas folhas bonitas porque as folhas são legais. A primeira coisa que precisamos abordar é a escala. Se houver dois itens com a mesma largura e altura, e um deles estiver mais longe. Deve parecer menor em escala e deve parecer menor de acordo com a distância que está. Sua escala deve ser relativa à sua profundidade. Você pode codificar manualmente a escala de cada elemento, ou você pode fazê-lo com código e, claro, nós estamos indo para ele com código. Poderíamos calcular a escala facilmente começando com um e subtraindo a profundidade dos elementos. Mas talvez não queiramos que nossos itens sejam tão pequenos. Vamos definir uma escala de início e fim, o que nos levará à criação de um intervalo de escala. Em seguida, para calcular uma escala de elemento, começamos com a escala inicial e, em seguida, adicionar a profundidade multiplicada pelo intervalo de escala. Parece bem familiar, não é? A próxima coisa que precisamos abordar é o embaçamento. Os itens aparecerão cada vez mais desfocados quanto mais longe forem. Mas nós não queremos necessariamente que eles fiquem embaçados até uma certa profundidade. Caso contrário, tudo, exceto elementos e profundidade zero, ficará desfocado. Uma maneira de calcular a desfocagem é decidindo sobre um valor de profundidade inicial, que será onde a desfocagem vai começar e o outro é um valor de intervalo de desfoque, que seria como borrada e elemento pode ficar. O valor de profundidade inicial precisa ser um valor entre zero e um para que ele se correlacione com os valores de profundidade e o valor do intervalo de desfoque é o que vamos conectar a profundidade de cada item. Assim como o nosso intervalo de índice Z são elementos valor de desfoque é então calculado subtraindo o valor de profundidade inicial da profundidade dos elementos e, em seguida, multiplicando isso com o nosso intervalo de desfoque, você pode acabar com alguns valores de desfoque negativos. Mas, no momento, isso significa que esses elementos não aparecerão borrados, que é exatamente o que queremos. Agora vamos implementar escala e desfoque em nosso código e enquanto estamos fazendo isso, vamos otimizar nosso código um pouco. Vamos transformar nossos blocos em algumas folhas de aparência legal primeiro. Vamos abrir nosso painel HTML, vamos dar um pouco mais de espaço. Vou tirar os atributos de estilo, boom, boom e boom. Então, dentro do meu item de paralaxe, eu vou adicionar uma imagem e a fonte vai ser? Se eu abrir meu painel de ativos dentro da CodePen, há um monte de imagens. Você poderia ir a fotos que elas não são ideais. Com o CodePen pro, ele permite que você carregue seus próprios ativos. Carregei um monte de meus próprios ativos de paralaxe. Você pode usar esses ativos se quiser. Você também pode usar os ativos disponíveis na classe e eu mostrarei como fazer upload de seus próprios ativos e copiar o URL se você não tiver o CodePen pro. Nós copiamos isso. Vamos colá-lo na nossa fonte e lá vamos nós. Está a passar. Vamos apenas copiar e colar estes em nossos itens div e, em seguida, ativo número 2 e ativo número 4. Lá vamos nós e eu estou usando o ativo número 4 em vez do ativo número 3 porque o ativo número 3 é realmente uma grande mancha e não parecia tão legal. Em seguida, dentro do nosso CSS, eu vou ponto paralaxe, item e eu vou abordar a imagem dentro do item de paralaxe. Eu vou dizer largura ou talvez largura máxima é 100 por cento e altura máxima também é 100 por cento. Vamos ver o que isso faz. Sim, isso parece muito bom. Agora, como faço para colocá-lo no meio? Talvez possamos usar alguns flex, df para display flex Eu vou dizer justify-content, centro e centro de itens de alinhamento. Lá vamos nós. Podemos tirar nossa cor de fundo. Podemos mudar a largura e a altura para 300 pixels e lá vamos nós. Agora temos três folhas uma em cima da outra. O que eu quero fazer agora é eu só quero girar as folhas um pouco. Vamos abrir o nosso HTML e fazer algum estilo embutido aqui. Primeiro, vamos para atributos de estilo e vamos mudar a rotação de transformação para cerca de 30 graus, assim. Depois copiamos e colamos isto e mudamos isto para 45 negativos e este para algo como 110. Isso funciona em tudo? Não, porque nós soletramos transformar errado. Que tal isso? Lá vamos nós, e as coisas estão começando a funcionar agora. Temos algumas folhas interessantes acontecendo no momento. São um pouco melhores que os nossos quarteirões. Temos o nosso HTML feito, temos o nosso CSS feito, agora vamos começar a alguma otimização JavaScript. A primeira coisa que eu quero fazer é, eu quero remover esses valores que nós realmente não sabemos o que eles são e o que acontece se nós mudarmos um, então nós sempre temos que mudar o outro. Vamos mudar isso para output.zindex.range e vamos copiar e colar isso e, em seguida, aqui vamos apenas colocar em nosso objeto zindex e vamos colocar em uma chave de intervalo, e o intervalo será 10.000. Essa é a primeira otimização que eu quero fazer. A razão pela qual eu faço isso é para que eu não tenha um monte desses 10 mil números em todo o show. Eu sei exatamente o que é e eu posso atualizá-lo em um só lugar e ele irá atualizá-lo em todo o meu código, o que é muito legal. A próxima coisa que eu quero fazer é, eu quero mudar como essa função de movimentação do mouse funciona em vez de ter todo esse código dentro daqui, que está ficando muito, muito longo, eu quero dividi-lo. A maneira que eu quero dividi-lo é que eu quero criar uma variável que é chamada updateinputs e eu quero armazenar uma função aqui que executa este código. Vamos pegar este código a partir daqui e colocá-lo nesta função e, em seguida, indo para executar UpdateInputs de dentro desta função. Significa que sei exatamente o que está fazendo. Mas eu realmente não tenho que olhar para o código e percorrer ele toda vez. O único problema com esta forma de fazê-lo é que o evento não estará presente nesta função. O que eu vou fazer antes de chamar eventos de atualização é que eu vou atribuir meu mouse.x para event.clientx e meu mouse.y para event.clienty. Você pode estar pensando que bem, onde o inferno é dominado x vindo? Bem, vamos criar isso. Vamos para var mouse e irá criar um objeto e seu x será zero e é y será zero. Agora, quando temos o evento, vai dizer mouse.x é igual ao event.clientx. Em seguida, em vez de atribuir event.clientx ao nosso mousex.current, podemos dizer mouse.x e mouse.y. Isso significa que podemos executar nossas entradas de atualização sem ter que confiar em uma propriedade de evento. Agora vamos fazer o mesmo para a nossa saída. Isso cria uma variável chamada UpdateOutputs e vamos armazenar uma função dentro daqui. Podemos cortar isto e colá-lo. Em vez de ter duas linhas de comentários, eu posso apenas dizer saída x e y, e vamos apenas fazer isso assim. Isso parece um monte mais limpo. Em seguida, chamamos a função UpdateOutputs logo após o UpdateInputs e, em seguida, queremos colocar isso em uma função para. Este é um pouco diferente porque estamos criando uma saída de item para cada elemento e, em seguida, estamos atualizando o HTML. Como chamamos esta função? Talvez você possa dizer UpdateEachParallaxItem. Que tal isso? Vamos copiar isso, colar. Eu vou dizer var é igual a função e então podemos cortar isso e colocá-lo aqui. Agora nosso código parece muito mais legível. Nós apenas vemos que ele está atualizando as entradas, ele está atualizando as saídas e, em seguida, atualizando cada item de paralaxe. Isso também é muito legal, porque podemos chamar cada um deles separadamente e fora desta função de movimento do mouse punho. Isso é ótimo. Nós limpamos nosso código um pouco. Agora, o que vem a seguir? É tempo de escala. Onde fazemos a nossa escala? Bem, fazemos nossa escala e nosso itemOutput. Vamos adicionar uma nova propriedade ao nosso ItemOutput e nossa escala. O que é que isto vai ser? Vai ser algo como o nosso output.scale.start plus. Vamos colocar dentro de nossos suportes aqui, escala de pontos de saída multiplicada pela profundidade. Ainda não montamos isso, então vamos lá e preparamos tudo. Tudo isso, nós podemos realmente apenas escondê-los por enquanto, que é muito legal sobre CodePen. Também está disponível nos editores de código. Podemos esconder o valor do mouse e então vamos em frente e colocar nossa escala aqui. Eu vou ter um valor inicial, e o valor inicial que eu recomendaria ser um, porque uma escala de um significa que ele está no tamanho original. Nós então temos um valor final, e o valor final talvez possa ser 0,2, mas vamos atualizar isso em um momento. Então vamos trabalhar nosso alcance como o resto desses cálculos. O intervalo de pontos da escala de saída é o ponto da escala de saída ponto final menos a saída ponto escala ponto start. Você pode estar pensando, “Espere, vamos começar com 0,2 e depois subtraindo um, que nos dará um valor de 0,8 negativo como nosso alcance.” Isso está perfeitamente bem. Você poderia mudá-lo se quisesse. Não há maneira difícil e rápida de fazer as coisas com código. É assim que estou fazendo. Vamos rolar para baixo. Nossa escala é agora saída escala ponto start, que seria um. Então nós estamos adicionando o intervalo de pontos da escala de saída, que vai ser um valor negativo, multiplicado pela profundidade. Se a nossa profundidade for uma, então o nosso intervalo de pontos de escala de pontos de saída será negativo 0,8. Basicamente, vamos dizer início mais negativo 0,8, que nos dará 0,2 de uma escala, o que é fantástico. Se a nossa escala ou se a nossa profundidade estiver em zero, o intervalo de pontos da escala de saída multiplicado por zero será nada. Então ficaremos com uma escala de um. O problema com a escala é que a escala e a tradução são propriedades de transformação, então teremos que adicionar escala a essa linha de código aqui. Então escala, vamos tentar, 0,5. Vamos mover o rato por aqui. Lá vamos nós. Eles são muito pequenos, então vamos torná-lo dinâmico. Eu vou para a escala de ponto de saída do item. Isso parece muito bom, e se nós rolarmos até aqui e estabelecermos escala final para zero, as coisas devem ficar muito menores. Talvez se mudarmos o nosso HTML, se mudarmos o 0.6 para uma profundidade de um, devêssemos realmente vê-lo desaparecer. Não está em lugar nenhum para ser visto. Isso é porque o nosso fim é zero, e terá uma escala de zero. O que fazemos aqui? Nós mudamos de volta para 0,2 ou 0,3, ou se você quiser 0,3, e então lá vamos nós. Não é bem zero. Eu não gosto de itens com uma profundidade de um, isso significa que eles não se movem, então eu prefiro ir para 0,9, então ele se move ligeiramente. Agora temos nossa escala classificada, isso está feito. O que vem a seguir é o embaçamento. Vamos colocar um valor de desfoque aqui na saída do nosso item. Qual é a saída do cálculo de desfoque? Ponto de desfoque profundidade inicial, que ainda não configuramos, e vamos dizer a nossa profundidade menos a nossa saída ponto borrão profundidade inicial. Vamos colocar isso dentro de uma cinta para que funcione primeiro. Então vamos dizer multiplicar pelo nosso intervalo de pontos de desfoque de saída. O que isso está fazendo é dizer que temos uma profundidade, isso pode ser zero, então zero menos nossa profundidade inicial, que seria 0,5 talvez, então você teria um 0,5 negativo multiplicado pelo intervalo de desfoque. Isso lhe daria um valor negativo, o que é perfeitamente bom para um item com uma profundidade de zero. Vamos apenas colocar neste valor de saída. Vamos para o borrão e vamos definir nossa profundidade inicial, e digamos 0,5. Qualquer coisa que esteja em 0,5 ou acima começará a obter um valor azul. Vamos então definir o nosso alcance, e vamos dizer 20 por enquanto. Vamos implementar isso no HTML. Vamos usar o filtro de pontos de estilo de ponto do item, que ainda não usamos. Nós realmente precisamos de um valor de string para isso, e vamos dizer desfoque, e vamos apenas tentar cinco pixels agora, mover nosso mouse um pouco. Lá vamos nós, temos alguns valores de borrão. Agora vamos fazer isso dinâmico. O que é realmente importante notar aqui é que você precisa um pixel ou algum valor de medição, então nós vamos apenas remover os cinco e colocar no item ponto de saída desfoque, e quando movemos o mouse, lá vamos nós. Você vê um item que está mais para trás agora está desfocado, e os itens mais próximos de nós, eles não estão borrados. Se mudarmos os valores de profundidade inicial, talvez mudemos isso para 0.1, veremos que meu item, que está em 0,1, ainda não está desfocado, mas os itens em 0,3 e 0,9, eles definitivamente são borrada. Se tivéssemos que mudar nosso alcance para algo como 40, você deve ver que os itens mais atrás ficam ainda mais embaçados. Temos nossa configuração de borrão. A única coisa que você deve ter notado é que toda vez que eu mudo meu código, então eu vou colocar um pouco de código aleatório aqui, você verá que antes de mover meu mouse, essas coisas não são borradas e as não são dimensionadas, o que é problemático. Significa que, a menos ou até que movamos nosso mouse, as coisas não vão parecer como se estivessem desfocadas ou escaladas. Vamos tirar isso e implementar algum código que irá corrigir isso. O que é ótimo é que nós realmente fizemos entradas de atualização, saídas de atualização e atualizar cada item de paralaxe. Podemos copiar e colar este código e ir para a parte inferior do nosso código e colá-lo. Vamos desindentá-lo, e desde o início, você verá que agora as coisas estão escaladas, e as coisas estão borradas. Eles são ligeiramente deslocados, ele realmente não parece que eles estão no meio, então talvez o que nós podemos fazer é ajustar o nosso mouse X e Yposição. Vamos para o nosso mouse X e Y, e vamos para a janela ponto largura interna e altura interna do ponto da janela. Talvez não devêssemos fazer isso. Talvez devêssemos dizer multiplicá-lo por 0,5. Isso significa que o X e Y estarão no meio da janela, como se estivesse lá, o que parece ótimo. Se fizermos algumas alterações de código ou alguém vier visitar a nossa pequena caneta ou o nosso site, significa que antes de terem a oportunidade de mover o rato, as coisas vão parecer borradas, vão ser escaladas, o que é fantástico. Fizemos algumas atualizações de código, implementamos folhas em nossos exemplos de paralaxe e fizemos alguns escalonamentos e desfocamento. Super-duper. Como prometido, eu realmente preciso mostrar a você como fazer upload de seus próprios ativos. Se você abrir uma nova guia, poderá procurar por hospedagem de imagens. Há várias maneiras diferentes de hospedar imagens. Alguns deles não funcionam, mas apenas experimente. O que estamos buscando é que queremos obter uma URL de imagem que possamos colocar no CodePen. Vamos começar a carregar. Escolhemos um ativo de paralaxe como esse rosto legal, dizemos: “Ok, vamos fazer upload.” Em seguida, copiamos o link, você cola o link. Este não é o URL da imagem. Uma vez que a imagem é carregada, você clica com o botão direito do mouse e diz “Copiar endereço de imagem”, cole isso novamente, e verá que ele diz ponto PNG ou ponto JPEG, o que quer que você carregue. Em seguida, você pode copiar este URL e, em seguida, dentro do seu HTML, você pode colá-lo. Lá vamos nós. Você não precisa do CodePen para fazer upload de imagens ou colocar imagens em seus projetos. Agora temos um rosto legal, e não precisamos usar o CodePen Pro. Ou se você não estiver usando o CodePen e estiver em seu computador local, é muito fácil fazer referência a imagens no sistema de arquivos usando URLs relativos. Super fácil. Há poucas coisas que poderíamos acrescentar e implementar que o tornariam ainda mais realista, e talvez até dar um pouco de um fator “wow”. Se você puder pensar em alguma coisa que você gostaria de tentar implementar, eu sugiro que você tente codificá-lo sozinho, se divertir um pouco, cometer alguns erros, e se você precisar de alguma ajuda ou as coisas não estão funcionando como você espera, compartilhe seu URL na seção Comentário da classe, e eu tentarei ajudá-lo. 9. Planeje como um amador: Quando você cria e codifica várias versões do efeito Parallax, pode haver muitas partes móveis. Este não é apenas o caso para paralaxe, mas também para outras peças de design de interação. planejamento torna-se uma parte essencial do processo e ainda mais essencial quando você está trabalhando com uma equipe. Tentar descobrir tudo pela frente, como um profissional para a frente, simplesmente não vai funcionar, ou se você está tentando fazer tudo funcionar magicamente enquanto você está codificando mesmo nunca aconteceu ou isso leva muito mais tempo do que se você está apenas planejando no começo. Como você planeja? Essa é uma ótima pergunta. Planeio de duas maneiras, e faço as duas em vários estágios de um projeto. O primeiro método é escrever o que eu quero que aconteça. Começo por escrever de forma bastante ampla e descritiva. Minha primeira peça de escrita pode ser algo parecido com isso. À medida que o usuário move o mouse, os itens se movem. Eu, então, iria para algo assim. À medida que o usuário move o mouse da esquerda para a direita, os itens se movem da direita para a esquerda. Então eu vou mudá-lo novamente, enquanto o usuário move o mouse da esquerda para a direita, os itens se movem inversamente da direita para a esquerda em uma proporção. Então, à medida que o usuário move o mouse da esquerda para a direita, cada item se move inversamente da direita para a esquerda a uma velocidade relativa à sua distância do usuário, você pode ver como estou adicionando mais e mais detalhes à minha descrição aqui. Finalmente, vai acabar assim. À medida que o usuário move o mouse horizontalmente, cada item se move inversamente a uma velocidade relativa à sua distância do usuário. Isso pode parecer um pouco complexo, e é por isso que eu não comecei a escrever complexo porque isso é um pouco incompreensível. Esta descrição final é o meu objetivo final. Eu começo com isso em mente e você pode ver como mudou ao longo do tempo, quanto mais eu saía da minha cabeça, mais detalhado eu poderia então ser, eu acabei tornando-o sucinto e um pouco mais genérico. Meu próximo passo é dividir meu objetivo em pedaços gerenciáveis. Quando as coisas se quebram, tudo parece mais fácil e relativamente simples. Esses pedaços são parte do meu plano de ação. O que é importante entender é que eu não criei todo o plano de ação ao mesmo tempo. Minha próxima escrita pode acabar parecendo algo assim. Rastrear o mouse X usando eventos de movimento do mouse. Comparado o mouse X com a largura da tela para criar uma fração. Conecte essa fração a um intervalo de elementos X. Faça isso para cada elemento e aplique uma profundidade. Então, para cada ponto, eu poderia quebrá-lo ainda mais. O mouse pista X usando eventos de movimento do mouse, Eu posso fazer algumas notas como este. Um, adicionar ouvinte de evento, dois, criar uma função de nome, manipular movimento do mouse, talvez três, criar uma variável que armazena o evento X dentro do movimento do mouse do identificador. Lá vamos nós, você pode ver como eu estou escrevendo tudo isso. Eu não tenho que fazer tudo de uma vez. O que acaba acontecendo é que essas linhas podem se tornar comentários em seu JavaScript, que você pode seguir com muita facilidade. Lá como seus ponteiros em um labirinto, como você fica melhor e melhor, você pode encontrar-se pulando partes do planejamento. Isso está perfeitamente bem. O que é realmente importante lembrar é que em qualquer ponto no tempo ou em qualquer ponto do processo, você pode fazer um plano. Basta escrever o que você quer que aconteça em forma de ponto, seja em um comentário Javascript, ou em um pedaço de papel em um documento de texto regular. Eu tenho um bloco enorme na minha mesa a maior parte do tempo, então eu posso apenas fazer anotações rapidamente, eu posso planejar rapidamente. Repartilhe o que precisa acontecer em inglês ou em qualquer língua que você fale melhor, e depois escreva o código para ele. O segundo tipo de planejamento que faço é colocar caneta no papel ou lápis no iPad. Eu desenho coisas, eu trabalho as coisas, eu desenho os documentos, eu desenho com uma tela de tela como eu desenho com um mouse, eu desenho elementos. Eu desenho tudo o que posso e então eu começo a colocar valores falsos em lugares. Meu mouse X e minha largura de tela, minha faixa de saída, e então eu começo a fazer cálculos. Represento incógnitas com Ys, Bs e Xs. Eu faço os cálculos legíveis e preferencialmente em JavaScript ou algo que pode ser facilmente transferido para JavaScript. Então eu tento o mesmo desenho com valores diferentes, eu vejo os resultados que obtenho e então tento a interação em diferentes estágios, quando meu mouse está todo o caminho à esquerda, quando meu mouse está no meio, quando meu mouse está todo o caminho à direita. Então, uma vez que você acha que sabe o que está acontecendo, substitua os valores inventados por nomes de variáveis. Esses esboços de planejamento são dourados, é como se você tivesse esses momentos de brilho, esses momentos lúcidos onde você é apenas um gênio, que você grava. Pões caneta no papel, fazes todos os teus cálculos, e depois usas um mais tarde onde não estás, os sentimentos são brilhantes. Há uma pequena chance de você se lembrar todos esses cálculos em sua cabeça enquanto você está codificando. Acho melhor anotar e depois transferir para o código. O que é ótimo sobre o planejamento é que ele não precisa ser perfeito e você não precisa fazer tudo de uma vez. Você pode iterar sobre ele rapidamente. Você pode mostrar para as pessoas, você pode melhorar e você pode saltar de volta para ele sempre que você ficar preso. Você pode usar uma mistura de escrita e desenho quando quiser. 10. Capturando a posição de rolagem: Agora que criamos nossa primeira experiência em paralaxe, podemos começar a criar uma experiência de paralaxe de rolagem. Isso é muito divertido de criar e a maioria das pessoas são totalmente hipnotizadas por eles. Mas o que queremos alcançar? A primeira coisa que eu quero alcançar é, eu quero criar um valor de fração de entrada Scrolly que eu possa conectar meus valores de saída. A segunda coisa que eu quero alcançar é, então eu quero que cada um dos meus elementos se mova na direção oposta à direção de rolagem, mas proporcional à sua profundidade. Quanto mais longe um elemento estiver, mais rápido ele estará se movendo desta vez, mas na direção oposta à direção de rolagem. A única coisa que precisamos ter cuidado antes de entrarmos no código é que o máximo que podemos rolar é na verdade a altura do documento menos a altura das janelas. Vamos lembrar isso ao configurar nosso valor final de entrada Scrolly. Vamos entrar em código. Vamos começar fazendo nossos documentos, rolando documento. Vamos saltar para o nosso HTML aqui. Podemos criar algumas coisas chamadas paralax-container. Lá vamos nós. Vou apenas recuar esse código. Vamos colar isso e podemos copiar e colar recipiente de paralaxe assim. Isso é bom. Então, podemos dar a este uma classe alt e este um uma classe alt, para que possamos mudar as cores de fundo. Em seguida, no CSS, podemos colar isso e dar-lhe uma altura ou um mínimo de alturas de 100 VH, que é 100 altura do visualizador. Podemos dizery.parallax-container.alt e podemos dar a isso uma cor de fundo. O que escolheremos? Vamos para os bens. Vamos escolher um verde realmente claro talvez, talvez um verde muito mais escuro ou poderíamos até ir para matriz como rosa. Aqui vamos nós. Vamos colar isto aqui. Agora, à medida que descermos, haverá divs verdes e cor-de-rosa. Só nos mostra o quanto rolamos. Também temos esta barra de rolagem no lado direito. Lá vamos nós. Agora temos um documento que rola. Também podemos adicionar todos esses itens de paralaxe no segundo recipiente de paralaxe. Isso significa que, à medida que descermos, onde eles estão? Eu não tenho idéia. Isso é porque não colocamos uma posição relativa em nosso contêiner de paralaxe. À medida que descemos, lá vamos nós. Isso parece muito bom. As cores funcionam muito bem juntas. Só temos um e dois mergulhos com as folhas. Agora temos o nosso rato a trabalhar. Vou comentar isso por enquanto. Em vez de ouvir um rato, isso não vai funcionar mais. Vamos começar a trabalhar com um ouvinte de eventos que escuta um evento de rolagem. Como é que fazemos isto? Bem, em vez de ouvir um mousemove na janela, vamos dizer document.AddeVentListener e vamos ouvir um evento de rolagem e vamos dizer handlescroll. Então, para o nosso handlescroll é igual a uma função. Tudo isso deve parecer bastante familiar. Vamos registrar algo para ter certeza de que isso está funcionando. Rolagem. Vamos abrir o nosso console. À medida que rolamos, estamos recebendo um monte de rolagem acontecendo. Agora, como sabemos o quanto estamos realmente rolando? Essa é uma pergunta muito boa. A maneira que vamos fazer isso é que vamos trabalhar fora var ScrolLAMT é igual e vamos para para Document.DocumentElement.ScrollTop. Vamos ver se isto funciona. Vamos dizer Scrollamt e Scrollamt. Vamos abrir o nosso console de novo. Vamos esclarecer isso e enquanto rolamos, aqui vamos nós. Nosso Scrollamt está chegando. O último é zero. À medida que vamos até o fundo, é 951. Esta é a nossa quantidade de pergaminho. Talvez possamos agora descobrir qual é a nossa quantidade máxima de rolagem. Como é que fazemos isto? Bem, novamente, vamos usar este document.DocumentElement. Vamos dizer ScrollMax é igual a document.documentElement.ScrollHeight. Vamos compará-lo assim. Lá vamos nós. Vamos rolar isso. O máximo de rolagem é 1268. Isto não está a resultar, pois não? Mas lembre-se, a altura do documento não será a mesma que a quantidade de rolagem porque ainda temos a altura da janela para uma contagem. Vamos fazer menos window.InnerHeight. Vamos rolar novamente, 951, 951. Lá vamos nós. Temos o nosso valor constante, temos o nosso valor final. Agora podemos pegar esses valores e criar uma entrada a partir deles. Vou copiá-los por enquanto. Vamos nos dar um pouco mais de espaço. Vamos subir para os nossos valores de entrada e vamos dizer Scrolly e vamos criar um novo objeto aqui e vamos dizer começar. Nosso começo será zero. Podemos mudar isso para algum valor além de zero. Mas neste caso, queremos rastrear a posição de rolagem do nosso documento inteiro. Nós então vamos ter um valor final, que vai ser, nosso scroll max. Bem, tudo isso. Agora isso é muito, muito longo. O que podemos fazer aqui é dizer var e podemos dizer, HTML é igual a document.DocumentElements. Lá vamos nós. Então podemos substituir isso e aquilo. Nosso valor final, vai ser isso. Então o nosso Scrollamt, esta vai ser a nossa corrente. Podemos resolver isso um pouco mais tarde. A corrente será zero no início. Também precisamos da nossa fração e da nossa gama. Vamos treinar nossa fração um pouco mais tarde, e vamos trabalhar nosso alcance logo abaixo da entrada. Vamos para input.scrolly.range é igual, e então podemos apenas copiar e colar isso. Scrolly.End menos scrolly.Start. O que nos dará o nosso alcance. Agora, o que é realmente importante sobre o intervalo é que ele irá mudar assim que o valor final do Scrolly mudar e o valor final irá mudar quando o navegador for redimensionado. Vamos atualizar esse valor. Se formos ao redimensionar, o MouSex, Mousey. Vamos e coloque.scrolly.end. Qual era o nosso valor final? Vamos rolar até aqui. Copie e cole isto. Role todo o caminho para baixo novamente. Nosso valor final é atualizado e, em seguida, nosso valor de intervalo também é atualizado. Vamos copiar o cálculo do intervalo Scrolly e vamos colá-lo aqui. Agora estamos vendo HandlesCrolly. Nós temos o ScrolLAMT, que agora é realmente vai ser a nossa input.scrolly.Current. Este vai ser o nosso HTML.ScrollTop. Então nossa input.scrolly.fraction vai ser o quê? Neste caso, vai ser a nossa corrente dividida pelo máximo, então input.scrolly.end. Mas lembre-se de nossos cálculos anteriores, se você pode apenas olhar um pouco mais alto aqui, atualizar entradas, é a nossa fração de mouse de entrada é o nosso mousex.Current menos nosso mousex.Start dividido pela nossa gama MouseX entrada. Vamos copiar este formato. Vamos descer aqui, lidar com rolagem e vamos copiar e colar isso. Isso é mais preciso assim que começarmos a rastrear nosso documento de uma posição diferente de zero para uma posição que não seja a altura total do nosso documento, precisaremos disso para calcular a fração real. Nosso scrolly.fraction vai ser o scrolly.Current menos o scrolly.Start, que neste caso é apenas zero e vamos dividir pelo scrolly.Range, que neste caso também vai ser o valor final Scrolly. Isso é lidar com o pergaminho. Mas agora você pode ser como, bem, por que o outro dentro de entradas de atualização vem com isso lá dentro. Claro que podemos. Vamos fazer isso. Vamos copiar e colar, atualizar entradas para o nosso HandleCroll. Lá vamos nós. Vamos cortar isso, tirar tudo isso, e colocar isso em nossas entradas. Lá vamos nós. Nossa entrada está chegando agora. Como podemos agora conectá-lo a uma saída? Vamos atualizar nossas saídas. Agora vou apenas comentar nossas saídas para que nada funcione. Não está funcionando de qualquer maneira. O que podemos fazer aqui é atualizar nossa posição Y. Nossa output.y.Current é a nossa saída. Y.End menos a nossa entrada. Podemos ir scrolly.fraction, multiplicado pelo nosso output.range. Vamos ver se isto funciona. Enquanto rolamos, alguma coisa está acontecendo? Você está notando alguma coisa? Não, não estou notando muito. Aconteceu alguma coisa aqui? Bem, e quanto às saídas de atualização? O Y.Currents está funcionando? Sim, devia estar a funcionar, mas lembra-te que temos de ligar para as atualizações. Vamos copiar isso ou vamos copiar as saídas de atualização e atualizar cada item de paralaxe. Vamos colocá-lo depois de chamar a atualização e colocar função dentro do nosso manipulador de eventos HandleCroll. Nós também podemos apenas cortar isso e talvez colocá-lo apenas aqui para que fique um pouco mais perto do nosso manipulador de eventos handleMouseMove. Lá vamos nós. Agora, vamos ver o que acontece enquanto rolamos. As coisas estão acontecendo. Você pode ver que a paralaxe certamente está funcionando. Nós temos algum borrão acontecendo, nós temos alguma escala indo, e tudo está relacionado com a nossa posição de rolagem. Conseguimos o que nos propusemos a fazer neste vídeo. Conectamos uma entrada a uma saída usando nossa posição de rolagem. Está parecendo muito bom. Há alguns problemas com isso até agora, porém, vamos cobrir isso no próximo vídeo. Te vejo lá. 11. Valores de entrada únicos para cada elemento: Nossa experiência paralaxe no último vídeo está parecendo muito boa. Mas se você olhar de perto, algo não está bem. Eu vou te mostrar. Se eu ir até a parte inferior do meu documento e eu comentar essas entradas de atualização e atualizar funções de saída, e eu parar de ouvir os eventos de rolagem. Você verá que todas as minhas folhas ou todos os meus itens de paralaxe, eles estão centralizados no meio da página. Então, se eu rolar um pouco para baixo, esses também são. Agora, quando eu voltar no meu código aqui e meu código aqui, você verá que todos os itens de paralaxe estão na parte inferior da página. Por que é isso? Bem, vai haver duas razões para isso acontecer. A primeira razão é que quando nós rolamos para o nosso cálculo atual output.y, você verá que começamos com o yend. Basicamente estamos dizendo, vamos começar com o yend e, em seguida, como o valor da fração aumenta, então vamos ficar cada vez mais perto do valor inicial. Em vez disso, queremos dizê-lo, vamos começar com o valor inicial e à medida que o valor da fração aumenta, vamos chegar cada vez mais perto do valor final. Isso está parecendo um pouco melhor, e agora se rolarmos um pouco mais para cima, veremos que quando definirmos nosso valor inicial, começamos com menos 150. Vamos começar isto no zero. Agora, tudo deve começar exatamente no lugar certo. Quando nós rolamos para baixo, veremos que esses itens neste recipiente rosa, eles não começam em seu lugar original. Isso é tudo o que queremos alcançar neste vídeo. Quando chegamos a um item ou quando rolamos para um item, queremos que ele esteja na posição original. A razão para isso é que, esses itens estão se movendo com base na fração de rolagem de todo o caminho na parte superior para todo o caminho na parte inferior. O que eu quero dizer é, eu só quero que a fração de rolagem seja zero sobre aqui e um sobre aqui, vez de todo o caminho na parte inferior e todo o caminho no topo. Não quero que as saídas de cada item sejam baseadas em toda a posição de rolagem do documento. Quero que se baseie em quando for visível. A pergunta que precisamos fazer é, em que fração de rolagem deve um elemento estar em sua posição original? Porque no momento, eles só estão em sua posição original quando a fração de rolagem está em zero. Então, como resolvemos isso? A chave está em nossa atualização cada função item de paralaxe dentro da matriz de itens para cada loop. Agora, para cada item, estamos realmente indo para criar sua própria entrada, então entrada item. O que poderíamos fazer é que poderíamos realmente codificar cada entrada para cada item, isso levará horas. Vamos usar algum código para resolver isso para nós. Agora, nossa entrada de item, nós vamos ter YsCroll, e dentro de nosso YsCroll, nós vamos ter um começo e nós vamos ter um fim. Atualizaremos esses valores em um segundo. A próxima coisa que precisamos é de um alcance, por isso, se percorrermos aqui, onde vamos realmente calcular o alcance? Bem, é saída, aqui vamos nós, o Scrolly.Range, então vamos copiar isso e trazê-lo aqui para baixo. Em vez de dizer input.scrolly.range, vamos dizer o iteminput.scrolly.range e o iteminput.scrolly.end, menos o iteminput.scrolly.start. Isto é muito importante. Isto significa que podemos especificar um início e um fim para cada item. Agora podemos codificar um valor. Em vez de ser zero, poderíamos dizer, em 450, aqui é onde eu quero que minha fração zero seja e minha fração final, eu quero que seja em 800. Quando eu rolei 800 pixels para baixo na página, eu quero que minha fração seja um, e quando eu rolar 450 pixels para baixo na página, eu quero que minha fração seja zero. Vamos começar a desconectar alguns valores. O que eu vou fazer aqui é eu vou entrar no meu HTML e eu vou comentar um monte desses divs, só que nós temos um div para trabalhar com. Isso significa que só teremos um conjunto de registros chegando. Então, enquanto eu percorro, isso está funcionando? Não se parece com ele, talvez não esteja rolando tão bem. Podemos apenas verificar se não há erros. Existem alguns erros, então basta clicar nisso. Vamos dizer, iteminput.scroll.end, isso é porque escrevemos Scrolly de forma diferente para YsCroll. Vamos mudar Yscroll para Scrolly, lá vamos nós. À medida que rolamos para baixo, veremos que nossa folha está fazendo algum movimento leve. O que temos aqui é temos o nosso alcance de pergaminhos. O que mais precisamos fazer agora? Precisamos descobrir nosso valor de fração. Onde é que calculamos o nosso valor de fracção? Bem, nós resolvemos isso aqui. Nós temos nossa fração Scrolly, então vamos copiar e colar isso, e vamos dizer iteminput.scrolly.Fraction é igual, e isso é realmente importante. Nós ainda vamos baseá-lo fora da input.scrolly.Current global, que é baseado na rolagem de páginas, mas nós vamos dizer menos o iteminput.scrolly.start, e nós vamos dividi-lo pelo iteminput.scrolly.range. Super importante. A próxima coisa que precisamos fazer é descobrir uma nova saída. No momento, estamos usando as saídas globais e estamos fazendo alguns cálculos aqui. Vamos para nossas saídas, e veremos que outputy.Current é calculado aqui. Então vamos apenas criar uma nova variável aqui, e vamos dizer se o nosso ItemOutputyCurrent, porque temos um ItemOutput já. O fato de que só precisamos de um valor significa que não temos que usar um objeto, e aqui podemos dizer outputy.Start, que é ótimo porque nós ainda vamos usar nossos valores outputy.Start e end, e em seguida, em vez da rolagem de entrada fração, vamos para a fração de rolagem de entrada do item. Então temos o nosso ItemOutputyCurrent, agora podemos aplicá-lo ao nosso valor y aqui em baixo. A coisa é que, nossa output.y.current, atualmente é um pouco imprecisa. Se nós rolamos para baixo, e talvez possamos apenas comentar esses elementos de volta. Como nós rolamos para baixo, você não pode realmente vê-lo tão bem aqui, então vamos aumentar nosso valor final para algo como 3.000. À medida que rolamos para baixo, você verá que os itens que estão mais distantes estão realmente se movendo rapidamente. Nós realmente não queremos que eles se movam rapidamente ou parecem estar se movendo rapidamente. Se mudarmos isso para 1.000, talvez você possa ver um pouco melhor. Conforme eu rolar para baixo, eu realmente não quero que os itens que estão mais longe apareçam como se estivessem se movendo mais rápido. Como dissemos no vídeo anterior, eu realmente quero que os itens que estão mais longe se movam mais rápido na direção oposta, o que significa que enquanto eu rolar para baixo e o documento se move para cima, eu quero que os itens que estão mais para trás para mover para baixo a uma taxa mais rápida. Vamos tentar isto. Aqui em baixo, onde estamos a trabalhar a nossa posição. Em vez de começar com as correntes y e minusing a corrente y multiplicada pela profundidade, vou começar com as correntes y e multiplicar a profundidade. Isso significa que quanto mais profundo for, mais rápido ele vai se mover. Vamos tentar isto. Enquanto eu percorro, algo acontecendo? - Não. Isso é porque ainda estamos usando nossa corrente y de saída. Vamos usar o nosso item de saída y atual, e isso vai ser por item. Lá vamos nós. Vamos começar em uma faixa de 450 e terminar em uma faixa de 800. Agora, enquanto eu me mover, vocês verão que as coisas estão um pouco melhores, e como estamos rolando entre 450 e 800, não precisamos usar esse valor enorme aqui, então podemos mudar isso de volta para 300. Enquanto rolamos, lá vamos nós. As coisas estão um pouco melhores. Se mudarmos para 500, talvez possamos ver um pouco mais. À medida que rolamos, você verá que o item superior está realmente indo com a página enquanto ela rola para cima. Então os itens que estão mais longe estão realmente se movendo para baixo enquanto estamos rolando para baixo. A página está subindo, estamos rolando para baixo e os itens que estão mais distantes estão rolando para baixo, movendo-se para baixo na mesma velocidade ou mais rápido do que os itens que estão mais próximos de nós. É um pouco complexo. Agora vamos voltar ao nosso ciclo. O que está acontecendo aqui é que estamos definindo o início e o fim. Eu só vou comentar essas duas seções novamente. Só temos uma folha ou um item de paralaxe. Podemos realmente fazer algum registro de console aqui. Vou copiar isto. Eu vou então para a nossa entrada. Vou então registrar nosso pergaminho atual. Vamos para o pergaminho e depois vou copiar isto e colar isto. Vamos abrir um console e depois não queremos mais a profundidade. Mas o que queremos é que queremos a fração. Vamos registrar isso. Lá vamos nós. À medida que percorremos este item, quando estivermos aqui, você verá que a fração é negativa de 1,26. Estranho? Mas veja isso. À medida que rolamos e você verá que a posição de rolagem está aumentando, você verá que o valor da fração está realmente próximo agora. Quando chegarmos a um valor de 450, lá vamos nós. A fração é zero. Quando você chegar a um valor de 800, você verá que a fração vai para um ou um pouco acima de um. Isso significa que Ele está se movendo entre o valor inicial e final que nós especificamos em nossa saída. Como mover entre zero e 500, entre um intervalo ou um intervalo de rolagem de 450 e 800. Isso é super, super legal. Agora não queremos que cada item comece em 450 e termine em 800. Queremos começar onde é visível e terminar quando não é visível. Como é que fazemos isto? Bem, uma das melhores maneiras que podemos fazer isso é dizer, Item.OffsetParents.OffsetTop. Um pais compensados é muito importante. Em nosso CSS, você verá que nossa posição relativa é declarada. Isso significa que este é um pai de deslocamento. Significa que qualquer coisa que tenha uma posição além da estática é um pais compensados. Dentro de nosso contêiner de paralaxe temos nossos itens de paralaxe. Um item de paralaxe dirá: “Quem são os meus pais?” e o contêiner de paralaxe dirá: “Eu, eu sou”. Então vamos trabalhar fora o topo offset, a distância do recipiente de paralaxe para o topo do documento, e esse será o nosso valor superior que é muito legal. A próxima coisa é sentar no fim. Pegaremos isso e faremos com que seja o nosso fim, mas vamos adicionar a janela. InnerHeight, assim. Vamos dizer, vamos começar no Offsetparents.Offsettop. A distância entre os pais de deslocamento e a parte superior do documento e o final será essa distância entre a parte superior dos pais e a parte superior do documento mais a janela.InnerHeight. Muito legal. Confira isso. Enquanto eu rolar, eu deveria chegar a cerca de aqui, que é uma fração de zero, posição de rolagem de 319. Este é o lugar onde nosso item de paralaxe vai estar. Vamos fechar isso, e faremos exatamente o mesmo aqui. Confira isso. Muito legal. Se nós apenas desfazer e desfazer, basicamente comentando em todos os nossos itens de paralaxe. Agora, vai começar no meio aqui. Enquanto nós rolamos para baixo, você verá que quando chegarmos a esta posição aqui, hey, ele também vai estar no centro exatamente onde nós colocamos originalmente o que é fantástico. Se você não quiser usar o OffsetParents.OffsetTop, tudo bem. Mas o que é realmente importante é que você use algo que não muda sua posição porque se você está calculando dinamicamente os valores inicial e final e você está baseando em algo que está mudando seu OffsetTop, As coisas podem ficar muito, muito confusas e confusas muito rapidamente. Desta forma, se tivermos que copiar e colar um monte desse código e colocá-lo em nosso próximo contêiner de paralaxe e nosso próximo contêiner de paralaxe. Podemos mudar um monte desses valores. Podemos mudar isso de ativo um para talvez 60 e 61 e 67. Vamos descer aqui, vou mudar isto para 2-1 e para zero. Vamos mudar isso para 11-21-41. Enquanto rolamos para baixo, vamos ver o que acontece. Tudo bem. Todos eles aparecem exatamente no lugar certo como chegamos ao pai deslocamento estar na parte superior da tela que é fantástico. Isso é muito legal, e eu encorajaria você a usar que offsetParents.OffsetTop para obter as coisas para ser exatamente onde você defini-los originalmente. Claro que você não precisa usar escala e você não precisa usar borrão. Eles só fazem as coisas parecerem um pouco mais realistas. Isso é basicamente tudo que você precisa saber sobre rolar paralaxe e usar o efeito de paralaxe com um mouse mover eventos. Bem feito. Vou mostrar-vos mais algumas coisas antes de programar uma experiência inteira, não são apenas exemplos. Doce, te vejo no próximo vídeo. 12. Usando o mouse e a posição de rolagem: Você pode estar se perguntando se você pode usar a posição do mouse e a posição de rolagem juntos para alterar o efeito Parallax. A resposta é, sim. Neste vídeo, vou mostrar-lhe como. Se percorrermos todo o caminho até o fundo, vamos descomentar nosso pedaço de código que comentamos. Estamos basicamente dizendo, “Vamos ouvir o evento de movimento do mouse de novo”. Felizmente, não removemos nenhum dos nossos códigos. Só precisamos nos mudar para cá. Podemos apenas comentar isso de volta. Mas o nosso ycurrent foi alterado para fazê-lo funcionar para a posição de rolagem. O que nós vamos fazer é, nós vamos subir aqui e nós vamos colocar em um novo valor. Vamos colocar em um objeto assim, e eu vou apenas copiar a corrente de início e fim de x, e o y que vamos chamar Scrolly. Agora precisamos criar, copiar e colar um monte de valores que usaram a posição y em todo o nosso código. Vamos começar por aqui. Podemos dizer Scrolly, e vamos atualizar isso. Então tem um monte de entradas, o que é ótimo. Em seguida, a nossa saída aqui, podemos atualizar entrada Scrolly, Output.Scrolly intervalo. Então temos a nossa saída. Scrolly start, output.Scrolly intervalo. Acho que é só isso. Fantástico. Vamos verificar se isso está se movendo. Você pode ver que isso está respondendo ao movimento do mouse no eixo x e ele está respondendo ao nosso rolagem no eixo y. Agora o que eu quero que aconteça é, enquanto eu rolar para cima e para baixo, e à medida que eu movo o mouse para cima e para baixo, eu quero que o eixo y ou o eixo vertical responda a ambos. Como é que fazemos isto? A chave está neste pedaço de código aqui. Este pedaço de código que acabei de destacar, este é o nosso pedaço de código de rolagem. A próxima coisa que eu quero adicionar aqui é algum código que removemos no vídeo anterior. Eu vou dizer output.y.current, e talvez você possa apenas certificar-se de que isso está tudo preparado para que saibamos que estes são separados. output.y.current, eu vou dizer menos, e preparar isso novamente, output.y.current multiplicado pela profundidade. Nós temos o nosso valor de rolagem aqui, e então nós temos o nosso valor do mouse aqui, e nós estamos adicionando-os juntos. Confira isso. Agora, enquanto eu rolar, parece muito bom. - Legal. Às vezes, esses itens de paralaxe invadem as outras áreas de itens de paralaxe. Uma maneira muito fácil de corrigir isso é ir para o seu CSS, e podemos dizer contêiner de paralaxe, podemos apenas definir isso para estouro oculto. Assim, quando rolamos, ele se esconde atrás. Lá vamos nós. É assim que você usa a posição do mouse e a posição de rolagem no mesmo documento. É muito legal, muito divertido usar os dois ao mesmo tempo. 13. Código de outras pessoas: Vamos falar sobre o uso de código que você não escreveu. Isso pode ser usando um plugin, usando algum código que você copiou da internet, ou usando algo como jQuery. Muitos plugins e frameworks são simplesmente incríveis. Eles são feitos por pessoas super inteligentes e isso torna nossas vidas muito mais fáceis. É como terceirizar parte do seu código para outra pessoa. Existem plugins feitos para desenvolvedores e plugins feitos para o público em geral. Plugins para desenvolvedores tornam a codificação mais fácil e mais padronizada. Eles também tendem a se concentrar em partes específicas do processo e permitem que você lide com o resto. Plugins que são feitos para o público em geral ou plugins que dizem: “Nós fazemos tudo!” e geralmente bastante cético, e você pode ter que passar horas lendo sua documentação e diretrizes para fazer qualquer coisa funcionar. A desvantagem para a maioria dos frameworks e plugins é que parte do tempo você não precisará usar tudo o que ele tem para oferecer. Esta é a equivalência de comprar um conjunto de ferramentas e usar apenas um martelo. Além disso, se o plugin que você está usando não faz exatamente o que você quer, então você está preso. Você terá que começar do zero. Tudo que você tem que fazer algum hack-work que muitas vezes acaba levando muito mais tempo do que um bom planejamento e código escrito à mão. Depois há um código escrito por outras pessoas. Você pode encontrar esse tipo de código em meio, em postagens de blog, em Stack Overflow, onde quer que seja. Às vezes este código é fantástico, nada de errado com ele, é incrível. Outras vezes não é nada bom. O melhor tipo de código para você é o código que você entende e você se certifica de que ele funciona para o seu projeto e seus navegadores que você está tentando suportar. 14. Como juntar tudo: Eu mostrei um monte de coisas, muitas sobre entradas, saídas, e o efeito de paralaxe. Agora é a sua vez de criar algo. Não se pressurize para criar um grande site usando tudo o que aprendeu na aula. Pegue partes do que lhes mostrei e faça um pequeno projeto ou faça alguns pequenos projetos, ou apenas trabalhe nele diariamente. Quando estiver pronto para compartilhá-lo com sua mãe, com o mundo e conosco, então envie através de um link de algo que você criou. Ele pode estar no CodePen ou pode ser hospedado usando Surge, GitHub Pages ou até mesmo seu próprio site. Se precisar de ajuda, lembre-se de compartilhar um link para seu código. No resto deste vídeo, vou criar um pequeno projeto próprio usando algumas coisas que ensinei na turma. Incluí isto para te mostrar que não sou perfeito. O desenvolvimento é difícil. Verá que cometi erros e que às vezes esqueço coisas muito importantes. Mas espero que isso mostre como o desenvolvimento real acontece e espero que isso inspire você a criar, a jogar e a experimentar sem a pressão para ser perfeito. Eu vou dar uma olhada rápida no meu planejamento e o que eu tenho é um recipiente com um monte de folhas diferentes nele. Todas essas folhas serão itens de paralaxe. Eles vão ter profundidades diferentes. Eles vão ficar um pouco borrados às vezes, mas eles não vão ser escalados. Eles vão ter talvez uma largura aleatória e altura, e cada folha vai ser gerado aleatoriamente por JavaScript porque eu não me sinto como colocar em, que muitas folhas dentro do meu HTML e eu definitivamente não sinto como estilizando-os. Eles vão ter uma rotação aleatória, uma desfocagem aleatória ou uma profundidade aleatória, e todos eles vão ser itens de paralaxe. Em seguida, em cima deste contêiner, haverá uma fábrica de paralaxe com entradas de e-mail e um botão de inscrição e será isso. Vamos começar rachando. O que eu tenho é que eu tenho um par de valores de cor que eu realmente gosto. Vamos começar com este corpo. Eu quero um corpo escuro, então talvez vamos para preto, bgc, pode ser preto e também eu vou definir uma margem para zeros. Não há margem ao redor do meu corpo. Vamos dar um exemplo, folha indo e seu de um recipiente de paralaxe. Dentro do meu contêiner de paralaxe eu quero um item de paralaxe, em seguida, dentro daqui eu poderia ter uma imagem, mas eu vou realmente colocar a imagem no fundo. Vamos para a folha. Então ele vai ter uma imagem de fundo aleatória. Mas vamos fazer isso tudo em CSS, item de paralaxe e contêiner de paralaxe. Vamos copiar estes para o meu CSS. Assim. Isto vai ter uma largura de 100 vh e, em seguida, altura de 100 vh, minha largura seria um 100 vw na verdade. Então 100 vw, 100 vh para o meu contêiner de paralaxe na posição de relativo. Então meu item de paralaxe estará na posição absoluta. Então, por enquanto, podemos ter uma largura de 300 pixels, altura de 300 pixels, e podemos ter uma margem superior de menos 150 pixels. Não, acho que não precisamos disso, só precisamos disso. Temos a nossa posição, temos a nossa largura, temos a nossa altura. Do que precisamos a seguir? Posição absoluta, talvez você possa dizer, top de 50 por cento e esquerda de 50 por cento. Topo, largura esquerda, altura. Vamos para a nossa folha e isso pode ter uma largura de 100 por cento e uma altura de 100 por cento. Ele pode ter um plano de fundo, e o plano de fundo vai ser um URL. Um dos bens vai ser uma dessas folhas. Vamos apenas copiar este, colá-lo lá, e ele vai dizer centro sem repetiçõese, em dizer centro sem repetições seguida, o tamanho do plano de fundo pode ser conter. Já gosto disso. Vamos verificar novamente se isso é realmente o que queremos. Vamos para uma cor de fundo de amarelo. Sim, isso parece legal e, em seguida, meu item de paralaxe, top 50%. Lá vamos nós. Isso é legal. Vamos aleatorizar o topo e a esquerda de cada item. Todos eles vão ter cerca de 300 pixels de altura e largura. Podemos mudar isso para torná-los maiores e menores. Você pode tirar isso daqui. Agora, vamos entrar em um pouco de Javascript, mas o que eu quero fazer aqui, bem, eu quero configurar todas as minhas folhas. O que vou fazer aqui é gerar aleatoriamente um monte de folhas e manchas diferentes, o que seja. Vamos para um monte de discussões. Vamos fazer alguma coisa. Vamos var i é igual a 0. Então eu vou dizer, enquanto eu é menor que, digamos 10 por agora, então eu vou dizer i plus, que significa que aumenta em valor. Talvez você possa fechar isso, isso não é tão chocante quanto estamos digitando. Dentro daqui, o que eu quero fazer? Para escrever alguns comentários. Bem, em primeiro lugar, eu quero criar um novo elemento, criar uma nova folha para elementos internos, em seguida, adicionar elemento ao recipiente. Depois disso, quero dizer largura aleatória, altura, profundidade. O que mais eu quero, rotação, imagem de fundo. Em seguida, ajuste o desfoque na profundidade. Isso parece muito bom. O que eu vou fazer aqui é rapidamente colocar um id neste div e vai ser um recipiente de paralaxe. Eu também quero adicionar os nomes das classes. Vamos tentar isto. O que eu quero fazer aqui é dizer var recipiente paralaxe é igual documento ponto get elemento por Id e este vai ser o meu recipiente de paralaxe. Crie um novo elemento com um nome de classe de item de paralaxe. Vamos para documento ponto criar elementos, e eu quero ser um div e vamos dizer var item. Então o que vamos fazer é dar a esse item um nome de classe. Vamos fazer a mesma coisa aqui, então vamos criar uma folha e dizer que esta é uma folha. Em seguida, vamos adicionar a folha para os itens, então ponto item anexar folha filho , em seguida, adicionar elemento para conter. Parallax ponto recipiente adicionar append filho e vamos colocar no item. Vamos ver se isso funciona agora. Tenho dois aqui. Tenho um monte de folhas acontecendo aqui, isso é fantástico. A próxima coisa que eu quero fazer é apenas verificar se estes são todos realmente posicionados absoluta. Parece que deveriam estar. Vamos apenas clicar com o botão direito e inspecionar a folha. Todas as folhas estão sendo adicionadas ao recipiente de paralaxe e há apenas um item de paralaxe. Dizendo criar elemento, que é um item documento ponto criar elemento div, o nome da classe item é folha. O nome da classe do item é item de paralaxe, nome da classe ponto da folha é item anexado folha filho e, em seguida, o contêiner de paralaxe pinça item alt. Se clicarmos com o botão direito neste agora, devemos ver um monte de itens de paralaxe todos com folhas dentro deles. Isso é ótimo. A próxima coisa que quero fazer é obter uma largura aleatória, altura, profundidade, proporção, imagem de fundo, tudo isso. Vamos para o item estilo ponto largura ponto é igual a 300 altura. Vamos para profundidade, rotação e imagem de fundo, então altura. Então vamos para a profundidade e depois rotação, então este será profundidade. Este será um conjunto de dados ponto profundidade ponto, então nós vamos dizer rotação. Isto não vai estar lá, vai ser transformado e em seguida, o final será uma imagem de fundo, então imagem de fundo e nós vamos obter esta imagem de fundo aqui. Então precisamos de um número aleatório, então eu vou criar var número aleatório igual matemática ponto aleatório. Então nossa largura vai ser, vamos para 600 multiplicado pelo número aleatório, que nos dará um valor entre zero e 600 e depois mais 300. Se for zero, então serão 300 ou talvez você possa dizer mais 200, e talvez possamos dizer que este é 500. Obviamente, eles vão ser trabalhados primeiro, então vamos apenas dar-lhes algumas chaves, a profundidade vai ser um número aleatório, e isso vai ser apenas entre zero e um. Então eu me transformo. O que queremos aqui? Queremos algo entre 0 e 360. Vamos para 360 multiplicado por um número aleatório e, em seguida, nossa imagem de fundo, queremos um destes entre 1 e 91. Vamos experimentá-lo. Para o meu número de imagem BGIMG, eu quero meu número aleatório multiplicado por 90. De qualquer forma, entre 90, mas eu vou dizer, bem, vamos ver o que realmente é. Vamos apenas colocar em dois por enquanto, número de imagem BGimG. Vamos abrir a consola, por isso estamos a 64 pontos. O que podemos fazer aqui é que você pode dizer matemática ponto round e isso vai nos dar seis. Fantástico. Por que não desligamos isso? Número BGimg log ponto console e isso deve nos dar um monte de números BGIMG diferentes. Isso parece muito bom e muda para 91 eu acho, deve ficar tudo bem. Então podemos colocar nosso número BGimG aqui e poderíamos ter feito o mesmo com este cálculo aqui, talvez devêssemos tentar isso. Vamos colocar isso aqui em cima. Vamos tirar isso daqui e digamos girar o número e copiar e colar isso. Podemos fazer o mesmo com tudo isso, mas às vezes é desnecessário. Não parece que estou recebendo plantas aleatórias, não, realmente não. A imagem de fundo realmente existe? Clique com o botão direito aqui e inspecionar item de paralaxe, isso é porque precisamos colocá-lo em nossa folha. Vamos dizer item de fundo de ponto de folha, ver se isso muda alguma coisa, div ponto estilo ponto de fundo imagem. Profundidade pontilhada, transformar girar. Talvez precisemos fazer alguma pesquisa sobre como colocar uma imagem de fundo em um item com JavaScript. Vamos para imagem de fundo JavaScript. Imagem de fundo. Porque não colocamos um URL. Vamos tentar isso. Eu vou dizer URL, e como alguns ou assim. Que tal isso? Não entendo o que está dizendo. Todo esse URL, um desses, vamos colocar isso aí. Parece que temos algumas imagens de fundo aleatórias. Fantástico. Muito obrigado escolas W3. Boom, o que vem a seguir? Bem, temos de resolver a nossa desfocagem. Vamos para item.style.filter é igual a desfoque de 20 pixels. Há um monte de borrão acontecendo lá, e nós já temos nossa profundidade. Onde está a nossa profundidade? Aqui está a nossa profundidade. Talvez possamos dizer var profundidade é igual a RandomNum, e podemos dizer, ok, o que é que eu vou desfocar valor? Var borrão é igual à nossa profundidade. Precisamos de um valor inicial aqui, então eu vou dizer output.blur.start e, em seguida, multiplicar pela output.blur.range. Agora, obviamente não temos esses valores, então vamos configurá-los. Ele vai dizer set up output e a saída var é igual, e nossa saída vai ser borrão, e nós vamos ter um início de 0.2 e o intervalo de 20. Que tal isso? Início e intervalo de desfoque de saída. O que acontece se mudarmos para cinco? Então o que acontece? Se temos que dizer começar em um, estou esperando que todos eles não sejam embaçados. Isso não está funcionando. item.style.filter desfoque 20 pixels, isso é porque é tudo apenas 20 pixels lá. Vamos mudar isso para um valor de desfoque. Lá vamos nós e podemos colocar para fora borrão aparecer com todas as outras variáveis. Vamos mudar nosso início para 0.2 novamente e nosso alcance para 20. Com sorte, veremos alguns deles sendo desfocados e alguns deles não. Então talvez eu possa mudar minha largura para, eu não sei, 50. Entre zero e 500 e sim, o mínimo será 50. Item.Style.Desfoque de filtro, você pode colocar isso lá em cima. Parece muito bom até agora. O que mais precisamos fazer? Eu tenho um borrão, eu tenho um aleatoriamente para spludge, Eu tenho largura e alturas aleatórias, Eu tenho profundidade e borrão aleatórios. Acho que preciso de uma posição aleatória. Acho que não coloquei isso na verdade. Vamos para item.style.top é igual e podemos dizer, onde está este RandomNum multiplicado por, e podemos dizer window.InnerHeight. Legal, e, em seguida, window.InnerWidth para o meu valor esquerdo, e, em seguida, vamos apenas adicionar um pixels para isso. Então talvez precisemos de contornar isto. Não tenho certeza, mas vamos fazer isso de qualquer maneira só para que não tenhamos nenhum valor de pontos. Vamos inspecionar isso. Agora, transformamos filtros para o canto superior esquerdo. Um monte de coisas acontecendo. Bem, isso é fantástico. Mas talvez nós também podemos apenas dizer Math.Round menos 200 também, e isso é apenas para que o item é ir um pouco para a esquerda e um pouco para o topo. Caso contrário, eles sempre vão para a direita e para a parte inferior da página. Então também podemos colocar um estouro escondido em nosso contêiner de paralaxe para que não tenhamos barras de rolagem. Temos posições aleatórias agora, acho que precisamos fazê-las se mover. Vamos fazê-los se mexer. Vamos configurar nossa entrada e compartilhar. Talvez possamos dizer HTML de configuração. Nós vamos adicionar os ponto-e-vírgula também. Nossa entrada será MouSEX e Mousey. Então nós vamos ter, eu vou começar em zero e eu sempre faço aquela window.InnerWidth, e então nossa corrente. Podemos apenas começar em window.InnerWidth multiplicado por 0.5, e então precisamos de um intervalo que irá funcionar depois. Podemos copiar e colar isto. Então dizemos input.minusX.range é igual a input.mousex.end menos. Vamos copiar e colar isso. Comece. Essas coisas estão me assustando. Temos nossa configuração de entrada. Agora, o que vem a seguir é que precisamos fazer nossos ouvintes de eventos. Então talvez possamos apenas esconder isso por enquanto, e podemos dizer window.AddeVentListener, e podemos dizer mousemove, handleMove. Em seguida, também podemos adicionar um redimensionar, redimensionar alça. Redimensionar e não sei bem por que eu falei com essa alça. Mas eu lidei com o Move. Podemos dizer HandleSize. O que precisa acontecer no nosso redimensionamento. Temos de fazer o nosso alcance. Vou acabar com o nosso alcance, isso é bom. Então eu vou lidar com o MouseMove. O que acontece no agora HandleMouseMove? Precisamos fazer fração de entrada e atual, e, em seguida, saídas atuais e, em seguida, aplicar ao HTML. Vamos para o nosso UpdateInputs, que é uma função, e podemos simplesmente copiar e colar isso e dizer UpdateOutputs, assim, e então podemos dizer UpdateParallaxItems. Podemos copiar e colar estes, fantásticos. O que primeiro precisamos fazer em atualizações-insumos é, correntes e nossa fração. Vamos fazer isso, atualize-inputs. O que vamos conseguir é, obter nossos eventos e dizemos mouse dot x é igual ao cliente de ponto de evento X. Ainda não configuramos nosso mouse, então não podemos fazer isso. Var mouse é igual a 0 ou talvez você possa dizer, largura interna do ponto da janela multiplicada por 0,5. Podemos copiar isso para o nosso valor y e dizer alturas internas. Se apenas cortarmos isso e colocá-lo no topo, nós podemos realmente referenciar isso, então é um mouse dot x e mouse dot y. A próxima coisa que precisamos fazer é copiar e colar isso, mouse dot y é nosso cliente Y. A próxima coisa que precisamos fazer é, nós somos valores de fração de corte, então nós vamos e realmente isso não vai aqui, isso vai para baixo aqui, e isso vai para baixo aqui, lá vamos nós. Então nós podemos realmente atualizar nossos valores atuais de entrada mouse X ponto atual é igual a mouse ponto x, e colocar ponto mouse mouse Y, a corrente vai mouse ponto y. então nosso valor de fração, entrada ponto mouse X ponto fração, e isso é igual corrente menos início dividido por intervalo. Colocamos isso dentro de aparelhos, e mudamos para o mouse Y. Fizemos nossas entradas, isso é ótimo. Agora saídas. O que vamos fazer pelas nossas saídas? Bem, nós precisamos fazer são x e y. Vamos para o ponto de saída x. Nós temos um x ainda? Não, nós não, então a escala para x, e nós teremos um começo de menos 150, e um fim de 150, e então uma corrente de zero. Vamos copiar e colar isso, e mudar isso para y e então vamos apenas copiar e colar isso, e muda para x, x, x e isso para y, y, y, e isso para saída. Já. Agora temos nossa saída x e y. A próxima coisa que precisamos fazer é realmente continuar aqui e dizer, ponto atual é igual, e nosso valor atual vai ser entrada ponto mouse-x ponto fração multiplicada pela saída ponto x ponto intervalo. Muito legal. Provavelmente não precisamos fazer isso, mas vou fazer de qualquer maneira. Isso torna a vida um pouco mais fácil, então a fração do mouse e o ponto de saída do intervalo y . Agora colocamos nossas saídas. A próxima coisa é, precisamos aplicar ao HTML. O que eu fiz aqui foi, eu configurei o HTML, mas eu não adicionei a uma matriz. Digamos, itenss-array é igual a uma matriz em branco. Então o que eu quero fazer é, var item quando eu criá-lo, e eu faço o nome da classe, e eu vou dizer itenss-array dot push, e eu vou apenas adicionar este item para essa matriz. Então eu posso referenciá-lo mais tarde, então items-array, vamos até aqui. Items-array ponto forEach, e dentro deste ForEach fornecer um item de função e k ou item e i. Então o que eu posso fazer é, eu posso criar um var Item-saída é igual a um objeto, e haverá um x, haverá um y. Isso realmente vai ser isso, apenas meu x e y. Então eu vou dizer estilos de ponto item transformar pontos é igual a traduzir, e então vamos dizer 20 pixels, 20 pixels. Então eu também vou ter uma profundidade, então var profundidade é igual a ponto ponto ponto ponto ponto profundidade. Vou dizer ParseFloat. Provavelmente não precisamos fazer isso porque estamos gerando esse número aqui. Poderíamos armazenar isso no item em si, mas acho que esta é uma boa maneira de colocá-lo em HTML, e trazê-lo de volta apenas para cimentar o que vocês aprenderam durante a aula, então essa é a nossa profundidade. Nós só vamos colocar nesse valor 10. Temos a nossa profundidade, temos o nosso item de saída. Vamos tornar isto dinâmico. Vamos começar com nosso ponto de saída x-current e depois multiplicá-lo por nossa profundidade. Então as coisas assim, alguém parece um pouco fora. Acho que tenho a ver com este valor aqui em cima. Eu acho que eu poderia realmente ter que começar com saída ponto x ponto start mais este valor. Isso parece certo e então faremos a mesma coisa aqui. Uma vez que este será o nosso valor y, ainda coloque chaves por aqui. Então o nosso x seria a nossa corrente de ponto de saída x [inaudível] atualmente é, multiplicada pela profundidade. Vamos verificar novamente. Agora vamos copiar e colar isso. Corrente de ponto de saída y, é praticamente a mesma coisa. Então podemos colocar isso para ponto x e, em seguida, copiar e colar tudo isso. Digamos ponto de saída do item y. espero que isso funcione. Um monte de coisas não acontecendo, não parece que ele está mesmo reconhecendo que eu estou movendo meu mouse, então vamos para View, Developer Javascript Console, não pode definir a transformação de propriedade de indefinido. Isso é estilos de ponto de item. Styles definitivamente não funciona, então vamos para o estilo de ponto do item. Guarde minha caneta, então as coisas estão funcionando aqui. Pode realmente remover isso, então vamos apenas comentar isso. Parece que há muita rotação acontecendo aqui. Vamos verificar nossa rotação. Nossa rotação eu acho que não está funcionando, porque nós definimos para o nosso item. Quando fizemos essa rotação, cada vez que essas imagens se movem para cá, significa que sobrescreve isso. Vamos mudar isto para a nossa folha. Talvez possamos apenas derramar o borrão um pouco. Vamos para a saída desfocada, vamos fazer este 10, e mudar isso para cinco. Então, onde eu configurei o meu HTML, eu vou talvez mudar isso para 50, isso agora vai ser 50 folhas e manchas e qualquer outra coisa. Não parece que estejam posicionados aleatoriamente. Parece que eles são apenas posição de cima esquerda para cima direita. É estranho. Se formos para cima e esquerda, InnerHeight, InnerWidth , sim, isso é apenas estranho, então vamos registrar isso, digamos i, dimensões, eu vou apenas para cima e esquerda. Então vamos para o nosso Console Javascript do Desenvolvedor. O problema é que, o que está acontecendo é, à medida que os itens aumentam, modo que os valores superior e esquerdo aumentam, dando assim mesmo se espalham de cima para baixo direito. Então o que eu vou fazer aqui é, em vez de confiar neste número aleatório aqui, eu vou apenas copiar e colar isso e usar RandomNum exclusivo para o canto superior esquerdo, a transformação, a largura e a altura. Na verdade, vou usar o Math.Random por todo o programa. Então vamos dizer, RotaNumber. Vamos colocar isso lá em baixo também. Então, RandomNumber, você existe mais? Profundidade ainda é Randonumber. Ou podemos mudar isso e deve ser isso, sem mais números aleatórios. Então agora temos um monte de folhas, o que é muito legal. Eles se movem muito, algo não parece certo aqui. Qual é o problema? Bem, eu acho que tem algo a ver com a nossa corrente que começamos do início, e então estamos dizendo o MouSex. fração, multiplicada pelo intervalo a partir do intervalo. Então talvez possa dizer fim - e fim -, e ver como isso funciona. Então o nosso x é a nossa saída x.current multiplicada pela profundidade. Isso parece muito melhor. Bonito disso. Vamos mudar nossos valores de golpe novamente. Comece em 0,5, bem digamos começar em 0,35 e nosso alcance pode ser até 16, e a única coisa que não fizemos é nosso Z e X, então precisamos fazer nosso Z. Então podemos trabalhar isso e dizer var zIndex é igual ao nosso intervalo Z. Então podemos dizer, output.z.range, que ainda não configuramos, menos nossa profundidade multiplicada por output.z.range, vamos fazer isso. Dez mil, isso parece muito bom. Então alcance. Agora vamos defini-lo item.style.zIndex é igual a zIndex. Então, você viu o que aconteceu lá? Redimensionar as coisas não funcionam muito bem. Vamos atualizar isso. Então, no meu redimensionamento e no intervalo, vamos para input.mousex.end é igual a window.InnerWidth. Mousey é InnerHeight. Então podemos copiar e colar não a nossa saída, mas os nossos intervalos de entrada aqui em baixo. Vamos ver se funciona melhor. Isso parece muito bom. Mas é um pouco de uma bagunça. Então talvez eu possa selecionar minhas imagens um pouco melhor, ou talvez possamos apenas reduzir o borrão novamente. Alguns deles aqui a partir de 0.2 e digamos 10. Sim, é bastante aleatório sobre o que aparece, e eu aposto que se eu tirar todo o borrão fora, seria muito mais performance. Então, se formos e encontrarmos o borrão. Então style.blur ou style.filter, este aqui. Apenas comente isso. Isso é muito melhor. Eu me pergunto se eu posso mudar isso para uma porcentagem, o topo e a esquerda em vez de ser pixels reais. Então vamos mudar isso para um percentual. Então Math.Random multiplicado por 100, menos, digamos 10, e isso significa que ele funcionará independentemente da altura e largura da janela e se ele for redimensionado. Vamos mudar a quantidade de elementos que temos que como 100 ou algo assim. Talvez possamos até dizer menos um pouco mais aqui, então menos 20 por cento. Sim, isso parece muito bom. Eu gostaria de ver quantas folhas eu posso realmente colocar aqui. Talvez vamos para 150. É como uma selva virando aqui, sim, isso é muito legal. Talvez possamos diminuir essa pontuação 130. Há muito movimento acontecendo aqui. O que eu preciso fazer agora, eu preciso colocar no resto do meu HTML. Vamos para ParallaxContainer, e em cima disso, eu vou colocar no meu contêiner de formulário, na verdade eu soletrar recipiente direito. Aqui dentro eu vou ter um formulário, e dentro do meu formulário, eu vou ter uma entrada com um tipo de texto. Não preciso de uma identificação de nome agora. Em seguida, um tipo de entrada de enviar. Dizemos, Cadastre-se e pode dar como um valor de espaço reservado de, Endereço de e-mail. Fora do nosso formulário, podemos ter um ditado h1, Parallax Plants Newsletter e h2 diz: Por favor, inscreva-se. Agora podemos apenas estilizar isso. Vamos para o nosso contêiner de formulário, e vamos dizer que a largura é 100%. Vamos dizer que a altura é 100 por cento. Ou talvez digamos apenas 100vw e 100vh. Então vamos dizer posição absoluta e zero zero zero, esquerda zero. Nós também pode definir em display flex e dizer justify-content, e vamos dizer centro e alinhamento- itens também, centro. Então eu vou dizer, linha de direção flexível pode mudar isso para uma coluna. Então, no meu corpo, posso dizer, font-family. Eu gostaria de ser Open Sans, eu acho. Open Sans ótimo. Então meu h1, vamos dar uma cor de branco. Podemos dizer text-shadow 0, 0, 10 px, rgba 0, 0, 0.5. Talvez possamos mudar isso para 4px e isso para 20px e podemos fazer isso ainda mais escuro 0,8, sim, isso é ótimo. Eu posso dizer font-size de 50 px, talvez 40 px, e então nosso h2 pode ser praticamente a mesma coisa. Exceto que será 20px. Pode alterar a margem para 0. A margem para 0 também. Em seguida, a nossa forma, mesmo margin-top de 20 px. Em seguida, nossa entrada e dizer tipo = texto, e nosso tipo de entrada = enviar, e aqui podemos fazer a mesma coisa que o nosso form-container. Nós também podemos apenas definir o tipo de exibição para flexionar dentro do nosso formulário. Centro central, mas podemos ir para a linha aqui. Sim, assim, diga fronteira, nenhuma, e diga contorno, nenhuma. Diga caixa de tamanho, border-box pode dizer preenchimento é 10px, e isso parece muito bom. Talvez 10px, 20px ou talvez possamos dizer 10px, 12px assim. Ou talvez possamos até dar uma altura de, digamos 40px. Nosso envio pode ter uma altura de 40px. Nós também podemos dizer bg ou podemos dizer borda de nenhum, contorno, nenhum, ponteiro do cursor. Minha cor de fundo, role para baixo para obter algumas cores agradáveis aqui, Eu quero o rosa. Vamos colocar isso e depois dar a isso um preenchimento do que dizemos aqui 10, 12. Talvez você possa nos dar um pouco mais. Fantástico e, em seguida, o tamanho da fonte pode ser 16px. A mesma coisa aqui, e nossa cor pode ser preta e o peso da fonte pode ser negrito. Nossa cor aqui também pode ser preta. Isso parece muito bom. O que eu gostaria de fazer é, eu gostaria de ver se eu posso adicionar uma sombra nas folhas sem torná-lo super lento. Vamos filtrar e derrubar a sombra. Isso pode ter que estar dentro de aspas, mas vamos apenas verificar novamente e vamos dizer 0, 0, 0, 0,5. Isso fez alguma coisa? Acho que não. Isso faz alguma coisa? Eu também acho que não. Filtrar e derrubar-sombra, sombre-sombra assim. Não, acho que não. E quanto ao filtro CSS drop-shadow, drop-shadow oh nenhum comentário. Que tal isso? Trabalhando em tudo? Este, ele está funcionando, mas é super é baixo. Vamos tirar isso rápido antes do meu computador quebrar. Estamos lá atrás. Acho que com o borrão e a sombra, as coisas não são tão performáticas. Então temos nosso Boletim de Plantas Parallax, cadastre-se. À medida que você move o mouse todas essas plantas se movem. Há algumas plages estranhas em nossos personagens aqui e ali. Mas é bem legal. Tudo isso é muito fácil de mudar e configurar. Podemos mudar isso para algo como 300 para torná-lo ainda mais responsivo. Parece muito divertido. Esse é o meu Boletim de Plantas Parallax. Divirta-se criando o seu. Se você quiser alterar a exibição. Você pode ir, eu acho que Full Page. Ainda tem este pequeno bar, talvez você possa ir ao Live View. Agora minhas imagens são enormes, é por isso que está demorando tanto para carregar. Mas isto é muito fixe. Há um pouco de espaço no topo da tempestade. Talvez você possa mudar isso. Vamos para o Editor View, e vamos rolar para baixo até chegarmos ao nosso ItemsArray. Acho que é por aqui. Vamos para 40 por cento, sim, vamos tentar 40 por cento. Vamos refrescar isso. Talvez ficasse muito melhor se eu não tivesse um monte de minhas plages, como essas coisas grandes aqui. De qualquer forma, eu gosto. É muito divertido. Tudo está paralaxando muito bem. É uma boa maneira de ter uma página de inscrição no boletim informativo. Legal. 15. O que vem a seguir?: Isso é tudo para esta aula. Obrigado por aceitar. Espero que tenha se divertido. Espero que tenha aprendido muito. Espero que queiras fazer mais alguma codificação. O que quero deixar com vocês é que isto é apenas o começo. O design de interação é super divertido e no mundo da web, é certamente o lado mais divertido do JavaScript. Há muito mais para aprender e certamente há maneiras muito melhores, mais rápidas e elegantes de escrever código do que como eu codifiquei nesta classe. Meu objetivo tem sido tornar tudo tão simples e fácil de entender quanto possível. Se você tiver alguma dúvida ou quiser discutir alguma coisa, por favor, faça isso na área da comunidade ou entre em contato comigo nas redes sociais. Se você gostou da aula, por favor, faça uma avaliação e compartilhe para que outros alunos possam encontrá-lo e se beneficiar dela, também. Eu também tenho muito mais aulas na linha de tubulação. Se você gosta da maneira que eu ensino, siga-me no Skillshare e nas redes sociais e confira taptapkaboom dot com. Tchau por enquanto e te vejo em breve.