Técnicas CSS

Para um desenvolvedor da web, quando se trata de criar um efeito de rolagem de paralaxe, várias técnicas estão disponíveis. Uma dessas técnicas é usarCascaded Styling Sheets(CSS).

CSS explica como os elementos HTML são exibidos na tela. Pode-se criar um arquivo CSS e usá-lo para o site completo. É mais simples adicionar arquivos CSS do que adicionar estilos a cada elemento HTML e gerenciá-los em diferentes partes da página da web.

Note- Alguns dos métodos discutidos abaixo neste capítulo são específicos para computadores desktop e não para dispositivos móveis. Será mencionado nas etapas quando uma técnica específica não for adequada para dispositivos móveis.

Considerando os descarregamentos de CSS em todo o desenho extra no modelo de objeto de documento (DOM), há uma maior utilização da aceleração de hardware e um efeito suave sem sobrecarregar a CPU.

Método da posição absoluta

Esse método é frequentemente usado para criar um efeito de paralaxe, pois é relativamente leve em comparação com outras opções disponíveis. A posição da imagem de fundo é mantida fixa em relação a outro conteúdo na tela. No exemplo discutido abaixo, você verá como fazer isso usando a magia do CSS.

Nesta seção, examinaremos dois métodos para o Método da Posição Absoluta -

Fundo Único
Fundo Múltiplo

Método de fundo único

Neste método, iremos criar dois arquivos na mesma pasta. Observe as etapas fornecidas abaixo para o mesmo propósito -

Step 1

Temos que criar dois arquivos na mesma pasta: o primeiro arquivo com marcação HTML e o segundo com código CSS.

Step 2

Agora, vamos definir nossa marcação HTML. Observe o código fornecido abaixo -

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   <body>  
      <div class = "BgContainer">  
         <div class = "Parallax">  
            <h1> Welcome! </h1>   
         </div>  
         <div class = "FgContainer">  
            <div class = "MainContent">  
               <p>
                  Here we will go ahead with some content which will really vary 
                  according to the content on your site. I am just typing out this 
                  content as it is sometimes good to engage user than the usual lorem 
                  ipsum text!
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt mollit anim id est laborum.  
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt mollit anim id est laborum.  
               </p>  
            </div>  
         </div>  
      </div>  
   </body> 
   
</html>

Step 3

Abra o bloco de notas. Copie e cole o snippet de código acima.

Quando você estiver salvando o arquivo, em Save as type, selecione All Files. Insira um nome para o seu arquivo conforme necessário, mas ele precisa ser seguido por uma extensão -.html como mostrado na imagem abaixo.

Step 4

Assim que o arquivo for salvo, crie outro arquivo no bloco de notas e cole o código fornecido abaixo -

html, body {  
   font-size: 18px;  
   line-height: 28px;  
}  

h1 {  
   letter-spacing: -15px;  
   color: white;  
   text-align: center;  
   font-size: 200px;  
   font-weight: 800;  
   line-height: 200px;
}    

BgContainer {  
   perspective: 1px;  
   transform-style: preserve-3d;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: scroll;  
}  

FgContainer {  
   position: relative;  
   display: block;  
   background-color: white;  
   z-index: 1;  
} 
 
MainContent {  
   max-width: 750px;  
   margin: 0 auto;  
   padding: 75px 0;  
} 
 
p {  
   margin: 75px 0;  
} 
 
.Parallax {  
   display: flex;  
   flex: 1 0 auto;  
   position: relative;  
   z-index: -1;  
   height: 100vh;  
   justify-content: center;  
   align-items: center;  
   transform: translateZ(-1px) scale(2);  
   background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);  
   background-color: rgb(250,228, 216);
}

Como você viu na última etapa, ao salvar o arquivo, em Save as digite, selecione All Files. Insira um nome para o seu arquivo conforme necessário e adicione uma extensão.css para isso.

Análise de Código

Vamos entender qual parte do código é responsável pelo efeito de paralaxe. O trabalho mais importante para paralaxe é feito usando regras de perspectiva e transformação. Referir-seline 15no trecho de código acima. A perspectiva é criada para o nossoBgContainerprimeiro. Isso inicia uma plataforma para regra de transformação.

No Parallax contêiner começando na linha 40, transform regra na linha 48 empurra o div BgContainer para o fundo usando traduzir (-1px).

Você pode modificar os valores dos parâmetros de conversão e escala para modificar a profundidade da paralaxe.

Ao abrir o arquivo html, o efeito de paralaxe ficará visível conforme mostrado abaixo -

Note - Para o restante do tutorial, será assumido que o leitor é capaz de criar os arquivos HTML e CSS de acordo com a estrutura de pastas fornecida no método acima.

Método de fundo múltiplo

Neste método, teremos imagens diferentes aparecendo conforme o usuário rola a página para baixo. Existe uma imagem com lápis, que é usada em diferentes combinações de cores para ilustrar esse efeito.

Observe o seguinte código para a página HTML conforme mostrado abaixo -

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <h1>Multiple Background Example</h1>  
      <div class = "parallax">  
         <div class = "bg__First">First</div>  
         <div class = "bg__Second">Second</div>  
         <div class = "bg__Third">Third</div>  
         <div class = "bg__Fourth">Fourth</div>  
      </div>  
   </body>
   
</html>

Semelhante ao exemplo anterior, usaremos styles.cssarmazenado no mesmo local que este arquivo HTML. Temos três div diferentes nomeados como Primeiro, Segundo, Terceiro e Quarto.

O código CSS para a rolagem paralaxe é fornecido abaixo -

body, html {
   height : 100%;  
   font-family : sans-serif;  
}  

.parallax [class*="bg__"] {  
   position : relative;  
   height : 50vh;  
   text-indent : -9999px;  
   background-attachment : fixed;  
   background-position   : top center;  
   background-size       : cover;  
}  
.parallax [class*="bg__"]:nth-child( 2n) {  
   box-shadow : inset 0 0 1em #111;
}  
.parallax .bg__First, .bg__Fourth {  
   height : 100vh;  
}  
.parallax .bg__First {  
   background-image : url("parallax0.png");  
}  
.parallax .bg__Second {  
   background-image : url("parallax1.png");  
}  
.parallax .bg__Third {  
   background-image : url("parallax2.png");    
}  
.parallax .bg__Fourth {  
   background-image : url("parallax1.png");   
}

Aqui, criamos o efeito de paralaxe da linha 7, propriedade importante aqui é background-attachment:fixed.

Usando esta propriedade, a primeira imagem com lápis de cor ficará sempre no topo. Conforme você rola para baixo, imagens diferentes, conforme descrito na linha 28, começarão a aparecer.

Como resultado, você poderá ver o efeito de paralaxe conforme mostrado no GIF abaixo. A imagem a seguir é a captura de tela do exemplo que consideramos para vários planos de fundo.

Pure CSS Parallax

Vamos combinar o conhecimento dos dois métodos anteriores e criar um efeito avançado de Pure CSS Parallax.

A diferença será a maneira como organizamos o image elemento e o z-transformpropriedade. A explicação da propriedade será fornecida após o código CSS.

Crie o arquivo HTML com o código a seguir usando o método usual do Bloco de Notas.

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <div class = "wrapParallax">  
         <div class = "parallax_one">  
            <img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">  
         </div>  
         <div class = "parallax_two">  
            <h1>Pure CSS Parllax Advanced Level</h1>  
         </div>  
         <div class = "parallax_three">  
            <img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">  
         </div>  
      </div>  
   </body>
   
</html>

Para o arquivo CSS, o código é fornecido a seguir -

body, html {  
   padding: 0;  
   margin: 0;  
}  

h1 {  
   color: blue;  
   text-align: center;  
   padding: 20px;  
   text-shadow: 0px 0px 10px #fffff;  
}  

img {  
   width:100vw;  
   height:100vh;  
}  

.wrapParallax {
   perspective: 100px;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: auto;  
}  

.parallax {  
   position: absolute;  
   top: 0;  
   bottom: 0;  
   right: 0;  
   left: 0;  
}  

.parallax_one {  
   transform: translateZ(-100px) scale(2)  
}  

.parallax_two {  
   z-index: 10;  
   transform: translateZ(-200px) scale(3)  
}  

.parallax_three {  
   margin-top: 100vh;  
}

Análise de Código

Fixamos a posição da primeira camada em line 26 usando position:absolutepropriedade. As posições também são codificadas para 0.

Dentro parallax_two, que é a camada com título, aplicamos z-index: 10para fornecer um efeito flutuante ao cabeçalho. A camadaparallax_three é movido para a parte inferior, fornecendo uma propriedade de margem superior.

Assim, podemos aumentar o nível de complexidade em nosso efeito Parallax.

Observe o efeito conforme mostrado na figura abaixo.

↰ Previous page Next page ↱