Design de sites paralaxe

1. Apresentação: Hoje, nesta aula, vamos construir esse lindo site paradoxal usando HTML, CSS e JavaScript Como você pode ver, quando eu rolo para baixo na minha página, a árvore e as montanhas se movem lado a lado. Além disso, você pode notar que a montanha de fundo desce. E se eu rolar um pouco para baixo, ela ainda movia a montanha e a árvore lado a lado, e quando eu rolo a página para cima, ela volta ao seu lugar original. Isso é o que vamos construir hoje nesta aula. Esse efeito é conhecido como efeito de paralaxe. Você pode ter visto esse efeito na maioria dos sites. Ele cria o site, você é muito interativo e bonito. Olá. Meu nome é Joan Sharkar. Sou desenvolvedora web e instrutora on-line da Fullstack Hoje, nesta aula, vamos criar esse lindo site. Vamos começar a aula. 2. Efeito paralaxe para sites: Hoje, vou criar esse lindo efeito de animação Paralex Como você pode ver, quando percorri minha página, ela moveu as montanhas e as folhas do mar Então, vamos ver como podemos criar esse lindo efeito de animação do Parlex com a ajuda de JavaScript, CSS e HTML Então, finalmente, estou no meu editor de código vis studio. Como você pode ver, eu já criei o arquivo TMLFle com pontos de índice, arquivo css com pontos de estilo e o script com o ponto JS five Além disso, você pode ver no meu diretório de trabalho atual que temos uma pasta chamada imagens dentro desta pasta, temos todas as imagens, como hell Image, Hill two, L four, Hill five, leaf e plant. Além disso, o coqueiro, esse. Essas são todas imagens PNG, e eu vou usar todas essas imagens para criar esse efeito paralítico Então, vamos ao ponto cinco do índice. Primeiro, dentro da etiqueta corporal, vou pegar outra etiqueta chamada headtag Então, dentro desse ataque na cabeça, primeiro, vou pegar um título para a tag H two, e aqui vou digitar Logo. Além disso, vou atribuir uma classe à tag H two, alguma classe de tipo, e também o nome da nossa classe é logotipo. Então, dentro desse ataque na cabeça, aqui, vou pegar uma etiqueta de soneca, etiqueta de navegação nervo e vou adicionar uma classe a essa etiqueta de soneca, classe, e vou digitar Então, dentro dessa etiqueta de soneca aqui, vou pegar a etiqueta âncora A. Em seguida, vou adicionar nosso primeiro elemento âncora, nosso elemento vizinho Então eu duplico esta seção e vou dar um nome a ela Além disso, vou duplicar esta seção e, desta vez, finalmente vou chamá-la de serviços, vou adicionar contato Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, deixe-me mostrar que é assim que ele se parecia. Agora temos o logotipo e a barra de navegação. Agora, vamos entrar no arquivo CSS e estilizar a seção do corpo. Estou no meu arquivo CSS. Primeiro, dentro do meu arquivo CSS de estilo, vou importar uma fonte. Vou importar a fonte do Google, que são pop-ins. Eu vou usar esse. Depois disso, aqui, vou selecionar o seletor universal, iniciar Então, dentro da aula aqui, vou adicionar um pouco de estadia Primeiro, vou adicionar margem. Margem, e eu vou definir a margem por padrão, vou definir a margem zero. Então eu vou usar o preenchimento. Preenchimento, por padrão, vou dizer preenchimento zero. Depois disso, vou usar o tamanho da caixa. Caixa. Dimensionamento, tamanho da caixa, caixa de borda Então eu vou usar a propriedade da família de fontes, família de fontes, e aqui, eu vou usar os PINs duplos Poppins P O, Poppins, este e apacoma aqui, e eu vou ultrapas San sim, este, e eu vou configurar este arquivo. Depois de definir este arquivo, se eu voltar ao meu navegador, agora você pode vê-lo remover a margem de preenchimento padrão, além de alterar a fonte, fonte padrão para fonte pop-ins Agora, vamos voltar ao código do estúdio Visual. Depois disso, dentro do arquivo CSS de estilo, vou selecionar a tag body, body. Então, dentro da primeira propriedade das calices , vou usar o plano de fundo Plano de fundo, e eu vou definir essa cor. HaTagff nove, se nove uma cor cinza claro. Então eu vou dizer altura mínima. Altura do homem, altura mínima, vou dizer que é 100 de altura da janela de visualização Em seguida, vou direcionar a tag de cabeçalho, essa, essa seção de cabeçalho. Então, copio o cabeçalho do nome da tag e aqui vou digitar o cabeçalho. Em seguida, dentro dos calibradores. E primeiro vou definir a posição da posição e quero torná-la absoluta. Depois disso, de cima, quero colocá-lo em zero e, da esquerda, também vou colocá-lo na posição zero. Em seguida, vou definir a largura. Vou definir com 100%. Vou usar 100% da largura desse tamanho de tela. Em seguida, vou definir o preenchimento. Preenchendo de cima para baixo, vou usar 30 pixels e para a esquerda e para a direita, vou usar 100 pixels Em seguida, vou usar essa propriedade, exibir flex e justificar o conteúdo, justificar o conteúdo Vou usar flex start, flex start e alinhar IAM, align, IAM center Também vou definir o índice Za e vou dizer índice Za 100, vou definir este. Aqui usamos o Flick Start porque eu quero o logotipo e a guerra de navegação no lado esquerdo da nossa tela É por isso que usamos flix Start para garantir que o cabeçalho fique visível, independentemente do elemento adicionado. Eu digo índice Z 100. Agora, depois de definir esse arquivo, se eu voltar ao meu navegador, deixe-me mostrar que é assim que ele se parece. Agora você pode notar que temos preenchimento na parte superior, 30 pixels e na parte inferior 30 pixels e, no final, aqui temos preenchimento de 100 pixels também da direita, cem Em seguida, vou estilizar esse logotipo, então vou segmentar esse logotipo. Agora vou focar no logotipo. Vou digitar o logotipo dot LOGO. Em seguida, dentro da classe Aqui, primeiro, vou definir o tamanho da fonte, o tamanho e vou chegar ao EM Depois disso, vou definir a cor. Pinte e aqui vou usar esse código de cores da variante vermelha, este, e vou configurar esse arquivo. Além disso, precisamos definir alguma margem à direita, algum tipo, margem direita, passagem de rebanho de 270 pixels porque eu preciso de um espaço entre o logotipo e os elementos da rede. Eu predefino esse arquivo Se eu voltar ao meu navegador, é assim que fica. Agora vamos direcionar o menu de navegação. Vamos voltar ao código e, primeiro, vou usar a navegação do nome da classe, então copio o nome da classe e volto ao arquivo stylo css Então digite, pontue, navegue e, dentro dessa navegação, eu quero direcionar todo o texto âncora dentro das calices Dentro das cores está a primeira propriedade em que vou usar decoração de texto, decoração texto, e vou fazer com que não seja nenhuma. Não quero nenhuma decoração de texto. Quero remover o sublinhado. Em seguida, precisamos definir a cor. Pinte aqui, vou usar exatamente a mesma cor, essa, que usamos para o logotipo, vermelho escuro. Em seguida, vou definir o preenchimento. Preenchimento de cima para baixo, vou usar preenchimento de seis pixels e da esquerda e direita, vou usar preenchimento de 15 pixels Depois disso, vou definir o raio da borda, o raio da borda Raio da borda, vou fazer 20 pixels. Além disso, vou adicionar uma pequena margem. Vou digitar margem. De cima para baixo, atribuirei Margem zero e, da esquerda e direita, atribuirei dez pixels a Marin Depois disso, vou adicionar uma pequena fonte a ela, a espessura da fonte, aqui vou atribuir uma fonte a ela 600. Eu quero uma fonte pequena em pedregulho e, finalmente, vou adicionar uma pequena transição a ela, transição, e aqui vou adicionar a duração da transição de 0,5 segundo Vou configurar esse arquivo. Depois de definir esse arquivo se eu voltar ao meu navegador, deixe-me mostrar que é assim que ele se parecia. Agora eu quero adicionar Olá, quando eu passo meu cursor sobre a âncora que emite Quero alterar a cor da fonte e a cor do plano de fundo ao passar o mouse sobre ela Então, volte ao código e, desta vez, vou criar um seletor Huber usando o Ancat Então, dentro do clirass aqui, primeiro, vou mudar o plano de fundo, o plano de fundo Vou fazer um fundo dessa cor. E nossa fonte. Para a fonte, vou digitar a cor e vou torná-la branca. Eu vou satisfazer. Depois de verificar se eu voltar ao meu navegador e ao Huber meus carros estão nesses elementos negativos, você pode ver o resultado É assim que parece quando os carros I Hoberm estão nele. Dizia cor de fundo vermelha e cor da fonte branca. Agora vamos trabalhar nas imagens que usamos para criar o efeito de paralaxe Vamos entrar no código do estúdio. Como você pode ver no meu personagem de trabalho atual, temos as imagens do nome da pasta. Primeiro, vou pular para o arquivo de ponto de índice H. Em seguida, uma seção de cabeçalho, vou criar uma seção. Vou usar uma seção de tag de seção e, aqui, vou atribuir uma classe, e o nome da nossa classe é paralaxe Então, dentro desta tag de seção, primeiro, vou tirar uma foto. I G. E aqui, vou passar a fonte da imagem. Dentro dos códigos duplos, vou digitar o nome da pasta images e, a partir dessa pasta de imagens, primeiro, vou adicionar essa imagem, hill dot PNG. Em seguida, vou atribuir um ID de ID ao Hill e vou duplicar esta seção Uma por uma, adiciono todas as imagens da colina. E da mesma forma, adiciono três imagens de salto e planta. E eu vou configurar esse arquivo. Então, temos que somar oito imagens, cinco imagens de colinas, uma imagem de árvore, uma imagem de folha e a última é imagem de planta. Então, para configurar esse arquivo, se eu voltar ao meu navegador e você puder ver, esta é a nossa primeira imagem de colina. Esta é a nossa segunda imagem da colina, esta é a terceira, esta é a quarta, esta é a quinta, esta é a árvore. Esta é a folha, esta é a e esta é para as plantas. Precisamos juntar todas as imagens. Mas antes, também vou adicionar outra tag, que é H dois para o texto. Aqui vou digitar H two e dentro desse h2d vou digitar ParalyxParalyx Em seguida, vou atribuir ID a essa tag H two, ID, vou torná-la texto e vou definir esse arquivo. Agora, vamos pular para o bloco seu arquivo CSS e direcionar a paralaxe D. Aqui, vou direcionar o ponto D paralelo, paralexo e dentro dele, depois dentro das calibragens depois A primeira propriedade, vou usar a posição. Posição, vou torná-la relativa. Em seguida, vou usar a propriedade de exibição. Display, vou usar o Flix. Depois disso, vou justificar centro de conteúdo e alinhar os itens e alinhar os itens também Então eu vou atribuir altura, altura e aqui vou usar altura 100 VH. Depois de definir esse arquivo. Se eu voltar ao meu navegador, você pode vê-lo colocando todas as imagens próximas umas das outras. Agora vamos voltar ao código do estúdio. Em seguida, vou esconder a área de transbordamento. Estouro, está escondido. Depois disso, para dar a forma exata que queremos, precisamos selecionar as imagens que estão dentro da profundidade da paralaxe Aqui eu vou digitar dot parallax, imagem ING, então dentro do Carlss aqui, eu vou passar posição, posição, primeiro, vou Então eu vou adicionar o valor máximo, máximo, e vou passar de zero. Em seguida, vou usar o valor da cama. Como eu vou passar de zero. Depois disso, vou desafiar a umidade, e aqui vou colocar 100% de maconha Em seguida, vou definir o evento do ponteiro. Pointer events, aqui, vou usar Nun Valu. Nenhuma. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, é assim que nossas imagens se parecem. Juntos, eles formam esse lindo fundo. Razão pela qual isso está acontecendo porque a imagem, toda a imagem, foi projetada apenas para essa finalidade. A resolução deles é a mesma. Essa é uma visualização dividida em várias imagens. Isso é tudo para este tutorial. Na próxima parte deste tutorial, concluiremos essa animação. Obrigado por assistir a este vídeo, fique ligado na nossa próxima parte 3. Efeito paralaxe para sites parte 2: Olá, é bom ver você de volta. Essa é a segunda parte deste tutorial. Como você pode ver na parte anterior, organizamos todas as imagens no lugar certo e criamos essa bela visão. Essa é uma visualização dividida em várias imagens. Agora, vamos trabalhar na tag H two. Vou entrar no editor de código do Visual Studio e, se eu mostrar meu arquivo estimado de índice, aqui você pode ver as duas tags, dois textos de ID. Vou usar o texto do nome de ID e vamos entrar nesse arquivo CSS de estilo. Aqui, primeiro, vou segmentar, vou segmentar o texto usando seu nome de ID. Então, dentro do ibas aqui primeiro, vou definir a posição, alguma posição de tipo, vou torná-la posição absoluta absoluta Depois disso, vou definir o tamanho da fonte, e aqui vou dizer o tamanho da fonte cinco EM. Em seguida, vou definir a cor, a cor do texto, cor e vou usar a cor branca, tem a tag if if A. Depois disso, vou usar uma pequena sombra de texto. Mas antes de usar essa sombra de texto, vamos voltar ao navegador. Suponha que esse arquivo, se eu voltar ao meu navegador, é assim que ele se parece com o efeito Perlix Agora, vamos adicionar um pouco de sombra para dar um pouco de profundidade. Vamos voltar ao código do Studio e à sombra de texto do tipo Hem. Pegue a sombra, e eu vou usar essa sombra, e vou me contentar se eu voltar ao meu navegador, é assim que parecia Agora, ele fornece pouca morte neste texto. Agora, vamos adicionar a seção de conteúdo. Vamos entrar no código do Studio e entrar no arquivo de estimativa de pontos do índice. Depois desta seção, aqui, aqui, eu vou adicionar uma nova seção, Seção, depois dentro desta seção, mas antes eu vou adicionar uma classe, e eu vou chamá-la de conteúdo. Então, dentro desta tag de seção, primeiro, vou pegar uma tag H dois, H dois. Então, dentro dessa tag H two, tipo hemo, site de rolagem paralela Então eu vou pegar uma tag de parágrafo. Dentro dessa tag de parágrafo, vou pegar um texto fictício para rolar Eu preciso de conteúdo para rolar. Digite m Vou adicionar quase 750 palavras e vou definir esse arquivo. Depois de definir esse arquivo, vamos voltar ao navegador, e é assim que ele se parece. Agora, precisamos estilizar essa seção de conteúdo. Então, vamos adicionar alguns estudos. Vou entrar no coordenador do estúdio e vou usar open style ou CSS five. Vou começar a estilizar. Primeiro, vou ver a seção de conteúdo usando seu nome de classe dot content. Lá dentro da classe, primeiro, vou definir a posição e a posição, vou torná-las relativas. Depois disso, vou definir a cor de fundo, o plano de fundo e, para esse plano de fundo, vou usar exatamente a mesma cor vermelha, essa. Copie o código de cores e eu vou colocá-lo aqui. Depois disso, vou adicionar um pouco de preenchimento de todas as direções, preenchendo 100 pixels de todas as Depois de satisfazer se eu voltasse ao meu navegador, ficou assim. Acho que essa cor vermelha é muito vibrante, então vou tentar combinar com essa cor Vamos mudar o código de cores e desta vez vou usar essa cor. Algo corresponda a esse plano de fundo e volte ao meu navegador novamente. Agora, combina bastante com essa cor de fundo. E então precisamos mudar o texto. Precisamos organizar o texto. No início, vou segmentar essa tag de cabeçalho, então o Hemo digite dot content H two, header to tag Depois disso, dentro da coluna ResSF, vou definir o tamanho da fonte, o tamanho da fonte, vou usar três tamanhos de fonte EM Então eu vou definir a cor. Cor e cor do hemótipo branco. Hastag, se for. Então eu vou definir margem, margem na parte inferior. Na margem inferior, vou passar dez pixels. E vou ficar satisfeita Se eu voltar ao meu navegador, é assim que parece. Depois disso, precisamos estilizar essa seção de conteúdo. Para isso, novamente, vou entrar no arquivo CSS e, desta vez, vou segmentar o conteúdo de pontos do conteúdo e quero segmentar o parágrafo. Então, primeiro dentro das cores, vou definir o tamanho da fonte, o tamanho da fonte, vou usar o tamanho da fonte um EM depois disso, vou definir a cor do texto, cor, Hen para defini-la, branco, tem tag, tem tag, se for Finalmente, quero usar um telefone um pouco mais leve, então tenho três fontes, peso 300 Vou configurar esse arquivo. Depois de definir este, volto ao meu navegador. Agora é assim que parecia. Agora está melhor e temos conteúdo suficiente para rolar. Portanto, concluímos com sucesso nossa parte de estilização e agora precisamos trabalhar no efeito paralexo Para isso, precisamos entrar no arquivo JavaScript. Vamos entrar no arquivo JavaScript, script dot js. Em primeiro lugar, precisamos direcionar esses elementos. Quero dizer essas imagens, quero mover quando rolo minha página para baixo. Para isso, vou declarar uma variável atraso e nosso primeiro nome de variável é texto, THT Primeiro, quero direcionar o texto usando o texto do nome de ID igual ao documento que obtém elemento por ID. Aqui vou passar o nome de identificação. Então, dentro dos vestidos redondos, vou passar o texto do nome de identificação e o semícone nesta linha Então, da mesma forma, vou mirar na Colina 4, na Colina 5 e na Colina 1. Além disso, vou mirar na folha. Vou copiar a folha do nome de ID e voltar para o arquivo JS do script. Vou duplicar essa linha e, desta vez, vou para a folha de destino e a armazeno nessa variável de folha e passo a folha do nome de ID Então eu vou mirar na Colina 1, Colina 4 e na Colina 5. Então, a partir daqui, vou mirar na Colina 1. Copie seu nome de ID e aquele para o arquivo Js do Scribb e eu dupliquei essa linha no total duas vezes Desta vez, vou mirar na Colina 1. Então eu vou mirar na Colina quatro, no inferno quatro, e também vou mudar o nome de identificação na Colina quatro e, finalmente, vou mirar na Colina cinco, H cinco. Não é a folha cinco, é uma colina cinco, então eu copio hell not leaf e substituo a folha por Hill. Portanto, direciono com sucesso os elementos que desejo mover ao rolar minha página para baixo, como este texto, a primeira colina e a quarta colina e a quinta colina, também a folha. Eu não quero selecionar esse coqueiro e isso e essas plantas. Não quero selecioná-los. Eu quero mover apenas a colina de fundo. Eu quero ver a primeira colina, a quarta colina e a quinta colina, também a folha e o texto. É por isso que eu seleciono todos eles e os armazeno em uma variável em diferentes variáveis. Esses são os elementos que eu quero animar. Agora vamos trabalhar no efeito. Então digite, Window, dot e até mesmo listener. Então, por dentro, o redondo diz, primeiro, eu quero rolar Se eu rolar, quero executar uma chamada para essa função. Aqui estou para usar a função de seta. Então, dentro do crass, basicamente significa que qualquer código que escrevemos dentro dessa chamada função, quando eu rolar, ele executará esse código Dentro dessa função, vou criar uma nova variável mais tarde e nossa variável está bem. Valor T igual ao henótipo e eu quero extrair o valor da rolagem Y, janela do tipo Su, e aqui precisamos extrair o valor da janela do tipo Scrolly, ponto, rolagem, Y e subterminar esta linha porque precisamos apenas da rolagem e subterminar esta linha Y xs, não da rolagem de Xs para executar o efeito de paralaxe Basicamente, vai exceder a distância vertical. Agora vamos trabalhar nos elementos que eu quero mudar. Agora, para obter o valor, primeiro eu quero mudar a posição do texto ao rolar minha página para baixo. Eu quero adicionar uma pequena margem. Eu quero adicionar uma margem no topo deste texto, para que ele se mova para baixo Para isso, vamos usar o método de estilo, deixe-me mostrar como. Então, digite o herói, primeiro, vou digitar o nome da variável. Que armazenou esse texto, W é texto, texto, ponto, estilo, ponto, eu quero adicionar o valor máximo da margem. Margem, no topo. Então, igual ao torque da margem, então eu vou atribuir um valor. Igual a aqui, eu vou passar. Basicamente, vou usar modelos literais. Vou usar carrapatos nas costas. Então, dentro dos ticks invertidos, vou usar o cifrão, depois dentro do Carlss, depois dentro do crass, primeiro, vou fornecer o valor, o valor que obtemos desse pergaminho, algum valor de tipo, e vou multiplicá-lo quero multiplicar por 2,5 Toda vez que eu rolar minha página para baixo, ela muda o valor e se multiplica por 2,5 pixels e, em seguida, fornece a unidade PX. É isso mesmo. Depois de configurar esse arquivo, se eu voltar ao meu navegador e tentar rolar para baixo nesta página, aqui você pode ver o resultado. Sempre que eu rolo para baixo nesta página, como você pode ver, esse texto adiciona uma nova margem na parte superior. Da mesma forma, vamos mover outros elementos no lado esquerdo e no lado direito. Deixe-me te mostrar como. Vamos ao código do estúdio, e desta vez vou duplicar essa linha, e vou focar no estilo Folha, e desta vez, quero mover essa folha do topo Estilo tipo hemo, ponto, parte superior. Acima disso, aqui eu quero multiplicar -1,5 menos 115 pixels Aqui, eu quero fornecer um valor negativo. Então, quando eu rolar minha página para baixo, ela fornecerá o valor negativo, valor negativo dinâmico para essa propriedade superior. Da mesma forma, vou fazer essa linha e, desta vez, quero mover esse elemento da folha no lado do lábio, PT e aqui, vou passar o valor, vou passar o valor positivo. Vou configurar esse arquivo. Depois de definir esse arquivo, vamos voltar ao navegador. Mas antes de adicionar algo legal, é necessário Caso contrário, ele pode gerar um erro. Então, de volta ao navegador, se eu rolar na minha página, aqui você pode ver, você pode notar a folha. Sempre que eu rolo minha página para baixo, ela fornece pouco efeito de afastamento. Como você pode notar, ele se afasta dessa costura porque aqui usamos menos o valor superior e o valor esquerdo positivo É por isso que ele se move para cima e para o lado esquerdo. Da mesma forma, precisamos lidar com a colina cinco, colina quatro e a colina um. Deixe-me te mostrar como. Vou duplicar essa linha e, desta vez, vou mirar na Colina 5 Eu quero mover esta colina de cinco elementos lado esquerdo e fornecer da mesma forma também. Vai se mover para a posição dos lábios. Então eu dupliquei essa linha, e desta vez vou mirar na Colina 4, e quero mover essa colina 4 na direção oposta Então, aqui eu vou usar negativo do, fim, a elevação negativa do, temos outro elemento que é a colina cinco e eu quero mover esse elemento para cima. É a colina de fundo. É por isso que eu quero movê-lo para o topo. Então, vou passar a propriedade superior, parte superior e aqui, vou alterar o valor. Vou usar apenas um pixel. Toda vez, de acordo com o valor dinâmico, ele se multiplica por um Opa, nossa colina de fundo não é a colina cinco, é a colina um, não cinco É o principal inferno terrestre. Então, depois de satisfazer, se eu voltar ao navegador novamente e rolar esta página, agora você pode notar esse lindo efeito de paralaxe Espero que agora esteja claro para você como podemos criá-lo. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto.