A pedido de alguns leitores deste blog, vamos hoje apresentar um tutorial para a criação de um “single page website” com scroll vertical, que é o mais comum.
Há algum tempo atrás apresentámos o tutorial horizontal scroll, e que teve algum sucesso junto dos leitores. No entanto, acaba por trazer alguns inconvenientes dado que a largura da página tem de ser definida previamente, ao contrário da altura.
Da mesma forma que no horizontal scroll, vamos mostrar como fazer um site com scroll vertical, utilizando html5, css3 e Java Script para suavizar o scroll. Manter a simplicidade é o truque para um bom site!
O objetivo será criar um site com uma única página. O menu de navegação será fixo à esquerda e podemos utilizá-lo para navegar ou, em alternativa, a barra vertical de scroll.
Fica aqui um exemplo de um site produzido com o código deste tutorial:
Estrutura base do código html:
A estrutura do código é bastante simples, dado que a navegação e o scroll é baseado em anchor tags. Assim, os menus de navegação têm de estar associados a cada secção. Neste caso, o id do menu corresponde ao id da secção da página.
Criámos uma página com 4 secções: home, about, services e contact.
Utilizamos as tags <nav></nav> para criar a estrutura de navegação e que irá ser posicionada à esquerda no site.
Para cada secção de conteúdo utilizamos as tags <div class=”page” e atribuímos o mesmo id que o menu correspondente ficando: <div class=”page” id=”page1”>
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>vertical scroll</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<nav>
<ul>
<li><a href=”#page1″ class=”smoothScroll” id=”home”><span>home</span></a></li>
<li><a href=”#page2″ class=”smoothScroll” id=”about”><span>about</span></a></li>
<li><a href=”#page3″ class=”smoothScroll” id=”services”><span>portfolio</span></a></li>
<li><a href=”#page4″ class=”smoothScroll” id=”contact”><span>contact</span></a></li>
</ul>
</nav>
<div class=”page” id=”page1″>
<a id=”home”></a>
<h1>Home</h1>
<p>Aqui será a página inicial</p>
</div><!–Fim do page–>
<div class=”page” id=”page2″>
<a id=”about”></a>
<h1>About</h1>
<p>Aqui será a página sobre mim…</p>
</div><!–Fim do page–>
<div class=”page” id=”page3″>
<a id=”services”></a>
<h1>Services</h1>
<p>Aqui será a página acerca dos serviços da empresa…</p>
</div><!–Fim do page–>
<div class=”page” id=”page4″>
<a id=”contact”></a>
<h1>Contact</h1>
<p>Aqui será a página acerca de contactos!!</p>
</div><!–Fim do page–>
<footer><p>© all rights reserved</p></footer>
</body>
</html>
Estrutura do código CSS:
No código CSS, vamos neste caso colocar cada secção em cores diferentes, porque no exemplo não vamos ter muito conteúdo. Vamos também atribuir uma altura mínima para cada secção para o scroll se realizar, caso contrário todas as secções ficariam numa única página.
Apresentamos aqui um design super simples para ser o mais compreensível possível, sem imagens e pouco texto.
Estrutura base do código css:
@charset “utf-8”;
/* CSS Document */
html{
margin:0 auto;
font-family:Verdana, Geneva, sans-serif;
}
/*Navegação*/
nav{
position:fixed;
margin-top:10%;
padding-left:50px;
}
nav li{
list-style:none;
font-size:24px;
padding:5px;
}
nav li a{
font-weight:bold;
text-decoration:none;
color:#055a4d;
}
nav li a:hover{
font-weight:bold;
text-decoration:underline;
color:#9defe3;
}
/*Páginas ou secções*/
.page{
width:100%;
height:1100px;
padding: 10% 0 0 30%;
}
#page1{
background-color: #f1e3cb;
}
#page2{
background-color:#09b1b7;
}
#page3{
background-color:#f1e3cb;
}
#page4{
background-color:#e95d42;
}
footer{
width:100%;
}
footer p{
text-align:center;
padding-top:10px;
}
Smoothscroll:
Para tornar o scroll mais suave, utilizamos o script smoothscroll que pode ser obtido no link obter ficheiros, no final do tutorial.
Para utilizar o ficheiro devemos utilizar o seguinte código antes da tag </head> no código html:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<script src=”smoothscroll.js” type=”text/javascript”></script>
Ver resultado final Obter ficheiros
Bom dia!
Ao baixar o arquivo smoothscroll, está dando dentro dele a mensagem :
FILE DELETED
vertical_scroll.rar->vertical_scroll\smoothscroll.js has been removed since it was found to match the FILE FILTER= ExchangeLabs File Filter List 1: *.js file filter.
Grata
Olá Elma,
Agradecemos o aviso que nos fez. No entanto, ao fazermos o download verificamos que o ficheiro smoothscroll.js estava lá. Não terá sido removido por algum anti virus?
2Bdesign
Eu gostaria de por esse código em um template já existente que já tem menu existente no lugar certinho… Como faço pra suavizar o scroll sem alterar dados do meu template atual?
Olá Pedro,
Para utilizar o scroll suave, guarde o ficheiro smoothscroll.js na directoria do seu site. Depois chame o ficheiro a partir do html do template:
Deve ficar antes da tag
2Bdesign
é possível colocar o sistema de rolagem vertical quanto o horizontal ao mesmo tempo em uma página trabalhando com anchor nos links e desabilitando a barra de rolagem?
Olá Rodrigo,
É uma questão que nos tem sido apresentada, mas ainda não publicámos nenhum tutorial sobre o assunto. Para já, deixo-vos um link para um site sobre o que pretende.
http://alvarotrigo.com/fullPage/
Um abraço,
2Bdesign
Boa noite, teria como alterar a barra do menu para top, deixando de ficar a esquerda..
Abraço!
Olá Gian Carlo,
No código CSS altere a tag nav para:
nav{
position:fixed;
width:100%;
height:100px;
}
nav li{
list-style:none;
font-size:24px;
padding:5px;
float:left;
}
Poderá fazer outras alterações, mas apenas com isto a barra já fica no topo.
2Bdesign
Ficou muito bom, mas tem como usar uma imagem de fundo tipo usar uma tabela, para o menu ter uma cor de fundo única e poder colocar uma logo tbm ??
Obrigado e excelente trabalho!
Sim, claro,
Uma vez que sabemos que é a tag nav que queremos trabalhar, no ficheiro css, em nav{} introduzimos a propriedade background-color: ou background-image: .
Abraço
2Bdesign
Gostaria de saber como faço para deixar esse menu da pagina, alem de FIXO queria deixa-lo CENTRALIZADO para quando eu tirar e aumentar o zoom da pagina o menu nao sair do lugar.
Teria como?
FIXO e CENTRALIZADO
Valeu, otimo blog, aprendi varias coisas.
É feito em wordpress?
Olá Raphael,
Estamos gratos pelos seus comentários e sim, o nosso blog é wordpress ;).
Quanto à sua questão, uma vez que o meu tem a propriedade FIXA, ou seja, no código css: position:fixed; o menu por si não sai do sítio, mas é incompatível com a propriedade margin:auto; que a colocaria centrado. A opção é dar margem à esquerda em percentagem para se adaptar automaticamente ao espaço disponível, ou seja:
margin-left:50%;
Abraço
2Bdesign
Olá. Achei excelente a dica do smooth. Mas ainda tenho um problema a resolver com meu menu e queria ver se você pode me ajudar: é que eu preciso que, ao estar ativo um ítem do menu, ele tenha uma classe especial.
Grata desde já.
Nina
Olá Nina,
Pensamos que o problema seja o facto de a tag já ter uma class atribuída: class=”smoothScroll”. Mas pode utilizar mais do que uma class no mesmo elemento html. Para adicionar a class=”especial”, por exemplo, ficaria da seguinte forma: class=”smoothScroll especial”. Isto do lado do html, claro. No css terá de acrescentar a linha de código: .especial{}.
Esperamos ter ajudado.
Abraço
2Bdesign