Como fazer parallax com CSS

Como fazer parallax com CSS

O que é o efeito parallax?

Rolagem parallax é uma técnica de web design onde o background se movimenta em um ritmo mais lento que o primeiro plano. Isso resulta em um efeito 3D à medida que os visitantes rolam pela página, adicionando uma sensação de profundidade e criando uma experiência mais imersiva.

Como criar um efeito de rolagem parallax com CSS puro

Neste tutorial você irá configurar algumas linhas de CSS para criar um efeito de rolagem parallax em uma página Web. Iremos usar uma imagem de fundo e aplicar efeito rolagem parallax de CSS puro.

Nesta seção, projetaremos uma estrutura simples na tag <section class=”parallax container”>. 

temos dentro da tag <section> a tag <div>, <h1>, e a tag <p>. Essas tags usaremos para criar o nosso parallax.

Vamos Adicionar o HTML

    <section class="parallax container">
        
        <div class="content">
                        
            <div class="box-conteudo">
                
                
                <h1>Parallax</h1>
                <p>
                   Rolagem parallax é uma técnica de web design onde o background se<br>
                   movimenta em um ritmo mais lento que o primeiro plano.
                </p> 

            </div><!--Box COnteúdo-->


            <div class="clear"></div>
        
        </div>

    </section><!--Fecha Parallax-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso efeito de rolagem parallax.

.parallax { 

    padding:2em 0em; 
    height:auto; 
    background:url(../img/fundo-parallax.jpg); 
    background-position:center top; 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-attachment:fixed; 
    color:#fff; 
    text-align:center; 
    position:relative; 

}

.parallax .content { float:left; padding:3em 0; }


.box-conteudo   { 

    width:100%; 
    float:left; 
    padding:1em; 

}

.box-conteudo h1 {
  
    font-size: 3em;
    font-family: 'open_sansregular';
    text-align: center;
    margin-bottom: 20px;

}

.box-conteudo p {
  
    font-size: 1em;
    font-family: 'open_sansregular';
    text-align: center;

}

/*Responsivo*/
/*960PX BREAKPOINT*/
@media (min-width:60em){

    .parallax .content { padding: 9em 0; }
    .box-conteudo h1   { font-size: 5em; }
    .box-conteudo p    { font-size: 1.5em; }

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado !

Veja o Resultado baixo!

Baixar Código Veja Funcionando