Движущийся фон с использованием jQuery

thumb

В этом уроке показано как сделать горизонтально прокручиваемый фон (как в старых 2D-играх) с использованием библиотеки jQuery.

Об уроке:

  • Сложность: средняя.
  • Время: 30-60 минут.

Шаг 1 — костяк HTML

В первую очередь нам надо создать начальную струкруту HTML, которую мы будем использовать. Берем любой редактор, создаем новый файл и в секции body пишем:

<div id="header">
   		<h1 id="logo">Scrolling Clouds</h1>
    	<ul id="menu">
        	<li><a href="#box1" class="link">Home</a></li>
            <li><a href="#box2" class="link">Box 2</a></li>
            <li><a href="#box3" class="link">Box 3</a></li>
            <li><a href="#box4" class="link">Box 4</a></li>
      </ul>
	</div><!-- end header -->
	<div id="wrapper">
    	<ul id="mask">
        	<li id="box1" class="box">
            	<a name="box1"></a>
                <div class="content"><div class="inner">Home Box</div></div>
            </li><!-- end box1 -->
            <li id="box2" class="box">
            	<a name="box2"></a>
                <div class="content"><div class="inner">Box 2</div></div>
            </li><!-- end box2 -->
            <li id="box3" class="box">
            	<a name="box3"></a>
                <div class="content"><div class="inner">Box 3</div></div>
            </li><!-- end box3 -->
            <li id="box4" class="box">
            	<a name="box4"></a>
                <div class="content"><div class="inner">Box 4</div></div>
            </li><!-- end box4 -->
        </ul><!-- end mask -->
    </div><!-- end wrapper -->

Шаг 2 — Немного CSS

Создаем файл layout.css и записываем в него:

/*** Style Definitions ***/
html				{ background:#67b2ff; font-family:Arial, Helvetica, sans-serif; }
 
/*** Header ***/
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; }
 
/*** Body Content ***/
#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; }

Подключаем этот файл к нашей странице. Также подключим YUI таблицу стилей.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">

clouds
Шаг 3 — подключаем jQuery

На данном этапе наша базовая конструкция готова и может быть использована без JavaScript, но это еще не конечный результат. Подключаем саму библиотеку jQuery и ее один плагин, который называется ScrollTo (название говорит само за себя).

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

Теперь необходимо выбрать контент, который будет прокручиваться. Для этого в секции head создаем новый тэг script и в нем пишем:

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

Разберем, что делает этот скрипт:

  • Строка 1 — указывает, что скрипт должен выполнятся только после загрузки страницы.
  • Строка 2 — для всех ссылок с классом link создается обрабочтик события click.
  • Строка 3 — вызывает плагин ScrollTo для div с идентификатором wrapper.
  • Строка 4 — возвращает false, что бы нне было перехода по ссылке.

Теперь мы знаем, как прокручивать контент определенного блока. Добавим несколько div’ов на нашу страницу. По два на каждый слой с облаком.

<div id="cloud1" class="clouds">
	<div id="clouds-small"></div>
</div><!-- end clouds -->
<div id="cloud2" class="clouds">
	<div id="clouds-big"></div>
</div><!-- end clouds -->

Стилизуем их с помощью CSS:

/*** Clouds ***/
.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;}

Теперь должно получится что то на подобее этого:
clouds 2

Шаг 4 — все вместе

Почти все готово. Нам надо еще написать небольшую функцию-помощник. У нас 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);
		}
};

Надо добавить вызов этой функции в обработчик нажатия ссылки с классом link:

$(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;  
	});  
});

Так мы добавим немного замедленное движение для двух тучек, которые «на переднем плане».
Ну и еще надо сделать выделение для активной ссылки:

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

Теперь в наш обработчик нажатия добавим несколько строк для установки/удаления класса «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')
        //add this
		$('a.link').removeClass('selected');  
		$(this).addClass('selected');
        //end add this
		return false;  
	});  
});

Вот собственно и все.

Оригинал статьи | Демо | Скачать

,

2 комментария
  1. ULTRA сказал(а):

    Круто! Хороший урок. Технично и креативно.

  2. qvazar сказал(а):

    Спасибо! Класно, жалю я пока не силен в CSS и jQuery. Надо попробовать может получится. Как-нибудь на Drupal прикрутить.

Оставить комментарий

Top ↑ | Main page | Back