главная

Теги:


Витаем в облаках - тема для сайта

В данном уроке с помощью jQuery мы сделаем макет сайта с горизонтальной прокруткой контента и параллаксом смещающихся облаков на фоне.


Шаг 1 – Разметка HTML

Сначала нужно создать структуру HTML, которая будет использоваться для построения сайта:


    
  • Главная
  • Страница 2
  • Страница 3
  • Страница 4

Элементы div с классом "inner" используются для создания рамочки вокруг контента с помощью CSS3.

Шаг 2 – CSS


В HTML файле наша таблица стилей присоединяется обычной командой вместе с таблицей сброса настроек по умолчанию с сайта YUI:



Сам код CSS представляет собой следующее:

/*** Определение стилей ***/
html			{ background:#67b2ff; font-family:Arial, Helvetica, sans-serif; }

/*** Заголовок ***/
h1#logo			{ background:url(../images/Logo.png) top left no-repeat; height:62px;
 width:481px;
					text-indent:-9999px; position:absolute; top:10px; left:10px; }

#menu			{ float:right; position:absolute; top:20px; right:10px; z-index:10; }

#menu a			{ background:#FFF; color:#67b2ff; border:#AAA 3px solid; 
 text-decoration:none; padding:10px;
					margin-right:10px; border-radius:10px; -moz-border-radius:10px; 
-webkit-border-radius:10px;}
					
#menu a:hover		{ background:#67b2ff; color:#FFF; border:#FFF 3px solid; 
text-decoration:none; padding:10px;
					margin-right:10px; border-radius:10px; -moz-border-radius:10px; 
-webkit-border-radius:10px;}

menu li		        { float:left; }

/*** Контент ***/
#wrapper	{ width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; }

#mask		{ width:400%; height:100%; }

.box		{ width:25%; height:100%; float:left; }

.content	{ width:960px; height:400px; top:20%; margin: 0 auto; position:relative; 
background:rgba(255,255,255, 0.3);
				border-radius:35px; -moz-border-radius:35px; -webkit-border-radius:35px; }
				
.inner		{ width:920px; height:360px; background:rgba(255, 255, 255, 0.3); 
border-radius:30px; -moz-border-radius:30px;
					-webkit-border-radius:30px; margin:5px; padding:15px; top:5px; 
position:relative; }

Большинство правил весьма простые и понятные.

Все, что будет прокручиваться, помещается в элемент div #wrapper. Размещая область #header выше данного элемента, мы сохраняем заголовок в стационарной позиции вне зависимости от прокрутки остального содержимого. Элемент ul #mask будет горизонтально прокручиваться, поэтому ему устанавливается ширина 100% * количество слайдов, которые в нем содержатся. В нашем примере используется 4 слайда, поэтому ширина элемента равна 400%.

Также мы хотим центрировать каждый слайд на экране. Каждый слайд определяется как элемент li с классом box. Мы делим 100% (ширину родительского элемента) на количество используемых слайдов. Поэтому получается 100% / 4 = 25%. А элемент div с классом content центрируется внутри элемента li с помощью правила margin: 0 auto; .

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

Элемент div с классом inner является уменьшенным клоном элемента div с классом content для создания эффекта просвечивающей рамочки.

Теперь у нас есть заготовка для дальнейшей работы:

 

Шаг 3 – Начинаем работать с jQuery

Созданная базовая структура вполне работоспособна без какого-либо кода Javascript. Теперь расширим функционал для тех, у кого будет возможность увидеть замечательные эффекты. Добавим библиотеку jQuery и плагин ScrollTo к нашему коду HTML в разделе заголовка страницы:



Теперь добавим прокрутку контента. Открываем тег script в разделе заголовка и в него добавляем следующий код:

$(document).ready(function() {  
	$('a.link').click(function () {  
		$('#wrapper').scrollTo($(this).attr('href'), 800);
		return false;  
	});  
});

Все очень просто! Рассмотрим подробно, что делает данный код:

  • Строка 4. Прерываем дальнейшую обработку события click браузером.

 


Таким образом, мы знаем, как прокрутить содержание определенного элемента div. Теперь добавим несколько дополнительных элементов div для облаков. Мы будем использовать два слоя облаков, элементы для которых будут размещаться непосредственно над элементом заголовка:

Также нужно добавить стили для них:

/*** Облака ***/
.clouds		{ width:100%; height:262px; overflow:hidden; }
#clouds-small	{ width:3000px; height:100%; background:url(../images/bg-clouds-small.png) repeat-x;}
#cloud2		{ position:relative; top:-262px; }
#clouds-big	{ width:4000px; height:100%; background:url(../images/bg-clouds-big.png) repeat-x;}

Мы установили размеры и фоновые изображения для элементов div облаков. Чтобы обеспечить прокрутку, делаем их значительно шире.

Теперь наш сайт должен выглядеть так:

Шаг 4 – Связываем все в одно целое!

Мы очень близки к завершению нашего проекта! Но прежде, чем использовать плагин scrollTo к перемещению облаков, нужно написать маленькую вспомогательную функцию, которая будет отслеживать точку назначения для перемещений. У нас есть 4 таких точки, соответствующих четырем ссылкам:

function setPosition(check, div, p1, p2, p3, p4) {
if(check==='#box1')
	{
		$(div).scrollTo(p1, 800);
	}
else if(check==='#box2')
	{
		$(div).scrollTo(p2, 800);
	}
else if(check==='#box3')
	{
		$(div).scrollTo(p3, 800);
	}
else
	{
		$(div).scrollTo(p4, 800);
	}
};

Мы передаем в функцию ссылку на слайд, до которого выполняется перемещение, элемент div, который будет перемещаться, и 4 положения для перемещения в формате ‘400px’. В нашем обработчике события click добавляем вызов вспомогательной функции для элемента div #cloud1:

$(document).ready(function() {  
	$('a.link').click(function () {  
		$('#wrapper').scrollTo($(this).attr('href'), 800);

	// Добавляем строку
		setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')

		return false;  
	});  
});

Так будут смещаться маленькие облака с шагом 400px для каждого слайда. Это сделает их смещение более медленным, чем у остальных слоев, и создаст иллюзию, что они находятся далеко. А большие облака мы будем смещать со скоростью в два раза большей (с шагом 800px для каждого слайда), что создаст иллюзию их близкого расположения:

$(document).ready(function() {  
	$('a.link').click(function () {  
		$('#wrapper').scrollTo($(this).attr('href'), 800);
		setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')

	// Добавляем строку
		setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')

		return false;  
	});  
});

Теперь у нас есть энергично перемещающиеся вместе с контентом облака! Добавим возможность индикации номера слайда, который выводится в текущий момент. Для этого в функции обработчике события click будем устанавливать класс selected пункту меню, который соответствует выводимому слайду:

$(document).ready(function() {  
	$('a.link').click(function () {  
		$('#wrapper').scrollTo($(this).attr('href'), 800);
		setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')
		setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')

	// Добавляем строки
		$('a.link').removeClass('selected');  
		$(this).addClass('selected');

		return false;  
	});  
});

Также нужно задать стиль CSS для класса selected:

#menu a.selected	{ background:#AAA; color:#FFF; border:#67b2ff 3px solid; 
text-decoration:none; padding:10px;
margin-right:10px; border-radius:10px; 
-moz-border-radius:10px; -webkit-border-radius:10px;}

Готово!

Источник урока: blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

 

 

Урок Создан:2011-02-08 Просмотров:2416

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


Copyright© 2009 Hosted by Zhost