Primeiras aulas do curso Front-end UI: Efeito paralaxe e carrossel

Front-end UI: Efeito paralaxe e carrossel

Layout e ambiente de desenvolvimento - Apresentação

Olá, meu nome é Mateus Roberto e eu serei seu instrutor durante todo o curso de frontend ui efeito parallax e carrossel. O projeto vai ser a página de produto da petshop Gatito. Nós vamos montar uma página com cabeçalho, uma seção de produto, com imagem, descrição do produto, preço, texto descritivo e assim por diante.

Mais para baixo vamos ter outra seção onde vamos ter a apresentação de outros produtos com o carrossel, esse carrossel vai ter várias imagens que vamos conseguir passar de uma para outra, a pessoa vai conseguir ver de uma para a outra e acessar o produto caso queira. Finalizando a página depois com um rodapé.

Vamos utilizar o Adobe XD para poder pegar as informações e ver esse layout. No Adobe XD vamos aprender a pegar informações importantes, como assets de imagens, ícones, cores, que são as cores usadas no site, esse rosa, esse laranja, entre outras cores. Tipografia, quais são as fontes que vamos trabalhar, quais são os pesos dessas fontes.

E também, o mais importante para nós vão ser os tamanhos e espaçamentos, que é o tamanho dessa imagem, qual o espaço que ela tem que ocupar, a distância entre um parágrafo e outro, até mesmo propriedades CSS, como letter spacing, word spacing, que são propriedades que mexem com a altura do texto, espaçamento entre letras, entre outras propriedades.

Depois que tivermos recolhido todas as informações do Adobe XD vamos começar realmente a desenvolver a página. Agora na seção de produtos vamos ver uma coisa muito interessante, que é o efeito parallax. Como vai funcionar? Vamos ter o efeito de scroll, só que a imagem do produto vai continuar estática, como se estivesse grudada no fundo da página.

Nós vamos ver como fazer esse efeito, como atingir esse efeito, e depois mais para baixo temos o carrossel. Esse carrossel não é um carrossel que vamos só mexer visualmente, criar visualmente ele e acabou. Nós vamos fazer estrutura, estilização e deixar esse carrossel completamente funcional. Tanto os botões quanto os indicadores embaixo. Ele vai ser 100% funcional.

Esse carrossel, a minha intenção nesse projeto é que você consiga reutilizar esse carrossel em outras partes, em outros projetos que você queira usar. E depois que finalizarmos com o rodapé, antes vamos ver um outro efeito parallax, que é o efeito parallax de perspectiva.

Tenho o exemplo pronto já do que vamos montar no curso, e é este efeito de que a imagem do produto se move numa velocidade diferente do restante da página. Vamos ver este efeito.

Eu queria incentivar você a pegar o projeto conforme você estiver desenvolvendo ele no decorrer do curso, que você marque-nos nas redes sociais com #DesafioAlura com o que você já montou, o que você achou de legal, interessante. É isso, estamos prontos para seguir para o curso. Te vejo no próximo vídeo.

Layout e ambiente de desenvolvimento - A base do projeto

O primeiro passo para começar a desenvolver a página é ter o layout em mãos. A equipe de design mandou para mim um link do Adobe XD onde vamos pegar todas as informações necessárias para poder montar a página, que são as imagens, as cores e a tipografia.

Na barra lateral da direita do Adobe XD tem três ícones, o ícone que nós vamos clicar é o ícone que parece o fechamento de uma tag, que é o "View Specs". Teremos quatro informações, "Screen Details", "Assets', "Colors" e "Caractere Styles". Vamos começar com as imagens.

As imagens de produto e do carrossel, as imagens que serão usadas no carrossel, estão dentro de um arquivo zip do exercício de preparando o ambiente. Caso você não tenha baixado esse arquivo ainda pode pausar esse vídeo, ir até a atividade e baixar o arquivo zip do projeto.

Depois de baixado podemos pegar os ícones que faltam, que são da logotipo, o ícone da lupa, e as duas setas do carrossel. Para isso vou clicar dentro do assets, selecionar esses quatro itens, e lá embaixo vai aparecer a opção de Download. Vou clicar em Download, vai perguntar onde quero baixar esse arquivo, vou colocar no Desktop mesmo.

Abrindo o zip tenho os quatro ícones que selecionei e na pasta do meu projeto vou criar uma pasta chamada "assets". Dentro de assets vou criar outra pasta chamada "img", e dentro de img vou colar nossos quatro ícones. Só vou trocar o nome de um desses ícones que está "group2" para "lupa".

Agora vamos pegar os arquivos do projeto, as imagens faltantes. Já tenho baixado esse arquivo, então posso abrir ele e selecionar as seis fotos que tem aqui dentro. Copiei, colei dentro da pasta do projeto com os ícones. Já temos todas as imagens.

O próximo passo vai ser pegar as tipografias. Só que antes de pegar e baixar essas fontes, é interessante primeiro criar a estrutura básica html para poder importar essas fontes. Vou abrir meu editor de texto, que vou usar o VisualStudio code durante o projeto, e na raiz do projeto vou criar um novo arquivo chamado index.html.

Nesse arquivo vou colocar a estrutura básica html. Vou usar o emet para isso. Vou digitar html:5, pressionar Tab e o emet vai construir toda a estrutura para nós. Só vou trocar algumas informações como o atributo lang do html, vou trocar para pt-br' E a tag title vou trocar para Produto | Gatito. Temos a estrutura básica, então podemos importar a fonte agora.

Vou voltar para o XD rápido. Vamos ver caractere styles. Usamos overpass, só usamos overpass. Só que quais são os pesos? Regular, extra bold, bold, black e semibold, são cinco pesos que precisamos baixar.

Vou abrir uma nova aba no navegador, vou para o fontes.google.com, e na barra de busca vou digitar "overpass", selecionei a fonte, a família. Vamos selecionar o regular 400, semibold 600, bold 700, extra bold 800 e black 900. Confirmar na barra que abriu à direita se estão os cinco pesos. Vou clicar na aba embed e aqui o logo fontes já deixa uma tag link pronta para usarmos.

Basta selecionar essa tag link, copiar, ir até nosso código e colar abaixo da tag title. Salvei o arquivo html, precisamos pegar as cores. Para isso vou criar uma nova pasta dentro de "assets" chamada "CSS", dentro de "CSS" vou criar um arquivo chamado "variaveis.css".

Só que esse arquivo variáveis, assim como reset, serão importados em todas as páginas do projeto. Vai ter um arquivo base que vai ter também espaçamentos laterais e até onde vamos realmente locar tipografia na página, então importar três arquivos para cada página é um pouco trabalhoso e também pode causar problemas no momento em que formos importar esses arquivos, esquecer ou coisa do tipo.

Então, vamos importar um arquivo só, e dentro desse arquivo os arquivos variáveis, reset, estarão já importados dentro dele. Para poder indicar que um arquivo CSS está sendo importado dentro de outro arquivo CSS, vou colocar o underline antes dentro do nome do arquivo. No caso de variáveis vai ser _variaveis.css.

Agora que criei esse arquivo, vou chamar o seletor mais abrangente do projeto, que é o :root, permitindo que nossa variável seja utilizada na página inteira, e aí vou começar a declarar nossas cores. Para isso vou digitar -- e o nome da variável, que no caso pode ser branco. E aí passo o valor dessa variável, que vai ser #FFF. Vou fazer isso para todas as outras cores.

Já deixei uma cola para não ter que ficar indo e voltando, mas a ideia é ir no XD, ver os valores dessas cores, e depois vir para cá criar uma variável nova e colar o valor dessa cor. Depois de colocadas as cores, podemos voltar para o index.

Para poder importar, temos que ter aquele base. Dentro da pasta CSS vou criar um novo arquivo chamado base.css, e dentro desse base vou importar os arquivos variáveis e reset.css.

O arquivo reset está junto com os arquivos do projeto, lá onde temos as imagens, que é o reset.css. Vou copiar e colar dentro da pasta CSS junto com variáveis e base. Só vou renomear o reset para _reset.css, e dentro do base vamos importar esses dois arquivos.

Vamos dar @import url, e como os arquivos estão na mesma pasta é só digitar o nome do arquivo mesmo, então _reset.css, lembrando de colocar o ponto e vírgula no final da linha, porque o VisualStudio code não coloca, não dá o autocomplete nesse ponto e vírgula.

O próximo import é url(_variaveis.css), ponto e vírgula no final, e aí podemos colocar a fonte no corpo inteiro da página. Então, seletor de body, font-family: ‘overpass’, sans-serif. Aproveitando que estamos aqui no base, vamos colocar também aquela classe que vai trabalhar com espaçamentos laterais, classe container, que vai ter um padding-right: 2rem e um padding-left: 2rem também.

Agora quando importarmos esse arquivo base no html, ele já vai ter o variáveis e o reset. Depois do primeiro link da fonte vai ter assets/css/base.css. Para testar se funcionou, vou criar um h1 chamado “Olá Gatito”. Salvei e vou testar no navegador.

O reset funcionou, porque o h1 está sem estilização padrão do navegador, e a tipografia foi, porque ele não está com aquela fonte serifada padrão do navegador também.

Como vamos testar agora se as variáveis também estão funcionando? Dentro do h1 vou colocar o atributo style e vou chamar color: var(--rosa), ponto e vírgula. Salvei, vou ver no navegador como ficou. A cor mudou, conseguimos pegar o reset, as variáveis e as tipografias, está tudo funcionando. Agora podemos seguir para o primeiro componente da página, que vai ser o cabeçalho.

Layout e ambiente de desenvolvimento - Browser-sync

Uma ferramenta que vou usar bastante no projeto, que vai ajudar muito no desenvolvimento, é o browser sync. Só que o que o browser sync faz? Por que preciso instalar o browser sync? Vamos ver o processo que fazemos até agora para poder fazer uma mudança no nosso código e depois visualizá-la no navegador.

Tenho o código, que tínhamos montado do Gatito. Vou trocar a cor rosa para cinza. Vou salvar o arquivo, vou para o navegador, depois recarrego a página para poder ver a mudança.

O que o browser sync faz é que toda vez que acontece alguma mudança nos arquivos, por exemplo, edição do código, no momento em que salvo ele automaticamente vai atualizar o navegador. Podemos trabalhar de uma maneira mais eficiente caso tenhamos, por exemplo, dois monitores, deixar o código em uma tela e o browser em outra.

Mas aqui como estou dando o exemplo de uma tela vou deixar uma do lado da outra. E aí toda vez que modificar meu código, mudar alguma coisa na cor, por exemplo, voltar para rosa, automaticamente sem que eu perca o foco do código o navegador já atualiza.

Vamos instalar o browser sync. Para isso vou usar o terminal do VisualStudio code, mas você pode usar o terminal do Windows, do Linux ou do seu Mac também, não tem importância, é o mesmo terminal. E também já estou assumindo que você tenha node instalado, node com npm.

Agora no terminal vou digitar =sudo npm install -g, porque quero que ele instale global, quero que funcione para o meu computador inteiro, não só para esse projeto, browser-sync. Ele vai instalar as dependências aqui. E caso você esteja no Windows pode ser que você precise abrir o terminal como administrador. Isso pode variar.

Depois de instalado podemos já rodar o browser sync. Vou limpar o terminal. Agora, temos que navegar até a pasta onde está o projeto, o diretório onde está o projeto. Quando abro o terminal pelo VisualStudio code ele já está automaticamente no meu projeto, no meu diretório.

Dentro do diretório vou digitar browser-sync start -s -f . --host --port 8080. O -s é para subir um servidor, que é uma coisa muito legal do browser-sync que vamos ver depois, o -f é para checar os arquivos, então cada mudança que vai acontecer no projeto de qualquer arquivo quero que o browser sync mantenha, fique de olho, e depois digo quais são os arquivos que quero que ele olhe.

Digito ponto para dizer que são todos os arquivos, seja JavaScript, seja CSS, seja html, não importa, quero que ele observe todos os arquivos do projeto. Depois passo o ip e a porta, --host para dizer que quero que o ip seja o ip da máquina host, no caso minha própria máquina, e --port para dizer qual porta quero que ele suba. Quero que ele suba na 8080.

Se eu pressionar enter ele vai dizer algumas mensagens, como estou acessando a url, subi o serviço. Para acessar esse serviço vou até substituir, passo a digitar localhost:8080. Localhost porque nós colocamos o ip da máquina local, e a porta 8080.

Ele vai dizer uma mensagem que browser sync connected, e tem o Gatito. Vou fechar o painel. Não estou fechando o terminal em si, só o painel, porque se eu fechar o terminal o browser sync para de funcionar. Agora vou fazer as mudanças. Por exemplo, trocar de rosa para cinza de novo. Automaticamente, sem que eu perca o foco do meu trabalho ele já mudou, atualizou atualmente no navegador.

Isso é fantástico para nós porque conseguimos escrever códigos, fazendo, colocando coisas, spam, lorem, salvando, e automaticamente as coisas vão aparecendo na tela.

Outra vantagem muito legal do browser sync é, por exemplo, quando vamos desenvolver e fazer testes para mobile. Como o projeto está rodando no servidor local, podemos acessar com qualquer dispositivo esse endereço.

Vou abrir meu terminal do Windows e aqui vou descobrir meu ip. Por exemplo, vou rodar ip config, ele vai mostrar meu ip local, 192.168.15.89, e a porta que tínhamos visto quando subimos o browser sync é a 8080.

Se eu estiver em casa ou no trabalho, por exemplo, e tenho um roteador, meu celular está conectado no roteador, posso digitar no meu celular, por exemplo, 192.168.15.89:8080 e vou acessar o mesmo projeto como se fosse de outro dispositivo.

No meu celular, por exemplo, faço alguma modificação, volto para rosa de novo, ele automaticamente atualiza no celular e no computador. Isso é muito legal. Browser sync é uma ferramenta fantástica e agiliza bastante o nosso trabalho, principalmente o que estamos desenvolvendo.

Agora que temos essa ferramenta vamos usar para poder montar o cabeçalho.

Sobre o curso Front-end UI: Efeito paralaxe e carrossel

O curso Front-end UI: Efeito paralaxe e carrossel possui 135 minutos de vídeos, em um total de 43 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas