Se bem que o habitual é encontrarmos na Web sites com longo scroll vertical, a nossa imaginação e vontade de criar pode-nos levar mais longe.
Neste artigo, vamos mostrar como fazer um site com scroll horizontal, utilizando html5, css3 e jQuery para suavizar o scroll.
O objectivo 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 horizontal de scroll.
Criámos uma página com 4 secções: home, about, services e contact.
Utilizámos 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 utilizámos as tags section.
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>horizontal scroll Website</title>
</head>
<body>
<header>
<div id=”logo”></div>
</header>
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#about”>About us</a></li>
<li><a href=”#services”>Services</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</nav>
<section class=”conteudo” id=”home”>
<p>texto</p>
</section>
<section class=”conteudo” id=”about”>
<p>texto</p>
</section>
<section class=”conteudo” id=”services”>
<p>texto</p>
</section>
<section class=”conteudo” id=”contact”>
<p>texto</p>
</section>
</body>
</html>
Estrutura base do código css:
No código CSS, devemos ter em conta a largura da tag <body> de forma a que esta crie scroll horizontal, dado que por regra é criado o scroll vertical para receber todo o conteúdo do site.
@charset “utf-8″;
body {
width:500%;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#14253d;
text-align:justify;
position:absolute;
margin:0px;
}
#logo{
position:fixed;
width:200px;
height:169px;
}
header{
width:100%;
height:200px;
}
nav{
float:left;
position:fixed;
height:100%;
width:250px;
margin:100px 200px auto auto;
}
nav li{
display:block;
padding:10px;
}
nav li a{
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
text-decoration:none;
font-weight: bolder;
color:#0d8bb1;
}
nav li a:hover{
color:#00a79d;
}
.conteudo{
width:850px;
height:600px;
float:left;
margin:30px auto auto 250px;
padding-left:250px;
border-left:solid;
border-left-color:#098bb1;
}
.conteudo p{
margin:150px 200px auto auto;
}
Para tornar o scroll mais suave, utilizámos o código javascript:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery.easing.1.3.js”></script>
<script type=”text/javascript”>
$(function() {
$(‘ul li a’).bind(‘click’,function(event){
var $anchor = $(this);
$(‘html, body’).stop().animate({
scrollLeft: $($anchor.attr(‘href’)).offset().left
}, 1000);
event.preventDefault();
});
})
</script>
Podem obter todos os ficheiros completos com imagens e texto nos links abaixo. Mas atenção, se usar o IE < que a versão 9, é natural que o html5 não funcione.
Olá Aynê,
Tem de dar uma largura na página para suportar os links extra. No código css deve aumentar o valor .conteudo{ width:850px; para um valor superior. Vá testando até ser suficiente.
2Bdesign
Muito obrigado!!
Serviu muito como exemplo simples e claro de um site de scroll horizontal e html5.
Abraço!