Одностраничное портфолио на jQuery
В этой статье я покажу, как можно сделать при помощи jquery красивый одностраничный сайт. Одностраничные сайты, как правило, прекрасный способ показать вашим потенциальным клиентам насколько вы хороши в том, что вы делаете. Этот сайт не исключение. Данный сайт прекрасно подойдет для вашего портфилио.
Начнем с простого - HTML
HTML
<div id="main">
<section id="box1" class="box">
</section>
<section id="box2" class="box">
</section>
<section id="box3" class="box">
</section>
<section id="box4" class="box">
</section>
<section id="box5" class="box">
</section>
<section id="box6" class="box">
</section>
<section id="box7" class="box">
</section>
<section id="box8" class="box">
</section>
<section id="box9" class="box">
</section>
</div>
Каждый раздел должен иметь свой цвет. Разделы имеют свой уникальный id, таким образом, мы можем каждому блоку назначить свой уникальный цвет.
Далее необходимо в каждую секцию добавить навигационную панель.
HTML
<div id="main">
<section id="box1" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav></section>
<section id="box2" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav></section>
<section id="box3" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav></section>
<section id="box4" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav></section>
<section id="box5" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav></section>
<section id="box6" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav></section>
<section id="box7" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav></section>
<section id="box8" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav></section>
<section id="box9" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav></section>
</div>
После этого мы можем в любой раздел добавить какой-нибудь контент.
HTML
<div id="main">
<section id="box1" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>
<h2>John Smith</h2>
<h3>
Welcome to the portfolio of the great John Smith!
</h3></section>
<section id="box2" class="box">
<nav>
<ul>
<li id="link1"><a href="#">Home</a></li>
<li id="link2"><a href="#">Contact</a></li>
<li id="link3"><a href="#">About</a></li>
<li id="link4"><a href="#">Services</a></li>
<li id="link5"><a href="#">Why hire me?</a></li>
<li id="link6"><a href="#">Awards</a></li>
<li id="link7"><a href="#">Portfolio</a></li>
<li id="link8"><a href="#">Clients</a></li>
<li id="link9"><a href="#">Resume</a></li>
</ul>
</nav>
<h3>Contact Me</h3>
<p>
<ul class="contentul">
<li>Phone number: (123) 456 7890</li>
<li>Fax: (123) 456 7890</li>
<li>Email: johnsmith@johnsmith.com</li>
</ul>
</p></section>
// и так далее
Прекрасно! База, то есть HTML, создана, теперь самое время перейти к CSS. Осталось подключить стили, чтобы преобразовать нашу разметку должным образом.
CSS
Начнем с общих стилей.
CSS
body {
font-family: arial;
font-size: 15px;
overflow: hidden;
}
h2 {
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 54px;
margin-top: 50px;
}
h3 {
color: #ffffff;
text-align: center;
font-family: Verdana;
font-size: 16px;
margin-top: 20px;
}
p {
color: #ffffff;
text-align: center;
font-family: arial;
font-size: 16px;
line-height: 24px;
margin-top: 20px;
}
.contentul {
text-align: center;
font-size: 16px;
line-height: 24px;
color: #ffffff;
}
В следующем шаге добавим стили навигации.
CSS
nav {
height: 50px;
width: 100%;
}
nav ul li {
height: 50px;
width: 11.1%;
text-align: center;
float: left;
}
nav ul li a {
text-decoration: none;
color: #ffffff;
line-height: 50px;
display: block;
}
#link1 {
background: #fe4632;
}
#link2 {
background: #005fe5;
}
#link3 {
background: #ffb40a;
}
#link4 {
background: #80bf34;
}
#link5 {
background: #26bfa3;
}
#link6 {
background: #2d93cf;
}
#link7 {
background: #ab250f;
}
#link8 {
background: #e99702;
}
#link9 {
background: #9adf56;
}
Как всегда, очень просто. В каждой секции присутствует элемент nav, который представляет собой неупорядоченный список ссылок. Каждая ссылка занимает 11,1% от ширины элемента nav, таким образом, ссылки занимают все окно браузера пользователя. Каждая ссылка имеет свой цвет, который совпадает с цветом секции, на которую ссылается ссылка.
Стили секций:
CSS
.box {
float: left;
}
#box1 {
background: #fe4632;
}
#box2 {
background: #005fe5;
}
#box3 {
background: #ffb40a;
}
#box4 {
background: #80bf34;
}
#box5 {
background: #26bfa3;
}
#box6 {
background: #2d93cf;
}
#box7 {
background: #ab250f;
}
#box8 {
background: #e99702;
}
#box9 {
background: #9adf56;
}
Каждый блок смещен влево (float:left), таким образом, секции располагаются друг за другом по горизонтали или по вертикали, в зависимости от ширины контента. Каждый блок имеет свой цвет.
jQuery
Прежде чем мы погрузимся в кодирование, я попробую объяснить принцип работы. Когда документ загружен, запускается функция ‛resizeBoxes‛, которая меняет размеры блока на размеры идентичные окну просмотра пользователя. Та же самая функция будет запускаться при изменении области просмотра документа. Когда пользователь кликает по ссылке, левой и верхнее поле блока #main плавно смещаются, таким образом, пользователь переходит к нужной нам области. Для осуществления данного эффекта понадобится функция ‛goTo‛.
Вот базовый шаблон, который необходимо заполнить.
JQuery
$(document).ready(function(){
function resizeBoxes() {
}
resizeBoxes();
$(window).resize(function() {
resizeBoxes();
});
$('nav ul li a').click(function(){
return false;
});
function goTo(horizontal,vertical) {
}
});
Теперь, когда у нас есть скелет, мы можем писать реальные функции.
JQuery
function resizeBoxes() {
var browserWidth = $(window).width();
var browserHeight = $(window).height();
$('#main').css({
width: browserWidth*3,
});
$('.box').css({
width: browserWidth,
height: browserHeight,
});
}
resizeBoxes();
$(window).resize(function() {
resizeBoxes();
});
$('nav ul li a').click(function(){
return false;
});
В этой функции размеры блока #main меняются так, чтобы секции уместились в сетку размером 3X3, причем каждая секция подстраивается под размеры области просмотра документа. Затем идет обработчик, который меняет размеры каждой секции, всякий раз, когда меняются размеры окна браузера. Наконец, при нажатии на ссылку возвращается false, что фактически предотвращает переход по ссылке.
Далее остановимся на функции goTo.
JQuery
function goTo(horizontal,vertical) {
var browserWidth = $(window).width();
var browserHeight = $(window).height();
$('#main').animate({
marginLeft: '-'+browserWidth*horizontal,
marginTop: '-'+browserHeight*vertical,
}, 1000);
}
Эта функция получает размеры окна пользователя и заносит их в две переменные. Затем она плавно ‘перемещает’ поля блока #main таким образом, что пользователь переходит туда, куда нужно Нам.
Наконец, мы должны добавить эту функцию, чтобы она вызывалась при клике по навигационным ссылкам.
JQuery
$('#link1 a').click(function(){
goTo(0,0);
});
$('#link2 a').click(function(){
goTo(1,0);
});
$('#link3 a').click(function(){
goTo(2,0);
});
$('#link4 a').click(function(){
goTo(0,1);
});
$('#link5 a').click(function(){
goTo(1,1);
});
$('#link6 a').click(function(){
goTo(2,1);
});
$('#link7 a').click(function(){
goTo(0,2);
});
$('#link8 a').click(function(){
goTo(1,2);
});
$('#link9 a').click(function(){
goTo(2,2);
});
Наличие функции goTo существенно сокращает наши дальнейшие вычисления для каждого отдельного клика.
Вот и все - портфолио готово. Если у вас появились какие-нибудь вопросы или замечания, оставляете комментарии.
источник
Комментарии к статье
Спасибо большое, статья сильно помогла!
Но я бы хотел сделать скроллирование по вертикали, ане по горизонтали, в каком участке кода мне менять, подскажите, пожалуйста.