Главная -> Статьи о HTML5 -> Опыт работы с HTML5 - создание комикса Never Mind the Bullets

Опыт работы с HTML5 - создание комикса Never Mind the Bullets

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

Первый проект, который я хотел бы рассмотреть - интерактивный комикс Never Mind the Bullets о диком западе. Разработчиком является Steaw Web Design - небольшая дизайн-студия расположенная в Париже, с представителями которой я встретился ещё в мае. Студия сделала несколько ранних прототипов с использованием эффекта параллельного перемещения нескольких слоев изображений и были готовы проверить, смогут ли они создать полноценное приложение с использованием этой техники. В итоге все получилось очень хорошо, и в финальной версии проекта были также использованы технология WOFF для отображения шрифта Comic и технология SVG для графических эффектов.

Скриншот комикса Never mind the Bullets

Вы смотрите комикс слева направо, перемещая изображение простым движением мыши в правую сторону экрана.  Каждая панель с историей сформирована из нескольких png изображений с прозрачностью, которые накладываются на фоновый рисунок в формате jpeg. Например изображение расположенное выше состоит из картинки ковбоя, картинки пара от поезда и картинки поезда и пассажира. Овалы и прямоугольники прямой речи сделаны с помощью SVG форм, внутри которых добавлен текст использующих технологию WOFF и загружается с помощью CSS атрибута @font-face.

Все эти элементы позиционированы с помощью внутренних стилей тега <div>, как показано на листинге ниже:

<div class="Panel" style="width: 723px; height: 700px;"> 
<div class="Layers In">  
<img class="Layer" style="left:-95px; top:-75px" src="soif-5.jpg" cp:y="50" cp:x="50" />  
<img class="Layer" style="left:-127px; top:-75px" src="soif-4.png" cp:y="70" cp:x="100" />  
<img class="Layer" style="left:-190px; top:-75px" src="soif-3.png" cp:y="100" cp:x="200" />  
<img class="Layer" style="left:-444px; top:-75px" src="soif-2.png" cp:y="100" cp:x="600" /> 
</div> 
<div class="Layers Out">  
<p class="Balloon" cp:text="Little" cp:balloon="Tell" style="left: 74px; top: 35px; width: 280px; position: absolute">  He's come to the west; the land of opportunity.  </p>  
<div class="Layer" cp:y="100" cp:x="550" style="left: -575px; top: -100px; width: 900px; height: 900px">  
<p class="Balloon" cp:text="Medium" cp:balloon="Speak" cp:arrow="BottomLeft" style="left: 530px; top: 200px; width: 280px; position: absolute">  I need a drink.  </p>  
</div> 
</div> 
</div>

Секрет комикса лежит в его интерактивности, и здесь студия использовала очень умную технику. Каждая картинка (ковбой, поезд и т.д.) была дополнена несколькими дополнительными атрибутами (sp:...) которые содержат данные о том, как она должна отображаться и глубину резкости для эффекта параллельного переноса.

Для целей отображения, браузер игнорирует эти атрибуты, так как они не имеют четкого семантического описания. Но в функции $.fn.parallax() находящейся в файле parallax.js, эти атрибуты считываются и используются для задания значения перемещения блока по событию перемещения мыши. Листинг можно посмотреть тут:

self.each(function() {
 var $this = $(this);

 $this.mousemove(function(event) {
  var pos = $this.offset();
  var mouseX = event.clientX - pos.left;
  var mouseY = event.clientY - pos.top;
  var containerDemiWidth = $this.width() / 2;
  var containerDemiHeight = $this.height() / 2;
  var centerX = containerDemiWidth;
  var centerY = containerDemiHeight;
  var displacementX = Math.min(1, Math.max(-1, (mouseX - centerX) /
   (containerDemiWidth - settings.xMargin)));
  var displacementY = Math.min(1, Math.max(-1, (mouseY - centerY) /
   (containerDemiHeight - settings.yMargin)));
  $this.children(".Layers").children(".Layer").each(function() {
   var $layer = $(this);
   var rect = $layer.data("rect");
   var xFactor = $layer.attr(settings.xFactor);
   var yFactor = $layer.attr(settings.yFactor);
   var x = Math.round(centerX - displacementX * (-xFactor) /
             100.0 * (rect.centerX - centerX));
   var y = Math.round(centerY - displacementY * (-yFactor) /
             100.0 * (rect.centerY - centerY));

   $layer.animationMoveTo(x, y);
  });
 });
});

Полученный эффект очень гладкий и постоянно меняющийся. Откройте этот пример в Internet Explorer 9 и нажмите f12 для просмотра исходного кода страницы - вы увидите что они широко использовали jQuery, но сам сайт занимает очень маленький объем исходного кода.

Ещё одной важной особенностью является то, что по клику на кнопку сверху Вы можете создать свой собственный комикс. Благодаря тому, что использовалась технология SVG и WOFF, было довольно просто реализовать функцию наследования этих элементов. Вы можете обмениваться Вашими комиксами через электронную почту, Facebook или Twitter.

Скриншот комикса Never mind the Bullets

Комикс Never Mind the Bullets в кратчайшие сроки завоевал самые хорошие отзывы у сообщества:

- он был номинирован на премию "Сайт дня";

- Smashing Magazine написал о нем в своем информационном бюллетене;

- The Next Web назвал его "чертовски крутым";

- Даже Джон Грубер (John Gruber), известный своей нелюбовью к конкурентам Apple, ссылался на комикс в Daring Fireball.

Обязательно посмотрите его: http://www.nevermindthebullets.com/