Efeito Parallax CSS

Efeito Parallax CSS

Neste tutorial eu vou amostrar como fazer o efeito parallax com CSS em uma imagem de fundo. 

Eu vou utilizar quatro propriedades, você poderá utilizar uma foto como background e durante o scroll ela ficará com o background fixo.

Veja as propriedades que iremos usar no css para criar esse efeito.

1. background-position: center;

O “position” define a posição da imagem centralizada.

2. background-repeat: no-repeat;

Com a propriedade “Repeat” definimos se a imagem irá se repetir ou não

Exemplo:

(background-repeat: no-repeat;) Não vai Repetir.

(background-repeat: repeat;) Vai Repetir.

3. background-size: cover;

O “Size” é o tamanho do background, para o efeito parallax passamos o cover, para que o tamanho da imagem seja ajustada para preencher todo o elemento.

4. background-attachment:fixed;

Essa propriedade define se o background irar acompanhar o scroll valor padrão ou ficará fixo.

Vamos Adicionar o Html

Neste exemplo eu usei três sections, uma com fundo solido e duas com fundo com imagem.

<section class="paralax-um container">
    
    <div class="content">
        
        <h1 class="section_title"><i class="icofont-stuck-out-tongue"></i> Gente que ama comer.</h1>
        <p class="texto">Hamburguer e Batata Frita.</p>

    <div class="clear"></div>
    </div>
</section><!--Paralax Um-->

<section class="section-bg-solido container">
    
    <div class="content">
        
        <h1 class="section_title"><i class="icon icon-code"></i>Do seu jeito !</h1>
        
        <div class="box-icones">
            
            <i class="foods icofont-burger"></i>
            <i class="foods icofont-french-fries"></i>
            <i class="foods icofont-cola"></i>
            <i class="foods icofont-soft-drinks"></i>
            <i class="foods icofont-pizza"></i>
            <i class="foods icofont-juice"></i>

        </div><!--Box Icones-->


    <div class="clear"></div>
    </div>
</section><!--Bg Solido-->

<section class="paralax-dois container">
    
    <div class="content">
        
        <h1 class="section_title"><i class="icofont-heart-eyes"></i> Simplismente Irresistível.</h1>
        <p class="texto">Gente que ama batata frita.</p>


    <div class="clear"></div>
    </div>
</section><!--Paralax Dois-->

Vamos Adicionar o Css

.section-bg-solido  { 

    padding:2em 0; 
    background-color:#ffef00; 
    text-align:center; 
}

.box-icones { text-align:center; }
.foods { 

    color:000000; 
    font-size: 6em;
    text-align: center;
    transition: 0.3s;
    float: left;
    width: 50%;
    margin-bottom: 0.5em;

}

.foods:hover { color:#a00; }

.section_title  { 

    width: 100%; 
    float:left; 
    margin-bottom:1em; 
    font-size:1.3em;
    font-family:'open_sansextrabold'; 
    color:#ffffff;
    font-weight: 300; 
    text-align: center; 
    padding-bottom: 0.2em;
    text-shadow: 2px 1px 5px #000000; 

}

.texto  { 

    width: 100%; 
    float:left; 
    margin-bottom:1em; 
    font-size:1em;
    font-family:'open_sansregular'; 
    color:#ffffff;
    font-weight: 300; 
    text-align: center; 
    margin-bottom: 6em; 

}

.paralax-um  { 

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

}

.paralax-dois  { 

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

}

Se você achou complicado use este CSS e Html

.paralax-um  { 

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

}

<div class="paralax-um"> Role a página para ver. </div>

Veja o Resultado !

Baixar Código Veja Funcionando