Vertical Scroll


template

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:

http://www.kreativekel.com


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>&copy; 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

 


Publicado por: 2bdesign


14



  1. Elma diz:

    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

  2. 2bdesign diz:

    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

  3. Pedro diz:

    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?

  4. 2bdesign diz:

    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

  5. Rodrigo diz:

    é 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?

  6. 2bdesign diz:

    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

  7. Gian Carlo diz:

    Boa noite, teria como alterar a barra do menu para top, deixando de ficar a esquerda..

    Abraço!

  8. 2bdesign diz:

    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

  9. Gian Carlo diz:

    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!

  10. 2bdesign diz:

    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

  11. Raphael diz:

    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?

  12. 2bdesign diz:

    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

  13. Nina diz:

    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


Faça um comentário