Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
Pois é Flavia mais infelizmente preciso entregar um projeto e o cliente quer algo parecido. Vou tentar diminuir o peso o máximo que puder. ;) :)
Bom dia Sam, tudo bem?
Pesquisa sobre layout one page + parallax. Tem algumas coisas meios prontas já parecidas com isso. :D
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:
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>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!
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.
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.