- Página Inicial
- Códigos CSS Prontos
- Efeito Parallax CSS
- Voltar
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
Publicado por: Loop Nerd
1.570 Visualizações
Deixe um comentário