Awebdesign's Blog

Анимация с помощью 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-ов с текстом и т.п.

Реклама

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

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

(перевод Виктории Шидловской Fun with Overflows)
Добавлен урок по горизонтальной прокрутке изображений, растягивающихся на весь экран.

горизонтальный скроллинг ява-скрипт

посмотреть ДЕМО

Пара человек попросили объяснить, как работает прокрутка на Plurk’s browse timeline. Затем на свое десятилетие Google выпустил 10 year timeline. Так что я решил показать, как сделать прокрутку, используя оба метода – прокрутку с помощью колесика мыши и с помощью перетаскивания мышкой.

Далее представлены два урока по горизонтальной прокрутке с ява-скриптом.

Первый урок – прокручиваемый дневник. Второй урок написан по запросу Trevor Morris, который хотел сделать «перетекание» радуги в шапке своего сайта более плавным.

1. Горизонтальная прокрутка мышью и колесиком мышки с помощью ява-скрипта

При создании горизонтально прокручиваемого дневника мы обеспечим поддержку прокрутки как на Plurk и как на Google.

Для начала сделаем тянущийся (wrapping) div со значением overflow: auto; (которое мы потом изменим на overflow: hidden; с помощью jQuery). Внутренний элемент (в нашем случае ul) будет иметь достаточную ширину, чтобы вместить в себя все необходимые элементы li, а чтобы li не растягивали div вертикально (не создавали новую линию), все li имеют определенную ширину и свойство float: left;.

Постановка задачи

  1. Уловить событие mouse down, определить положение прокручиваемого элемента и X-координату мышки.
  2. Когда мышка двигается (в нажатом состоянии), то прокручивать элемент на расстояние от старого до нового положения мышки.
  3. Когда мышка находится вне окна прокрутки, то отменить событие mouse down или запустить событие mouse up.

CSS

Не буду приводить весь код, только то, что имеет отношение к делу.

#timeline {
  height: 375px; /* fixed */
  overflow: auto; /* changed to hidden via JavaScript */
}

.tl-events { /* the UL */
  width: 11800px; /* the width required to hold all the info */
}

.tl-events li {
  float: left; /* allows the lis to stack against eachother */
  width: 300px;
}

jQuery

Код, используемый в demo

Мы используем три встроенные функции: mousedown, mouseup and mousemove. Затем добавляем jQuery mousewheel plugin перед изменением overflow в CSS:

// Когда DOM готов...
$(document).ready(function () {
  $('#timeline').mousedown(function (event) {
    // прикрепить 3 data элементу #timeline
    $(this)
      .data('down', true) // индикатор того, что мышь нажата
      .data('x', event.clientX) // текущая X-координата мышки
      .data('scrollLeft', this.scrollLeft); // текущая позиция скролла

    // вернуть false, чтобы избежать выделение текста и перетаскивания ссылок
   //внутри окна прокрутки
    return false;
  }).mouseup(function (event) {
    // Когда мышь отжата (mouse up), «выключить» индикатор down
    $(this).data('down', false);
  }).mousemove(function (event) {
    // если мышь нажата – начать эффект перетаскивания (drag)
    if ($(this).data('down') == true) {
      // this.scrollLeft - это scrollbar, появившийся из-за слишком большого
      //контента (overflowing content)
      // Новая позиция высчитывается по формуле: начальная позиция скролла +
      //начальная X-координата нажатой мышки – новая X-координата
      // Ищу того, кто мог бы как-то увеличить скорость прокрутки
      this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
    }
  }).mousewheel(function (event, delta) {
    // Сейчас подключаем плагин mouse wheel и прокручиваем на значение 'delta',
    // что является движением колесика, умноженное на произвольное число.
    this.scrollLeft -= (delta * 30);
  }).css({
    'overflow' : 'hidden', // изменить на hidden для пользователей с поддержкой JS
    'cursor' : '-moz-grab' // добавить курсор с изображением лапки
  });
});

// И наконец, вызываем событие, если мышка вышла за пределы прокручиваемой области
// Мы не вызываем событие mouse up (так как мышь все еще нажата)
$(window).mouseout(function (event) {
  if ($('#timeline').data('down')) {
    try {
      // *try* (попробовать) вычислить элемент, на который перешла мышка после того,
      //как покинула область
      // и если мы мы действительно вышли за пределы этой области,
      //то отключаем индикатор события mouse down
      if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
        $('#timeline').data('down', false);
      }
    } catch (e) {}
  }
});

2. Эффект радуги на сайте Trevor Morris

Используя тот же this.scrollLeft DOM мы можем создать совершенно другой эффект.
Он будет работать также при отсутствии поддержки ява-скрипта.

Разметка

Пустой экстра-div — это широкий элемент, а div#rainbow — это элемент с overflow, который будет перемещаться внутри.

<div id="headerEffect">
  <div id="rainbow"><div></div></div>
  <div id="swirl"></div>
</div>

CSS

Кроме CSS я также прописал код поддержки прозрачности PNG-изображений для IE6, для корректной работы при отключенных ява-скриптах.

#headerEffect {
  position: absolute;
  width: 100%;
  height: 400px;
  overflow: hidden;
  top: 0; /* Убедитесь, что IE растягивает его правильно */
  left: 0;
}

#rainbow {
  height: 400px;
  width: 100%;
  overflow: hidden;
}

#rainbow div {
  height: 400px;
  width: 3312px; /* хорошая ширина, чтобы быть уверенным, что картинка будет повторяться */
  background: url(/css/img/header.colour.3.png) repeat-x scroll -20% 0;
}

#swirl {
  background: url(/css/img/header.swirl.png) no-repeat scroll 50% 0;
  height: 400px;
  width: 100%;
  position: absolute; /* располагает swirl *над* rainbow */
  top: 0;
  left: 0;
}

Несколько специальных стилей для IE6:

<!--[if lte IE 6]>
<style type="text/css" media="screen">
/* Добавил alpha прозрачность в CSS для отображения в браузерах без поддежки JS */
#swirl {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.trovster.com/css/img/header.swirl.png', sizingMethod='scale');
}
</style>
<![endif]-->

JavaScript
Заметьте, что этот раздел я назвал JavaScript, а не jQuery; мы используем свойство scrollLeft для div#rainbow, и jQuery нужен нам только для готового события.

$(document).ready(function () {
  // определяем элемент rainbow
  var rainbow = document.getElementById('rainbow'),
    lastPos, // хранит последнюю позицию scrollLeft
    width = 1656; // точка повтора бэкграунда

  // мы каждый раз сбрасывем все значения при перезагрузке страницы, так что бэкграунд всегда один и тот же
  rainbow.scrollLeft = width;

  // используем интервал для прокрутки радуги
  setInterval(function () {
    // заставляем бэкграунд прокручиваться слева направо
    rainbow.scrollLeft -= 5;

    // если мы достигнем начала, то lastPos будет равен scrollLeft
    if (lastPos == rainbow.scrollLeft) {
      // reset
      rainbow.scrollLeft = width;
    }

    lastPos = rainbow.scrollLeft;
  }, 100); // комбинация миллисекунд
});

Горизонтальная прокрутка с ява-скриптом 2, урок по CSS и jQuery

Перевод Виктории Шидловской урока Horizontal Scrolling Menu made with CSS and jQuery от Andrew Valums.

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

Посмотреть результат

Добаляем базовые стили

div.sc_menu {
/* Установите эти значения, чтобы мы могли просчитать отступ слева*/
position: relative;
height: 145px;
width: 500px;
/* Add scroll-bars */
overflow: auto;
}
ul.sc_menu {
display: block;
height: 110px;
/* Здесь максимальная ширина для пользователей без Javascript */
width: 1500px;
padding: 15px 0 0 15px;
/* Remove default margin */
margin: 0;
background: url(‘navigation.png’);
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 4px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
/* Мы добавим заголовок под каждой картинкой */
display: block;
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}

Значения “width” и “overflow” добавлены для того, чтобы у тянущегося div-а появились скроллбары. Мы указываем значение “position” для того, чтобы ява-скрипту было легче просчитать отступ. Не забывайте, что отступ всегда просчитывается относительно родителя. Вы можете посмотреть, что получилось, здесь.

Добавляем эффект hover (когда мышь проходит над элементом) и рамки (borders)

Значение “display: none” прячет заголовки, и мы прописываем “display:block” к “:hover”, чтобы показывать их, когда мышка находится над картинкой.

“-webkit-border-radius” и “-moz-border-radius” делают углы наших рамок скругленными в таких браузерах, как Firefox, Safari и Chrome. К сожалению, Internet Explorer не поддерживает это свойство и будет отображать обычные углы.

Вот как выглядит меню, если поддержка ява-скриптов отключена.

Код:

.sc_menu span {
 display: none;
 margin-top: 3px;
 text-align: center;
 font-size: 12px;
 color: #fff;
}
.sc_menu a:hover span {
 display: block;
}
.sc_menu img {
 border: 3px #fff solid;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
}
.sc_menu a:hover img {
 filter:alpha(opacity=50);
 opacity: 0.5;
}

jQuery

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

Вот, что вы должны знать, чтобы понять код:

$() – это сокращенное имя для функции $(document).ready(), самая часто используемая функция jQuery. Это позволяет вызывать скрипт сразу после загрузки дерева страницы.

$(function(){
  // Your code here
});

Мы будем использовать событие “mousemove”, чтобы запускать скрипт при движении мышки над меню.

“ul.width()” не возвращает значение реальной ширины всех изображений, так как мы задали ширину списка с помощью CSS, чтобы выводить все изображения в одну линию. Мы можем получить эту ширину, сложив вместе ширину последнего изображения и его отступ слева.

Мы используем функцию “lastLi[0]” из коллекции jQuery и “offsetLeft”, чтобы получить координаты левого верхнего угла последней картинки относительно div-а.

Атрибут “lastLi[0]” возвращает Х-координату мышки относительно страницы, но нам нужно получать эту координату относительно div-а, поэтому мы воспользуемся “div.offset().left”

Список картинок должен двигаться быстрее, чем мышь над ним, поэтому его движение задаем с помощью формулы “(ulWidth-divWidth) / divWidth”.

Вот ява-скрипт:

$(function(){
 //Вызываем все элементы для более быстрого доступа к ним и указываем ширину     //рабочей области
 var div = $('div.sc_menu'),
               ul = $('ul.sc_menu'),
               // левый отступ (margin) ненумерованного списка
               ulPadding = 15;
  //Указываем переменную для ширины меню
  var divWidth = div.width();
  //Удаляем скроллбары
  div.css({overflow: 'hidden'});
  //Ищем последний элемент списка
  var lastLi = ul.find('li:last-child');
  //Когда пользователь проводит мышкой над меню
  div.mousemove(function(e){
    //Так как ширина списка увеличивается с загрузкой каждой новой картинки,
    //то мы пересчитываем ее каждый раз
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
    div.scrollLeft(left);
  });
});

Также решение для нескольких скроллер-меню на одной странице:

$(function(){
//Вызываем все элементы для более быстрого доступа к ним и указываем ширину     //рабочей области

var div = $(’div.sc_menu’),
ul = $(’ul.sc_menu’),
ulPadding = 15;

// Удаляем скроллбары
div.css({overflow: ‘hidden’});

// Когда пользователь проводит мышкой над меню
div.mousemove(function(e){

//Получаем ширину меню
var divWidth = $(this).width();

// Ищем последний элемент списка
var lastLi = $(this).find(’li:last-child’);

//Так как ширина списка увеличивается с загрузкой каждой новой картинки,
//то мы пересчитываем ее каждый раз
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX – div.offset().left) * (ulWidth-divWidth) / divWidth;
$(this).scrollLeft(left);
});
});

В общем, нужно перетащить расчеты ширины списка и координат последнего элемента внутрь функции и задействовать $(this).scrollLeft(left) вместо div.scrollLeft(left).

Вот и все! Можете посмотреть финальный результат. Как всегда, не стесняйтесь оставлять комментарии.

Добавила прокрутку с ява-скриптом 3 — горизонтальная прокрутка колесиком и перетаскиванием!

Если хотите понять причины засилия минимализма, массового перехода с флэша на ява-скрипт и jQuery, истерию вокруг HTML5, а также разобраться во Второй Холодной войне между Apple и Microsoft – читайте статью «Почему минимализм, или какой сайт делать»

Горизонтальная прокрутка с ява-скриптом / Horizontal Scrolling with Java-script

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

Российские заказчики сайтов в 100% случаев требуют, чтобы при открытии сайта в окне любого размера и любого браузера не появлялась необходимость в горизонтальной прокрутке. На Западе мода на горизонтальное расположение портфолио укрепляет свои позиции уже около года. Такой формат дает несопоримое преимущество в восприятии графических работ. Однако неудобство горизонтальной прокрутки по сравнению со скроллером мышью вверх-вниз было очевидно.
Посмотрите сайт нашей студии Awebdesign – с помощью ява-скрипта, скроллером теперь можно прокручивать страницу горизонтально!

Как это сделано — читайте урок по горизонтальной прокрутке изображений, растягивающихся на весь экран.

Внимание! Из-за большого количества просмотров этого поста, я подумала, что люди ищут в основном сам скрипт, так что урок по горизонтальной прокрутке с ява-скриптом был мной переведен — читайте Горизонтальная прокрутка с ява-скриптом 2!

Добавила прокрутку с ява-скриптом 3 — горизонтальная прокрутка колесиком и перетаскиванием!

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