• Главная»
  • Уроки»
  • jQuery»
  • Как сделать впечатляющую анимированную шапку для сайта с помощью jQuery

Как сделать впечатляющую анимированную шапку для сайта с помощью jQuery

Наполнение сайта не всегда должно быть видимым. Иногда оно может скрываться в самых неожиданных местах. В этом уроке мы сделаем мультяшную шапку, создадим два разных состояния для контента и анимируем переход между ними с помощью jQuery. Это будет большое дело для нас.

Сразу предупреждаю Вас, что необходимо будет копировать и вставлять много кода. Я расскажу про все нюансы, однако для экономии места не буду объяснять каждую строчку. Если Вам будет что-то непонятно Вы всегда можете спросить меня в комментариях. Итак, начнем!

Цель - Зеленые мультяшные холмы

Демо версия находится здесь.


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

Шаг №1 - Организуйте все файлы
Для большей ясности представляю скриншот файловой структуры всего проекта:

По скрину видно, что Вам будет необходимо три главных файла: CSS, jQuery, XHTML. Попробуем все сделать как можно проще.

Вам также необходимо будет сделать папки для Javascript плагинов и картинок. Зип файл с картинками находится здесь.

Для тех, кто интересуется - значок RSS взят из урока на сайте Photoshop star. Наложение на задний фон взято из этого сборника. Остальные рисунки были нарисованы специально для этого урока в фотошопе.

Шаг №2 - Подготовьте плагины
В этом проекте будет использовано 2 плагина. Вам необходимо их скачать и поместить в папку "Js".

Первый это jQuery Easing Plugin. Он отвечает за сглаживание движения в анимациях. В нашем случае он будет использован нашими подвижными элементами.

Второй - jQuery Delay plugin от EvanBot. Он отвечает за временные задержки между функциями. Мы его будем использовать в нашем уроке для координации и задержки эффектов.

Шаг №3 - Создание структуры XHTML
Вот код 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>Animated Landscape Header with jQuery</title>

<link rel="stylesheet" href="landscape-header.css"/>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.delay.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="landscape-header.js"></script>

</head>

<body>

<div id="wrapper">

<div id="header">

<img class="foreground" src="images/foreground-land.png" alt="Welcome to the City"/>

<div id="titlebar">
<h1>Welcome</h1>
</div>

<div id="sliders">

<div class="village">
<div class="village-padding">
<h2>Hidden Heading</h2>
<p>ac ultricies ante. ultricies egestas Pellentesque Aenean et Vestibulum fames quam vitae, amet, libero leo. morbi malesuada eleifend tempor turpis sit et amet tristique placerat feugiat tortor Mauris senectus eu mi habitant Donec quam, eget, semper. egestas. est. netus vitae sit </p>
</div>
</div>

<div class="cloudbar">
<div class="cloud-padding">
<h2>Subscribe via RSS</h2>
<a href="http://feeds2.feedburner.com/buildinternet"><img src="images/feed-icon.gif" alt="Subscribe today!"/></a>
</div>
</div>
</div>

</div>

<div id="content">
<h2>But Wait!</h2>
<p>You've got options! <a href="#" class="toggle">Toggle </a> between states.</p>
</div>
</div>
</body>

</html>

Обратите внимание на порядок подгрузки файлов jQuery. Вначале грузится сам фреймворк, потом плагины, и в конце наш код. Старайтесь сохранять такой же порядок во избегании конфликтов. Также не забудьте подгрузить CSS над Javascript.

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

Шаг №4 - Порядок и стиль с помощью CSS

Скопируйте этот код в Ваш CSS файл.

@charset "utf-8";
/* CSS Document */

*{
border:none;
}

body{
background:#7cc5da;
margin:0;
padding:0;
}

#wrapper{
width:960px;
margin:0 auto;
height:800px;
background:#3b902f;
}

#header{
height:500px;
width:960px;
background:url('images/sky-bg.jpg') no-repeat top left;
position:relative;
overflow:hidden;
}

#header .foreground{
position:absolute;
top:350px;
z-index:100;
}

#sliders{
overflow:hidden;
}

#sliders>*{
display:none;
}

#titlebar{
position:relative;
z-index:0;
top:100px;
text-align:center;
}

#titlebar h1{
font-family:arial,sans-serif;
color:#37626F;
padding:10px;
font-size:70px;
letter-spacing:-2px;
}

.village{
position:absolute;
top:366px;
left:30px;
z-index:90;
height:500px;
width:470px;
background:url('images/village-background.png') no-repeat top center;
}

.village-padding{
padding:120px 25px 20px 25px;
}

.village-padding p{
color:#F7F7F7;
font-family:"Lucida Grande",arial, sans-serif;
font-size:13px;
line-height:1.6em;
}

.village-padding h2{
color:#FFF;
font-family:arial, sans-serif;
font-size:26px;
margin:0;
padding:0;
letter-spacing:-2px;
}

.cloudbar{
position:absolute;
top:-465px;
left:600px;
z-index:90;
height:325px;
width:252px;
background:url('images/cloud-bar.png') no-repeat bottom center;
}

.cloud-padding{
padding:20px;
text-align:center;
}

.cloud-padding p{
color:#F7F7F7;
font-family:"Lucida Grande",arial, sans-serif;
font-size:13px;
line-height:1.6em;
}

.cloud-padding h2{
margin:0px 0px 25px 0px;
padding:0;
color:#37626F;
font-family:arial, sans-serif;
font-size:26px;
letter-spacing:-2px;
}

#content{
text-align:center;
padding:10px;
}

#content h2{
color:#FFF;
font-family:arial, sans-serif;
font-size:26px;
letter-spacing:-1px;
}

#content p{
color:#FFF;
font-family:"Lucida Grande",arial, sans-serif;
font-size:13px;
}

#content a{
color:#FFED2F;
text-decoration:none;
}

В основном в каскадной таблице стилей мы задаем тип и расстояние, однако есть несколько важных моментов:
1. Для того, чтоб двигать объект с помощью функции jQuery animate(), тип его позиционирования должен быть изменен. В нашем примере я выбрал тип "relative" (относительный), поскольку он более гибок чем "absolute" (абсолютный).
2. Разный z-index позволяет нам накладывать элементы друг на друга. Более высокое значение накладывается на более низкий. В данном уроке, передний план ландшафта - это первый слой. Поскольку это PNG файл и он прозрачный, слои за ним будут видны по краям изображения.
3. По умолчанию скользящие элементы спрятаны с помощью CSS display:none, и появляются с помощью jQuery при нажатии на переключатель. Это позволяет контенту, который спрятан загрузится перед показом.
4. Стартовые позиции 2-х колонок с контентом (.village и .cloudbar) находятся за пределами экрана. Здания села единственная видимая часть. За переход из одного состояния в другое отвечает jQuery.

Шаг №5 - Оживите переходы с помощью jQuery

Код, представленный ниже, заставить все элементы механизма работать как единое целое. 

// JavaScript Document
$(document).ready(function(){

$buildingup = false;

$("#sliders>*").show();

//Blurs all links when clicked
$("a").click(function(){
$(this).blur();
});

$(this).delay(2000,function(){
$("#titlebar").fadeOut(1000);
});

$(this).delay(3500,function(){

//Show the elements
$(".village").stop().animate({top:'30px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$(".cloudbar").stop().animate({top:'0px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$buildingup = true;

});

$("a.toggle").click(function(){

if ($buildingup == false){

$("#titlebar").fadeOut(1000);
$(this).delay(1000,function(){
$(".village").stop().animate({top:'30px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$(".cloudbar").stop().animate({top:'0px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$buildingup = true;
});

}else{

$(".village").stop().animate({top:'366px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$(".cloudbar").stop().animate({top:'-465px'}, {queue:false, duration:2000, easing: 'easeInOutBack'});
$buildingup = false;

$(this).delay(2000,function(){
$("#titlebar").fadeIn(1000);
});

}

});

});

Запомните, что у шапки будет два уникальных состояния:

1. Первое будет показывает приветственное сообщение в центре с ландшафтом под ним. Текст будет появляться и исчезать.
2. Во втором - мы увидим поднятую колонку с селом, вторая колонка опуститься справа сверху. Обе будут плавно выезжать и заезжать.

Плагин задержки будет останавливать анимацию в течении 3.5 секунд после полной загрузки страницы. Это позволит посетителю прочесть приветствие перед анимацией.

Логическая переменная “buildingup” следит за тем, когда колонки видимы (true) или спрятаны (false). Конструкция if, которая вызывается переключателем проверяет эту переменную и меняет на противоположную (т.е. прячет или показывает колонки).

Заключение
Это довольно специфический пример и не все могут его применить на практике. Однако с помощью него я показал Вам возможности z-index для прятанья слоев, а также возможности jQuery для показа\прятанья контента с красивой анимацией.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.buildinternet.com
Перевел: Максим Шкурупий
Урок создан: 2 Апреля 2009
Просмотров: 67238
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^