В сегодняшнем уроке я покажу Вам как создать сайт, который будет прокручиваться по горизонтали.
Возможно Вы уже встречали подобные сайты в Интернете, но не знали как такое воплотить в жизнь.
Все привыкли, что сайты должны быть с вертикальным скроллом и это естественно. Но всегда можно немного поэкспериментировать.
Существуют два существенных недостатка таких сайтов:
- Пользователи могут не сообразить что к чему и просто уйдут
- Компьютерные мышки не приспособлены к горизонтальному скроллу
Вот что мы будем создавать:
Начнем!
Что нам понадобится
Прежде всего нам потребуются файлы: index.html, style.css и лого. Кроме этого мы воспользуемся фреймворком jQuery и плагинами ScrollTo и LocalScroll.
Начнем с написания разметки, далее стили, после этого внедрим jQuery и плагины.
HTML
Шапка документа
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Scrolling Website With jQuery</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>
</script>
<script src="js/jquery.localscroll-min.js" type="text/javascript">
</script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript">
</script>
</head>
Из кода выше Вы можете увидеть, что я предпочел загружать фреймворк с Гугла, а 2 плагина находятся в папке /js. Мы вернемся к нашей шапке немного позже, когда будем работать с jQuery.
Теперь давайте создадим наше меню:
<body>
<a name="home"></a>
<div id="menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#box1">Box 1</a></li>
<li><a href="#box2">Box 2</a></li>
<li><a href="#box3">Box 3</a></li>
<li><a href="#box4">Box 4</a></li>
<li><a href="#box5">Box 5</a></li>
<li><a href="#box6">Box 6</a></li>
<li><a href="#box7">Box 7</a></li>
<li><a href="#box8">Box 8</a></li>
</ul>
</div>
В меню я размещаю ссылку на главную и еще восемь других ссылок. Эти ссылки будут вести на ячейки с контентом, которые мы создадим вскоре.
Далее идет раздел с основной частью контента:
<div id="container">
<div id="header">
<h1><img src="images/logo.png" alt="Logo"></h1>
<p>This simple page is an example of a horizontal scrolling website. While we
may not be used to this format it can certainly be used in creative ways. After
all, we either read from left to right or from right to left. Right?</p>
</div>
<div id="box1" class="box">
<h2><a name="box1">First Box</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
<div id="box2" class="box">
<h2><a name="box2">Second Box</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
<div id="box3" class="box">
<h2><a name="box3">Third Box</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
<div id="box4" class="box">
<h2><a name="box4">Fourth Box</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
<div id="box5" class="box">
<h2><a name="box5">Fifth Box</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
<div id="box6" class="box">
<h2><a name="box6">Sixth Box</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
<div id="box7" class="box">
<h2><a name="box7">Seventh Box</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
<div id="box8" class="box">
<h2><a name="box8">Eighth Box</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
</div>
</div>
Обратите внимание на якоря, которые были добавлены к заголовкам второго уровня ‘a name’. Нам они пригодятся при нажатии на ссылки меню - после нажатия браузер покажет нам необходимую ячейку.
CSS
body {
background:#0a0a0a;
text-align:left;
color:#666;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}
a {
color: #ffffff;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}
a:visited {
color: #aaaaaa;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}
a:hover {
color: ffffff;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}
h1 {
width: 600px;
border: none;
padding: 35px 0 0 0;
}
h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}
h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}
p {
color:#fff;
font-size: 20px;
line-height: 38px;
font-family: 'Trebuchet MS', verdana, helvetica, sans-serif;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}
img {
border:none;
}
#header {
width: 360px;
float: left;
margin: 0 15px 0 0;
padding: 0;
}
#menu {
background: #333333;
position: fixed;
top: 40px;
left: 0;
border: 1px solid #000;
clear: both;
float: left;
font-family: helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
margin: 0;
padding: 18px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li{
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0 10px 0 10px;
}
#menu ul li a{
text-decoration: none;
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0;
}
#menu ul li a:hover{
text-decoration: none;
list-style-type: none;
color: #fff;
display: inline;
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 120px; left: 40px;
width: 6000px;
margin: 0;
padding: 0;
}
.box {
background: #111111;
border: 3px dashed #222222;
width: 500px;
float: left;
line-height: 22px;
margin: 30px;
padding: 5px 30px 30px 30px;
}
.box p {
color:#aaaaaa;
font-size: 16px;
line-height:24px;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}
Как Вы можете заметить ширина div ‘container’ 6000 пикселей. Каждая ячейка с текстом 500 пикселей. Если мы прибавим все ячейки, шапку и отступы все равно еще будет пространство.
Я сделал меню прозрачным используя:
filter: alpha(opacity=75);
opacity: .75;
Причина по которой я сделал меню прозрачным - это использование фиксированного позиционирования. Я хочу, чтобы меню всегда было видимым, вне зависимости от ячейки, которую Вы просматриваете. Также я использовал z-index для того, чтобы меню всегда было над другими объектами.
jQuery
Дописываем немного кода в нашу шапку:
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll();
});
</script>
Тем самым мы инициализируем наши 2 плагина.
Плагин LocalScroll очень полезный. Значение ‘defaults.axis’ ‘x’ говорит браузеру о горизонтальном скролле. Значение ‘y’ используется для вертикального скролла.
На сегодня все! Спасибо за внимание!