Neste tutorial, veremos um belo efeito de rolagem de paralaxe da maneira mais simples, com planos de fundo estacionários e conteúdo de rolagem.

Baixe os arquivos de origem Veja a demonstração

Uma breve introdução

Paralaxe é um efeito em que a posição de um objeto parece ser diferente quando vista de diferentes posições. O movimento de paralaxe, ou no nosso caso, rolagem de paralaxe, nos dá a ilusão de que dois objetos na mesma linha de visão, mas com distância entre eles, parecem se mover em velocidades diferentes. Se você já olhou pela janela de um carro enquanto dirige a 100 km por hora por uma rodovia, notará que os postes de eletricidade parecem passar em alta velocidade, enquanto as montanhas ao fundo parecem se mover muito lentamente , quase parado. Este é o movimento de paralaxe em ação.

No que diz respeito à web, podemos induzir um efeito de paralaxe em contêineres que possuem imagens de fundo e texto acima deles. Em sua forma mais simples, a rolagem parallax fará com que o conteúdo role normalmente e o plano de fundo permaneça estacionário. A beleza dessa técnica em sua forma mais simples é que ela requer apenas CSS. Vamos cavar.

A marcação e a estrutura

Se você tivesse um site fixo que não respondesse, não haveria truques para conseguir isso. No entanto, estamos na era do web design responsivo, então isso é impossível. Não tenha medo! Temos um bom CSS à nossa disposição. Mas primeiro, uma olhada em algumas marcações. A marcação é simples - teremos sections de texto de fundo/título e sections de conteúdo alternadas para obter o máximo efeito. Aqui está o que parece:

  

    
Sereno
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Ascender
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Calma
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  

Cada section com uma classe de parallax conterá nossas imagens de fundo e o texto do cabeçalho, enquanto cada section com uma classe de content serão seções contendo conteúdo simples. A classe container é uma div fluida com largura máxima, tornando a capacidade de resposta de tudo muito simples. Agora, vamos nos aprofundar no CSS.

Estilizando e fazendo funcionar com CSS

O primeiro ponto a ser observado é que todas as minhas imagens de fundo têm width de 1600px e height de 600px. Isso me permite definir minhas seções de paralaxe para uma altura fixa de 600px. Há um pouco mais do que isso para ele embora. Como não quero fundos repetidos (estou usando imagens grandes e em negrito), nem sempre posso esperar que os usuários estejam na largura máxima (o que permitirá que as imagens de fundo fiquem totalmente visíveis). Felizmente para nós, podemos utilizar a propriedade CSS background-size e configurá-la para cover . Isso força a imagem de fundo a ocupar todo o espaço disponível, expandindo-o proporcionalmente. Ele precisa ser prefixado para suporte máximo, portanto, lembre-se disso.

Até aí tudo bem, exceto pelo mais importante. Precisamos que nossa imagem de fundo permaneça fixa no lugar enquanto nosso conteúdo passa por ela. Novamente, o CSS facilita a vida para nós. Utilizamos a propriedade background-attachment e a definimos como fixed . Simples! Aqui está a aparência do meu CSS, com algumas consultas de mídia de exemplo:

 /* ================================================ ============
  ESTRUTURA PRIMÁRIA
================================================== ========== */
.container {
  largura máxima: 960px;
  margem: 0 automático;
}
/* ================================================ ============
  SEÇÕES
================================================== ========== */
seção.módulo: último filho {
  margem inferior: 0;
}
seção.módulo h2 {
  margem inferior: 40px;
  família de fontes: "Roboto Slab", serifa;
  tamanho da fonte: 30px;
}
seção.módulo p {
  margem inferior: 40px;
  tamanho da fonte: 16px;
  peso da fonte: 300;
}
seção.módulo p:último filho {
  margem inferior: 0;
}
seção.módulo.conteúdo {
  preenchimento: 40px 0;
}
seção.módulo.paralaxe {
  altura: 600px;
  posição de fundo: 50% 50%;
  repetição de fundo: sem repetição;
  anexo de fundo: fixo;
  tamanho do fundo: capa;
}
seção.módulo.paralaxe h1 {
  cor: rgba(255, 255, 255, 0,8);
  tamanho da fonte: 48px;
  altura da linha: 600px;
  peso da fonte: 700;
  alinhamento de texto: centro;
  transformação de texto: maiúsculas;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  imagem de fundo: url("../img/demo/_small/1.jpg");
}
section.module.parallax-2 {
  imagem de fundo: url("../img/demo/_small/2.jpg");
}
section.module.parallax-3 {
  imagem de fundo: url("../img/demo/_small/3.jpg");
}

@media todos e (largura mínima: 600px) {
  seção.módulo h2 {
    tamanho da fonte: 42px;
  }
  seção.módulo p {
    tamanho da fonte: 20px;
  }
  seção.módulo.paralaxe h1 {
    tamanho da fonte: 96px;
  }
}
@media todos e (largura mínima: 960px) {
  seção.módulo.paralaxe h1 {
    tamanho da fonte: 160px;
  }
}

Suporte ao navegador e informações da propriedade

O suporte do navegador em geral é muito bom. O IE8 e versões anteriores não suportam a propriedade background-size , mas um estilo condicional simples deve cuidar disso. Além disso, tudo é suportado e você não deve ter nenhum problema. Para obter mais informações sobre as propriedades CSS usadas neste tutorial, confira o MDN:

• Posição de fundo - referência MDN
• Tamanho do plano de fundo - referência MDN
• Anexo de fundo - referência MDN

Embrulhar

Aqui, implementamos algo que é simples, eficaz e um pouco diferente da aparência comum de rolagem de tudo de uma vez. Utilizamos algumas técnicas CSS interessantes, mas menos conhecidas, para obter o efeito desejado. E isso é um embrulho! Não se esqueça, você pode ver a demonstração e baixar a fonte clicando nos links abaixo, e se você tiver dúvidas, comentários ou comentários, você também pode deixá-los abaixo.