Awebdesign's Blog

jQuery анимация — новый презентационный сайт MacPro

Крути колесиком!

заказать сайт

Реклама

jQuery slider — слайдер картинок во весь экран

Горизонтальная прокрутка с ява-скрипт 4

Закончила свой сайт с горизонтальной прокруткой колесиком мыши и перетаскиванием – можете посмотреть и поскроллить здесь: http://awebdesign.ru

Сайт собран на основе урока Горизонтальная прокрутка с ява-скрипт 3, но так как использованы вместо текста картинки, к тому же эти изображения динамически меняют размер в зависимости от размеров окна браузера, то решила написать маленький тьютор по этому поводу.

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

CSS

Стили для списка и его пунктов:

.in {
width: 7400px;
list-style: none;
padding: 0;
margin: 0;
}

.in li {
float: left;
margin: 0;
padding: 0;
}

Ширина списка класса in (7400px) – это ширина вашей горизонтальной страницы. К сожалению я не нашла способа динамически менять эту ширину в зависимости от суммы ширин всех изображений, возможно, вы найдете его сами. В противном случае нужно вручную настроить эту ширину в зависимости от количества изображений. Если, как в моем случае, изображения меняют свой размер динамически, то и ширина этого списка будет меняться, поэтому желательно тестировать страницу с максимальными размерами изображений, иначе последние в списке картинки «прыгнут» вниз. Если высота монитора не позволяет провести такой тест, оставляйте в ширине «запас».

jQuery

Для начала нужно подгрузить на страницу библиотеку jQuery и скрипт прокрутки:
(Ниже вы можете скачать исходные файлы вместе с ява-скриптами)
Скрипт, который нужно поставить в <header>:

<script charset="utf-8">
$(document).ready(function () {
$('#timeline').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function (event) {
$(this).data('down', false);
}).mousemove(function (event) {
if ($(this).data('down') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}

}).mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 100);
}).css({
'overflow' : 'hidden',
'cursor' : '-moz-grab'
});
});

$(window).mouseout(function (event) {
if ($('#timeline').data('down')) {
try {
if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
$('#timeline').data('down', false);
}

} catch (e) {}
}
});

</script>

Timeline – это div, который содиржит список класса in. Именно этот див и прокручивается ява-скриптом.

HTML

Вкратце разметка выглядит таким образом:

<div>
<ul>
<li>
<img src="http://awebdesign.ru/img/grad.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#">
<img src="http://awebdesign.ru/img/origami_fish.jpg" class="source-image" alt="" />
</a>
</li>
<li>
<img src="http://awebdesign.ru/img/grad_mezhdu.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#" >
<img src="http://awebdesign.ru/img/origami_lily.jpg" class="source-image" alt="" />
</a>
</li>
</ul>
</div>

О том, как менять размеры изображения в зависимости от размеров окна браузера можете прочитать здесь:
Как динамически менять размер картинки с jQuery / jQuery dynamic resizing image

Скачать исходные файлы: http://awebdesign.ru/tutors/source_files.zip

Как динамически менять размер картинки с jQuery / jQuery dynamic resizing image

В комментариях пришел вопрос, можно ли динамически менять размер картинки в зависимости от размера браузера, как здесь: alexandergusev.com

Специально написала мини-тьютор, чтобы вы посмотрели, как это делается.

Пример здесь.

Попробуйте изменить размер браузера, и вы увидите, что размер картинки тоже меняется.

(Изображение в .png с прозрачностью, так что IE плохо его рендерит, с обычным прямоугольным изображением будет все в порядке в любом браузере.)

Итак, ява-скрипт динамического изменения размеров изображения:

<script type="text/javascript">
$(document).ready(function() {
var $winheight = $(window).height(); 

$(".source-image").attr({ height: $winheight });
$(window).bind("resize", function(){
var $winheight = $(window).height();
$(".source-image").attr({ height: $winheight });
});
});
</script>

Код очень простой. Класс .source-image относится к нашему изображению. Достаточно в коде HTML присвоить этот класс объекту img.

<img class="source-image" src="http://awebdesign.ru/tutors/img/fish.png" alt="" />

Не забудьте в header-е страницы прописать ссылку на jQuery, в моем случае ссылка на удаленный сервер:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" 

type="text/javascript" charset="utf-8"></script>

Всплывающая панель на ява-скрипт и CSS3

(Перевод Виктории Шидловской урока Джона Филлипса на spyrestudios.com)

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

Что мы будем делать:

Разметка HTML

Начнем с шапки документа. Здесь главное — ссылки на наш файл CSS и файл jQuery из библиотеки Google. Позже мы вернемся к шапке и пропишем код ява-скрипта.

< !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>Vertical Sliding Info Panel With jQuery</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
</head>
</html>

В теле документа мы создадим div и назовем его «container». Этот div будет содержать весь наш контент, Lorem Ipsum в данном случае. Пока что это не панель.

<div id="container">
	<h1>Vertical Sliding Info Panel With jQuery</h1>
		<h2>The Sliding Panel And Trigger Button On The Left
Have Absolute Positioning</h2>
<p>This is an example of simple page that's centered
and has a vertical sliding panel on the far left (try it! click on
the 'infos' tab that's on the left!). We used jQuery to create this
sliding panel (and CSS3 rounded corners because it looks cool)</p>
<p>
<a href="http://spyrestudios.com/
how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/"
title="How To Create A Vertical Info Panel With jQuery">Click here
to return to the tutorial on SpyreStudios</a></p>
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh
imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare
accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum
fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare.
Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
	</div>
</div>

Дальше примемся за нашу всплывающую панель. Здесь добавим несколько параграфов, h3 и линков.

<div>
	<h3>Sliding Panel</h3>
	<p>Here's our sliding panel/drawer made using jQuery with the 
toggle function and some CSS3 for the rounded corners</p>
	<p>This panel could also be placed on the right. This could be 
particularly useful if, <a href="http://spyrestudios.com" 
title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

	<h3>A Little Something About Me</h3>
	<img src="images/jon_image.jpg" alt="Jon Phillips" />
	<p>My name's Jon, I'm a freelance designer, blogger, musician. 
I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>

<div style="clear:both;"></div>
<div>
	<div>
	<h3>Navigation</h3>
		<ul>
<li><a href="http://spyrestudios.com/" title="home">Home</a></li>
<li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
<li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
<li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
<li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
		</ul>
	</div>

	<div>
		<h3>Social Stuff</h3>
		<ul>
<li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
<li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
		</ul>
	</div>
</div>
<div style="clear:both;"></div>

</div>
<a href="#">infos</a>

Завершим наш HTML-документ тэгами body и html.

CSS

Как вы можете видеть, наш CSS очень прост, добавлены только сругленные углы и кнопка trigger, которая запускает выезд панели. Заметьте также, что у панели и trigger-а абсолютное позиционирование по левому краю.

body {
background:#1a1a1a;
text-align:left;
color:#666;
width:700px;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}

a:focus {
outline: none;
}

h1 {
font-size: 34px;
font-family: verdana, helvetica, arial, sans-serif;
letter-spacing:-2px;
color:#9FC54E;
font-weight:700;
padding:20px 0 0;
}

h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}

h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}

img{
float: right;
margin: 3px 3px 6px 8px;
padding: 5px;
background: #222222;
border: 1px solid #333333;
}

p {
color:#cccccc;
line-height:22px;
padding: 0 0 10px;
margin: 20px 0 20px 0;
}

img {
border:none;
}

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(images/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

Если хотите поставить кнопку открытия панели и саму панель вправо, просто перепишите код, вместо

a.trigger{
position: absolute;
top: 80px; left: 0;
}

.panel {
position: absolute;
top: 50px; left: 0;
}

нужно написать так:

a.trigger{
position: absolute;
top: 80px; right: 0;
}

.panel {
position: absolute;
top: 50px; right: 0;
}

Также перенесите скругленные углы, вместо

border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;

нужно написать так:

border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;

Если вы хотите, чтобы trigger и панель оставались всегда видимыми при прокрутке окна, пропишите фиксированное позиционирование:

a.trigger{
position: fixed;
top: 80px; left: 0;
}

.panel {
position: fixed;
top: 50px; left: 0;
}

Чтобы изменить прозрачность панели, измените код здесь:

filter: alpha(opacity=85);
opacity: .85;

jQuery

Ну и, наконец, нужно ввести в действие ява-скрипт, иначе у нас кроме неработающей кнопки ничего не будет. Как мы уже поняли из разметки, кнопка имеет класс .trigger, а панель — класс .panel. Следующий код должен стоять прямо перед закрывающим тэгом вот так:


< !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>Vertical Sliding Info Panel With jQuery</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" 
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$(".trigger").click(function(){
		$(".panel").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});
});
</script>
</head>

Этот код будет сообщать браузеру о том, когда закрывать и открывать (toggle) панель, а также о том, когда панель активна. Благодаря этому зеленый значок плюса будет меняться на красный минуса.

Вы также можете скачать zip-архив со всеми необходимыми файлами этого урока по jQuery и CSS3

Параллакс с jQuery

Posted in Уроки javascript, Уроки jQuery, jQuery, ява-скрипт by awebdesign on 05.05.2010

(Перевод Виктории Шидловской урока Create a Parallax Website Header)

Посмотреть Демо

Загрузить ZIP файл

На этом уроке вы научитесь делать шапку веб-сайта с помощью jQuery и плагина jParallax jQuery. Урок очень простой, вам не потребуется никаких знаний javascript, только HTML и CSS. Тем не менее, у данной техники большой потенциал. Чтобы удостовериться в этом, посмотрите примеры использования параллакса (на сайте кликайте NEXT для просмотра каждого следующего эффекта): webdev.stephband.info/parallax_demos.html

Файлы

Для начала нужно скачать два файла javascript:

Далее…

Картинки

До начала работы необходимо подготовить все используемые в шапке картинки:

  • Небо
  • Солнце
  • Трава
  • Дерево

После картинок пора заняться HTML.

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>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<title>Parallax Website Header</title>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#parallax').jparallax({});
});
</script>
</head>
<body>

<div id="parallax">
	<div style="width: 700px; height: 300px;">
		<img alt="" src="images/0_day.png"/>
	</div>
	<div style="width: 750px; height: 280px;">
		<img style="position:absolute; top:0px; left:350px;" alt="" 
src="images/1_sun.png"/>
	</div>
	<div style="width: 700px; height: 250px;">
		<img style="position:absolute; top:200px; left:0px;" alt="" 
src="images/2_grass.png"/>
	</div>
	<div style="width: 900px; height: 260px;">
		<img style="position:absolute; top:100px; left:150px;" alt="" 
src="images/3_tree.png"/>
	</div>
	<div style="width: 900px; height: 260px;">
		<img style="position:absolute; top:100px; right:150px;" alt="" 
src="images/3_tree.png"/>
	</div>
	<div style="width: 800px; height: 250px;">
		<h1 style="position:absolute; top:100px; right:355px;">My Site</h1>
	</div>
</div>

</body>
</html>

Довольно просто, не так ли?
Итак, что у нас здесь происходит:

  • Во-первых, мы включаем наши скачанные ява-скрипты. Не забудьте прописать jParallax после файла jQuery.
  • Затем мы вызываем единственную функцию Ява-скрипта, которая связывает jParallax с div-ом #parallax. Вы можете также прописать сюда свойства функции, но мы используем те, что прописаны по умолчанию.
  • Внутри div-а parallax мы определяем наши слои. В данном случае все слои – это div-ы, но с таким же успехом это могли быть пункты списка (li) или просто картинки (img). Самое главное теперь – это стили наших div-ов, которые определяют их поведение. К сожалению, нет готовой схемы для вычисления размеров, просто нужно попробовать поиграть с размерами div-ов и «поймать» нужное впечатление от параллакса.

CSS

CSS у нас совсем простой:

#parallax {
	background:#ccc;
	position:absolute;
	overflow:hidden;
	width:700px;
	height:300px;
}

Важно запомнить:

  • Высота и ширина каждого дочернего элемента (child) должны быть полностью прописаны в CSS. jParallax автоматически дает каждому дочернему элементу абсолютное позиционирование (position:absolute), так что нет нужды прописывать их положение вручную.
  • Для главного элемента параллакса (#parallax) нужно прописать относительное или абсолютное позиционирование (position:relative или position:absolute), иначе дочерние элементы будут располагаться относительно документа, а не мышки.

Посмотреть Демо

Загрузить ZIP файл

(Перевод Виктории Шидловской урока Create a Parallax Website Header)

Анимация с помощью jQuery / Javascript

(Перевод Виктории Шидловской Building an Animated Cartoon Robot with jQuery)

анимация с jQuery / Javascript

Смотреть ДЕМО анимации на http://robot.anthonycalzadilla.com

Зачем это надо?

Кроме решения забавной задачи, какие цели мы преследуем? Ответ не так очевиден, как кажется. Толку эт этой анимации столько же, сколько от корабля в бутылке. Тем не менее, существует более важная цель. Упражнение поможет веб-дизайнерам и разработчикам расширить границы своего представления о jQuery, CSS и макетировании веб-сайтов.

Описание
Проект был построен с помощью расположения пустых div-ов как слоев – один над другим, и в качестве их background-картинок использованы прозрачные файлы PNG.
PNG-картинки были анимированы, они движутся с разной скоростью. Это стало возможно благодаря плагину jQuery от Alexander Farkas. Плагин симулирует «эффект параллакса» — различное смещение предметов относительно глаза наблюдателя в зависимости от степени их удаленности. Подобный прием использовался в старых видео-играх, типа «Марио».
Робот собран из отдельных частей, то есть, отдельных div-ов. В конце урока мы анимируем робота с помощью jQuery.
Разметка html


  <div id="wrapper">

  <div id="cloud-01">
  <div id="cloud-02">
  <div id="mountains-03">
  <div id="ground">

  <div id="full-robot">
    <div id="branding"><h1>Robot Head.</h1></div>
    <div id="content"><p> Robot Chest.</p></div>
    <div id="sec-content"><p> Robot Pelvis.</p></div>
    <div id="footer"><p> Robot Legs.</p></div>
  </div>

  </div>
  </div>
  </div>
  </div>

</div>

Ни один из div-ов не имеет определенной ширины, поэтому они будут растягиваться на всю ширину окна в любом браузере. ВНИМАНИЕ: Все картинки, которые будут создавать эффект параллакса, имеют ширину 9999px, больше, чем ширина обычного монитора компьютера или телевизора. Мы используем CSS, чтобы расположить картинки именно там, где мы хотим.

Стили CSS

CSS так же прост, как и основная разметка:


h1, p { position: absolute; left: -9999px; }

div {position: relative;}

#wrapper { background: #bedfe4 url(../images/sun.png) no-repeat left -30px;
border: 5px solid #402309;}

#cloud-01 { background: url(../images/clouds-01.png) no-repeat left -100px; }                                                         

#cloud-02 {	background: url(../images/clouds-02.png) no-repeat left top; }

#mountains-03 { background: url(../images/mountain-03.png) no-repeat left bottom; }

#ground { background: url(../images/ground-05.png) no-repeat left bottom; }

#full-robot { width: 271px; }

#branding {
	background: url(../images/robot-head.png) no-repeat center top;
	width: 271px;
	height: 253px;
	z-index: 4;
	}

#content {
	background: url(../images/robot-torso.png) no-repeat center top;
	width: 271px;
	height: 164px;
	z-index: 3;
	margin-top: -65px;
	}

#sec-content {
	background: url(../images/robot-hips.png) no-repeat center top;
	width: 271px;
	height: 124px;
	z-index: 2;
	margin-top: -90px;
	}

#footer {
	background: url('../images/robot-legs.png') no-repeat center top;
	width: 271px;
	height: 244px;
	z-index: 1;
	margin-top: -90px;
	}

Абсолютное позиционирование (Absolute positioning) для h1 и p используется для того, чтобы подвинуть любой заголовок или текст на 9999px влево (как вы помните, ширина картинок 9999px). Затем мы выставляем для всех div-ов относительное позиционирование (position: relative). Благодаря этому мы можем использовать z-index, чтобы нарушить обычный порядок расположения картинок «одна за другой» на «одна над другой».

jQuery Javascript

На заметку: оригинальный код анимирования робота был ужасен. Ребята из coding cyborg помогли нам и почистили скрипт:


$(document).ready(function(){
$('#cloud-01').css({backgroundPosition: '0 -80px'});
$('#cloud-02').css({backgroundPosition: '0 -30px'});
$('#mountains-03').css({backgroundPosition: '0 50px'});
$('#trees-04').css({backgroundPosition: '0 50px'});
$('#ground').css({backgroundPosition: 'left bottom'});
$('#branding').css({backgroundPosition: 'center 0'});
$('#content').css({backgroundPosition: 'center 0'});
$('#sec-content').css({backgroundPosition: 'center 0'});
$('#footer').css({backgroundPosition: 'center 0'});
$('#wrapper').css({overflow: "hidden"});

	$('#klicker').click(function(){
		$('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 20000);
		$('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 20000);
		$('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 20000);
		$('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 20000);

	startHim();

	$("#full-robot").animate({left:"50%",marginLeft:"-150px"}, 2000);
	setTimeout("leaveScreen()",15000);
	});

});

var num = 1;

function startHim(){
	num++;
	$("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
	$("#content,#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num+"px"},150);
	if(num<4){
		setTimeout("startHim()",300);
	} else {
		setTimeout("bounceHim()",300);
	}
}

function bounceHim(){
	$("#sec-content,#branding").animate({top:"-=4px"},150).animate({top:"+=4px"},150);
		$("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150);
	setTimeout("bounceHim()",300);
}

function leaveScreen(){
	$("#full-robot").animate({left:"100%",marginLeft:"0px"}, 2000);
}

Начинаем с того, что устанавливаем позиции всех изображений.
После нажатия на ‘#klicker’ div, функция сообщает jQuery анимировать background-ы и начать их движение с текущей позиции к установленным координатам. Благодаря тому, что мы раскидали все изображения по разным div-ам, они могут перемещаться с разной скоростью. Премещение элементов на разной скорости создает 3D-эффект. Элементы на заднем плане должны двигаться гораздо медленнее тех, что на переднем. Заметьте, что скорость облаков гораздо ниже скорости гор. И быстрее всего движется земля. И в конце концов, после запуска всех фоновых изображений, функция ‘#klicker’ вызывает функцию ‘startHim()’.
Функция ‘startHim()’, как вы уже догадались, запускает робота. Он начинает подскакивать и выезжает на середину div-а #wrapper. Функция ‘startHim()’ вызывает функцию ‘bounceHim()’. А та, в свою очередь, закольцовывается и работает постоянно.
Нам необходимо достичь эффекта, буд-то робот подпрыгивает на кочках. Для получения нерегулярного подпрыгивания мы используем функцию ‘bounceHim()’. Она выделяет отдельные div-ы и заставляет их перемещаться на 5px вверх и вниз. Но одинакового движения всех частей робота недостаточно, это слишком грубо. Нам нужно, чтобы движение было более интересным и беспорядочным. Так что заставим div с телом робота двигаться в другом ритме, чем все остальное. Тело будет двигаться на 8px вверх и 8px вниз.
Последняя функция, котрую мы вызываем – это ‘leaveScreen()’. Через 15 секунд (15000) робот отъезжает вправо за пределы экрана.

Я думаю, это очень крутой эксперимент. Дело даже не в анимации, а в том, как еще можно применять использованные в примере функции для создания эффектов меню, div-ов с текстом и т.п.

%d такие блоггеры, как: