Página única com efeitos deslizantes

[SamBuilder 2]

Pessoal,

 

Alguém poderia me indicar algum tutorial pra criar um layout com uma página única e com esses efeitos de divs deslizantes e sobrepostas??

 

Como exemplo vou citar o site da cantora Aline Barros: http://www.alinebarros.com.br

 

Quero tentar criar algo semelhante.

 

[flaviasam 2]

Deve dar um trabalhinho. Mas na minha opinião, acho esses sites horríveis. Pois as pessoas até desistem por vezes de ver a página, pois demora tanto a carregar que desanima. Pois todas as informações do site são carregadas de uma vez só. Imagine a pessoa com internet lenta. Sofre até carregar tudo.

[SamBuilder 2]

Pois é Flavia mais infelizmente preciso entregar um projeto e o cliente quer algo parecido. Vou tentar diminuir o peso o máximo que puder. ;) :)

[thyquevedo 6]

Bom dia Sam, tudo bem?

 

Pesquisa sobre layout one page + parallax. Tem algumas coisas meios prontas já parecidas com isso. :D

[L. Henrique 179]

Deve dar um trabalhinho. Mas na minha opinião, acho esses sites horríveis. Pois as pessoas até desistem por vezes de ver a página, pois demora tanto a carregar que desanima. Pois todas as informações do site são carregadas de uma vez só. Imagine a pessoa com internet lenta. Sofre até carregar tudo.

 

Depende muito Flavia, é até menos trabalhoso fazer OnePage do que ficar se perdendo em mais de 10 páginas diferentes e replicando ou adicionando include do mesmo conteúdo nas outras páginas. Também leve em consideração que você pode carregar os elementos da página conforme scrollTop (JQ) - esse da um trabalhinho.

 

---------------------------------------------------------------------------------

 

SamBuilder,

 

Vamos ao seu caso... OnePage é simples, você pode estruturar o seu site inteiro na index.html / index.php da seguinte forma:

<section id="inicio">
   <!-- Conteúdo -->
</section>

<section id="quemSomos">
   <!-- Conteúdo -->
</section>

<section id="portfolio">
   <!-- Conteúdo -->
</section>

<section id="contato">
   <!-- Conteúdo -->
</section>

<footer>
   <!-- Conteúdo -->
</footer>

Ou seja, pra fazer o OnePage precisa ser organizado. Pode ser uma div com um id ou classe que identifique onde ele está ou até mesmo comentários para definição de cada bloco.

 

- Agora vamos ao efeito das "divs sobrepostas".

 

Isso se chama Parallax. Nada mais nada menos do que dividir em várias camadas um único plano. Então imagine que você tem uma tela plana e dentro dela você consegue definir qual elemento fica atrás, qual fica na frente e por ai vai. Como Photoshop, entende?

 

Pra isso você vai precisar entender um pouco de CSS, positions e tudo mais. Vamos partir do básico:

• Você vai precisar de uma imagem de fundo, utilizando de background: url('link-da-imagem.jph');
• Você vai precisar definir essa imagem como position: fixed para que ela "ande" com o scroll.
• Você vai precisar de mais algumas divs comuns.

Veja um exemplo que preparei aqui no JSFiddle - Vou deixar o código da demo aqui abaixo também.

 

HTML:

<section id="inicio">
  <div class="imagem"></div>
</section>

<section id="quemsomos">
  Quem Somos
</section>

<section id="projetos">
  Projetos
</section>

CSS:

section, .imagem {
  width: 100vw;
  height: 100vh;
}

.imagem {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  background: url('http://placehold.it/600x600') no-repeat center center;
  background-size: cover;
}

#quemsomos {
  background: black;
  color: white;
}
#projetos {
  background: blue;
  color: white;

Boa sorte e bons estudos!

 

 

[SamBuilder 2]

Valeu thyquevedo e L. Henrique pelas dicas. Seu exemplo Henrique me abriu bastante a visão para buscar mais conhecimento. Vou me aprofundar mais no assunto.

 

Brigadão galera.