Разметка страницы с интересной анимацией jQuery

В этом уроке я покажу Вам как сделать разметку сайта с интересным эффектом перехода между пунктами меню. Все будет происходить на одной странице и я уверен, что Ваши посетители останутся в восторге от просмотра Вашего ресурса.

Восхитительная разметка с помощью jQuery, HowToMake - Дизайн и разработка сайтов

Скачать 882

Не будем многословными, а приступим к делу!

HTML

Создадим файл index.html и используя современные теги HTML5 запишем в него следующий код:

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

Все очень просто каждый section представляет собой часть одного большого блока и с помощью идентификаторов, которые мы присвоили каждому, через стили, чуть позже,  зададим определенный background.

Следующим шагом добавим навигацию для переходов между страницами нашего будущего сайта и какую-нибудь текстовую информацию:

<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>How To Make</h2>
		<h3>Восхитительная разметка с помощью jQuery</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>
		<h2>How To Make</h2>
		<h3>Восхитительная разметка с помощью jQuery</h3>
	</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>
		<h2>How To Make</h2>
		<h3>Восхитительная разметка с помощью jQuery</h3>
	</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>
		<h2>How To Make</h2>
		<h3>Восхитительная разметка с помощью jQuery</h3>
	</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>
		<h2>How To Make</h2>
		<h3>Восхитительная разметка с помощью jQuery</h3>
	</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>
		<h2>How To Make</h2>
		<h3>Восхитительная разметка с помощью jQuery</h3>
	</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>
		<h2>How To Make</h2>
		<h3>Восхитительная разметка с помощью jQuery</h3>
	</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>
		<h2>How To Make</h2>
		<h3>Восхитительная разметка с помощью jQuery</h3>
	</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>
		<h2>How To Make</h2>
		<h3>Восхитительная разметка с помощью jQuery</h3>
	</section>

</div>

Все очень просто и понятно: мы создали базовую HTML структуру будущего сайта, думаю сложностей у Вас не возникнет, а если же что-то не получится то исходный код прилагается)

CSS

После того как мы создали базовую HTML структуру, давайте придадим ей стилей, которые сделают наш сайт привлекательным.

Начнем с общего стиля

body {
	overflow: hidden;
}
h2 {
	color: #ffffff;
	text-align: center;
	font: 54px Verdana;
	margin-top: 50px;
}
h3 {
	color: #ffffff;
	text-align: center;
	font: 16px Verdana;
	margin-top: 20px;
}

Теперь займемся навигационной панелью:

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; }

Тут тоже все просто навигационному блоку мы задали высоту 50px и ширину 100%. Элементы списка выровняли по левому краю и так как их 9 то задали им ширину 11,1%, чтобы они растягивались на всю ширину навигационного блока и выравнивание в них по центру. Ссылкам в элементах списка присвоим блочное отображение и высоту строки 50px — для отображения в середине блока, и каждой ссылки зададим свою особую заливку.

Далее займемся стилями для самих блоков, для них мы тоже зададим выравнивание по левому краю и заливку совпадающую с заливкой одноидентификаторных ссылок:

.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; }

С CSS закончили.

jQuery

Прежде чем приступить к написанию кода я внесу определенную ясность.

Мы будем использовать функцию resizeBoxes(), с помощью которой мы определим высоту и ширину окна браузера, увеличим размеры основного блока #main в три раза и блокам контента .block присвоим размеры окна браузера.

function resizeBoxes() {

	var browserWidth = $(window).width();
	var browserHeight = $(window).height();

	$('#main').css({
		width: browserWidth*3,
	});

	$('.box').css({
		width: browserWidth,
		height: browserHeight,
	});

}

resizeBoxes();

После вызовем функцию resize()

$(window).resize(function() {
	resizeBoxes();
});

Следующим шагом предотвратим обычное поведение навигационных ссылок

$('nav ul li a').click(function(){
	return false;
});

Теперь будем использовать функцию GoTo, которая просматривает и записывает размеры окна в две переменные и оживляет анимацию доставки блока при клике

function goTo(horizontal,vertical) {

	var browserWidth = $(window).width();
	var browserHeight = $(window).height();

	$('#main').animate({
		marginLeft: '-'+browserWidth*horizontal,
		marginTop: '-'+browserHeight*vertical,
	}, 1000);

}
$('#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()  мы избегаем расчетов для каждого клика, что уменьшает количество кода.

Вот такой еще один интересный анимационный эффект jQuery.

Добавить комментарий:

Комментарии
  1. Ивашка:
    14.07.2015 в 08:33

    Подскажите, как подправить скрипт, чтобы при закрытии браузера выводилось диалоговое окно или при смещение курсора из области сайта?

  2. Владимир:
    16.12.2012 в 14:28

    А как сделать подобную анимацию для загрузки следующей страницы?например-текущая страница «уезжает влево», а справа «выезжает» новая.

  3. Alexander:
    18.11.2012 в 14:25

    Спасибо большое за подсказку.
    Вопрос следом: Что делать с Iphonом, он отображает 4 окна сразу.
    Есть ли способ оптимизировать под него?
    Многие сидят уже давно на Ipad & Iphone.

  4. JAH:
    18.11.2012 в 10:48

    Alexsander, нужно блоку с меню добавить стилей

    nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

    только не забудьте, что само меню в каркасе нужно вынести из блока #main и удалить дубли с блоков .block

  5. Alexander:
    18.11.2012 в 01:36

    Наталья, а подскажите, как зафиксировать меню, чтобы только сам контент менялся.

  6. Наталия:
    22.10.2012 в 16:50

    Классное решение, единственное что я бы изменила так это оставить неподвижным верхнее меню, что бы не пришлось его дублировать на все блоки .box

© 2018 Howtomake/