Efeito Parallax apenas com CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 01 Min 58 Seg Tempo restante da oferta: 14 01 58 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Efeito Parallax apenas com CSS [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Efeito Parallax apenas com CSS Veja nesse artigo como criar o efeito Parallax utilizando apenas CSS. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 9 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/11142804/unnamed.png) Olá, Web Developers! Hoje veremos como criar um efeito Parallax de maneira bem simples e sem usar JavaScript conforme o usuário for rolando a página. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## O que é Parallax? Parallax é o nome dado ao efeito de diferentes objetos parecerem estar em diferentes posições ou direções quando observados em diferentes posições. Isso é muito comum em nosso cotidiano, e amplamente usado em jogos 2D para dar uma ideia de profundidade. ![Parallax Game Scrolling](https://dkrn4sk0rn31v.cloudfront.net/2018/02/19102203/MubFux2.gif) Veja na imagem acima que o fundo se move mais lentamente em relação aos objetos que estão mais “próximos” do jogador, dando a ilusão de profundidade. Esse efeito também é usado no desenvolvimento web para dar ideia de profundidade. É comum vermos bibliotecas JavaScript que fazem este trabalho, mas nós veremos como é simples de se fazer com apenas CSS sem muito esforço. Para já ver o resultado, [clique aqui](http://fiddle.jshell.net/ouxbqLpw/10/show/ "clique aqui"). ## A Estrutura A nossa estrutura será bem simples: ```html TreinaWeb Parallax CSS ``` Primeiro precisamos de um elemento que será o container de tudo, e vamos dar a ele a classe `wrapper`. Os sites que normalmente fazem uso desse efeito possuem uma seção embaixo da outra. Então vamos criar três `` com a classe `section`. Dentro de cada seção você coloca o conteúdo que quiser. Aqui iremos colocar um simples parágrafo com um texto, e daremos a classe `text`. Esse elemento é só o conteúdo, então você pode colocar qualquer coisa e estilizar como quiser. ## A Estilização ![](https://dkrn4sk0rn31v.cloudfront.net/2018/02/19102354/RzMyMUh.png) Como vimos, a ideia do Parallax é ter camadas diferentes que se movimentam em diferentes velocidades. Para esse efeito, faremos uso da propriedade `transform` e `perspective`. ```css /* Esse código é só para tirar as margens */ body,html{margin:0;padding:0;} .wrapper { /* O elemento precisa ter uma altura definida para o efeito funcionar. 100vh significa 100% da altura da view. */ height: 100vh; /* O tamanho das imagens irá criar uma barra de rolagem horizontal. Iremos desativar isso */ overflow-x: hidden; /* A propriedade perspective indica a "distância" entre o usuário e o plano Z. Quanto maior o valor, mais perto o elemento estará do usuário. Se for um valor negativo, mais distante esse elemento estará. */ perspective: 2px; /* O transform-style indica se os elementos filhos devem ser transformados em um plano 2D ou 3D. O valor preserve-3d indica que os elementos devem seguir o espaço 3D indicado. */ transform-style: preserve-3d; } .section { /* Indicamos "relative" para depois podermos posicionar os elementos filhos com "absolute" */ position: relative; /* Indicamos uma altura para a nossa seção. O valor não importa muito. Para garantir um bom efeito, coloquei também uma altura mínima de 700px; */ height: 100vh; min-height: 700px; /* Para manter a transformação em espaço 3D, indicamos o mesmo valor do elemento pai (preserve-3d). Para não precisar repetir o valor "preserve-3d", você pode usar o valor "inherit", que fará com que ele pegue o valor do elemento pai. */ transform-style: inherit; } .section::before { /* Aqui nós iremos configurar a imagem que irá aparecer no fundo da seção. Como vimos, o Parallax precisa de elementos diferentes, então não daria certo se colocássemos o fundo diretamente na . Então criaremos um pseudo-elemento para isso. */ /* Isso servirá para que o pseudo-elemento possua as mesmas dimensões do elemento */ content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* O z-index negativo irá garantir que a imagem não fique por cima de outros elementos */ z-index: -1; /* Aqui estamos fazendo com que a imagem de fundo cubra todo o elemento */ background-size: cover; background-repeat: no-repeat; background-position: center center; /* Aqui está a brincadeira. Lembra que o nosso "wrapper" está mais próximo do usuário? Aqui nós faremos com que o nosso pseudo-elemento, que está com a imagem de fundo, fique mais longe do usuário. Para isso, basta passar um valor negativo para "translateZ()". Como a imagem irá para longe do usuário, ela parecerá menor. Então usamos o "scale()" para aumentar o tamanho da imagem. Como o elemento estará mais longe do usuário, ele irá se mover mais lentamente do que os elementos mais próximos conforme a gente role a página. */ transform: translateZ(-1px) scale(1.5); } .text{ /* Essa classe, como dito antes, é só para o nosso conteúdo. Sinta-se livre para criar o que quiser. */ position: absolute; top: 25%; width: 100%; padding: 20px 0; background-color: rgba(255, 255, 255,0.5); color: white; text-shadow: 0 0 5px #000; font-size: 20px; text-align: center; } /* Em nosso pseudo-elemento, configuramos a imagem de fundo, mas não indicamos qual será a imagem. Isso nos permite poder criar outras classes para indicar uma imagem diferente para cada . */ .bg1::before { background-image: url('https://i.imgur.com/6yuYHKv.jpg'); } .bg2::before { background-image: url('https://i.imgur.com/W0Wot0k.jpg'); } .bg3::before { background-image: url('https://i.imgur.com/DAerHqR.jpg'); } ``` Agora basta colocar as classes `.bg1`, `.bg2` e `.bg3` em nossas `sections`: ```html TreinaWeb Parallax CSS ``` Para ver todo o código em ação, acesse: [clique aqui](https://jsfiddle.net/ouxbqLpw/10/). [ ![Delphi - Criação de aplicações mobile](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/delphi.svg) Curso Delphi - Criação de aplicações mobile Conhecer o curso ](https://www.treinaweb.com.br/curso/delphi-mobile-completo) - [ #Design ](https://www.treinaweb.com.br/blog/tag/design) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #parallax ](https://www.treinaweb.com.br/blog/tag/parallax) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/como-fazer-animacoes-infinitas-de-fundo-com-css-puro-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 6 anos atrás ## [ Como fazer animação infinita de fundo com CSS? ](https://www.treinaweb.com.br/blog/como-fazer-animacao-infinita-de-fundo-com-css) Veja como criar uma animação infinita de fundo com efeito parallax usando apenas CSS puro. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155045/Flip-Cards-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Aprenda a Criar o Efeito de Flip Cards ](https://www.treinaweb.com.br/blog/css-aprenda-a-criar-o-efeito-de-flip-cards) Aprenda a criar o efeito de Flip Cards com CSS puro de maneira bem simples. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-HTML-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Dica de Código: Conheça a propriedade CSS text-decoration ](https://www.treinaweb.com.br/blog/dica-de-codigo-conheca-a-propriedade-css-text-decoration) Descubra o poder da propriedade CSS text-decoration: estilos únicos para seus textos front-end! Explore posições, estilos e personalizações! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/20161857/PHP-PSR1-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ PSR-1 Conheça os padrões básicos de codificação do PHP ](https://www.treinaweb.com.br/blog/psr-1-conheca-os-padroes-basicos-de-codificacao-do-php) Conheça as recomendações da PSR-1 sobre os padrões básicos de codificação da linguagem PHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/28112233/capa-SPA-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ O que são aplicações SPA? ](https://www.treinaweb.com.br/blog/o-que-sao-aplicacoes-spa) Neste artigo, vamos abordar o que são as aplicações baseadas em tecnologias SPA e o porquê de estas fazerem tanto sucesso nos dias atuais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/CONHECENDO-VÁRIAVEIS-CONSTANTES-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Conhecendo variáveis e constantes no JavaScript ](https://www.treinaweb.com.br/blog/conhecendo-variaveis-e-constantes-no-javascript) Neste artigo vamos aprender a declarar e a utilizar constantes e variáveis no JavaScript, entendendo quando definir var, let e const. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/CLASSES-ABSTRATAS-INTERFACES-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ Classes Abstratas vs Interfaces ](https://www.treinaweb.com.br/blog/classes-abstratas-vs-interfaces) Veja neste artigo o que são e quais as diferenças entre classes abstratas e interfaces. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071245/intro-inkscape-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 2 - Trabalhando com Inkscape ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-2-trabalhando-com-inkscape) Aprenda a criar formas e imagens vetoriais em SVG para usar em suas páginas web de maneira bem simples com este tutorial de introdução ao Inkscape. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/25165946/GOOGLE-STADIA-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 8 anos atrás ## [ Stadia: Plataforma de Games por Streaming da Google ](https://www.treinaweb.com.br/blog/stadia-plataforma-de-games-por-streaming-da-google) Quer jogar aquele jogo novo, mas não tem hardware para isso? Bom, segundo a Google, esses dias estão contados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/01152250/ALINHAMENTO-1-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ CSS Flexbox - Um Guia Interativo (Parte 1 - Containers) ](https://www.treinaweb.com.br/blog/css-flexbox-um-guia-interativo-parte-1-containers) Aprenda a trabalhar com o CSS Flexbox com este guia definitivo e interativo! Vamos ver primeiro as propriedades dos containers. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/11144157/NETWORKING-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 8 anos atrás ## [ Como melhorar seu networking na área de TI ](https://www.treinaweb.com.br/blog/como-melhorar-seu-networking-na-area-de-ti) Veja neste artigo algumas dicas para melhorar seu networking e alcançar melhores resultados na sua carreira. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 01min 58s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58