Parallax simples e fácil

Com o evoluir da Web, o Parallax está ai.

Para ajudar os leitores nesta nova tendência, vou criar uma serie de tutoriais com vários efeitos Parallax.

Neste primeiro tutorial vou mostrar uma forma de fazer Parallax simples e fácil sem dores de cabeça, utilizando duas imagens fixas para criar o efeito de que o texto está a passar por cima e que existem várias layers no nosso site.

Que estrutura html usar?

Para este exemplo vamos utilizar duas imagens de fundo fixas onde vamos adicionar o nosso efeito Parallax, vamos então criar a nossa estrutura em Html.

index.html:

<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="imagemParallax" style="background-image:url('imagem1.jpg');">
    <div class="wrapper">
        <span>Alguma coisa</span>
    </div>
</div>
<div class="divTexto">
    <div class="wrapper">
        <h1>
            Titulo
        </h1>
        <p>
            Texto
        </p>
    </div>
</div>
<div class="imagemParallax" style="background-image:url('imagem2.jpg');">
    <div class="wrapper">
        <span>Alguma coisa</span>
    </div>
</div>
<div class="divTexto">
    <div class="wrapper">
        <h1>
            Titulo
        </h1>
        <p>
            Texto
        </p>
    </div>
</div>
</body>
</html>

Na estrutura acima temos duas classes principais divididas por quatro Divs.

A class imagemParallax será uma imagem fixa por onde o texto passa, para criar o tal efeito Parallax.

A class divTexto é a nossa Div que levará o conteúdo do site.

Estilos CSS

No objectivo deste tutorial vou criar uma folha bastante simples, pois o objectivo é o efeito Parallax e não o aspecto estético perfeito da página. Vou portanto deixar a originalidade para o leitor.

style.css:

*{
    margin:0px;
    padding:0px;
}

p{
    font-size:13px;
}

h1{
    font-size:80px;
}

.imagemParallax{
    height:300px;
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    padding-top:200px;
}

.imagemParallax .wrapper{
    text-align:center;
}

.imagemParallax span{
    background-color:white;
    font-size:45px;
}

.divTexto{
    background-color:white;
}

.divTexto .wrapper{
    padding-top:150px;
    padding-bottom:150px;
}.wrapper{
    width:940px;
    margin:0 auto;
}

Resultado

Temos então dois espaços para conteúdo e dois espaços para inserção de uma catch frase, destaque ou titulo. A imaginação é o limite.

Como estou ainda a tratar de um servidor para publicar lá as minhas demos e Freebies (sim, eles estão a chegar) só consigo deixar algumas imagens de como seria o efeito.

Demo Parallax Page
Demo1
Demo Parallax Page
Demo2
Demo Parallax Page
Demo3
Demo Parallax Page
Demo4

No caso de teres alguma duvidas deixa um comentário ou fala comigo no facebook, o contacto está do lado direito do site.

Não te esqueças de subscrever o blog na sidebar e fazer gosto na página do facebook e twitter, mais está para vir, não percas.

Advertisements

5 thoughts on “Parallax simples e fácil

  1. Parabéns! Show de bola, amigo… Era o que eu estava procurando.. sem JS JQuery e outras coisas.. há 1 ano eu fiz dessa forma e deletei, pois era parte de um projeto de faculdade. Esse ano fui fazer e não lembrava como, mas seu artigo foi fundamental.. Parabéns!

    1. Ainda bem que gostaste.
      A ideia era mesmo dar um exemplo de parallax sem qualquer javascript.
      Obrigado pelo comentário, e se quiseres segue-me aqui no wordpress que mais está para vir 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s