Взрывной логотип с помощью CSS3 и MooTools или jQuery

Сегодня я хотел бы перевести очень интересную статью Дэвида Волша (DavidWalsh). Речь в этой статье пойдет о создании логотипа, который при наведении курсора мыши будет разлетаться на мелкие кусочки. Есть два варианта реализации — CSS3+jQuery и CSS3+MooTools. Отличие лишь в использовании разных Java библиотек. Давайте разберемся как сделать взрывной логотип. Хочется сразу оговориться — данный эффект будет работать в браузерах Chrome, Safari и Firefox. Остальные пользователи увидят обычный логотип.

HTML

Тут все просто. В принципе можно использовать любой элемент. Мы возьмем элемент a с фоновым изображением:

RusDigi

Обратите внимание, что элемент который мы используем должен иметь свойство display:block.

CSS

Основной элемент должен быть стилизован. Необходимо задать размеры такие же как и у фонового изображения.

a#homeLogo  {
  width:300px;
  height:233px;
  text-indent:-3000px;
  background:url(/wp-content/themes/2k11/images/homeLogo.png) 0 0 no-repeat;
  display:block;
  z-index:2;
}
a#homeLogo span {
  float:left;
  display:block;
  background-image:url(/wp-content/themes/2k11/images/homeLogo.png);
  background-repeat:no-repeat;
}
.clear { clear:both; }

Не забудьте использовать свойство text-indent чтобы текст ссылки не был виден. Эффект взрыва мы будем создавать с помощью JavaScript. «Осколки» будут создаваться на основе span. Обратите внимание, что в стиле span мы используем то же самое фоновое изображение. Мы будем просто менять положение этого изображения чтобы смоделировать отлетающие куски изображения.

JavaScript код с использованием библиотеки MooTools

Для начала зададим переменные, с помощью которых мы будет определять пропорции элементов:

var cssPrefix = false;
switch(Browser.name) { // Implement only for Chrome, Firefox, and Safari
  case "safari":
  case "chrome":
    cssPrefix = "webkit";
    break;
  case "firefox":
    cssPrefix = "moz";
    break;
}

if(cssPrefix) {

  // 300 x 233
  var cols = 10; // Desired columns
  var rows = 8; // Desired rows
  var totalWidth = 300; // Logo width
  var totalHeight = 233; // Logo height
  var singleWidth = Math.ceil(totalWidth / cols); // Shard width
  var singleHeight = Math.ceil(totalHeight / rows); // Shard height
  var shards = []; // Array of SPANs

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

// Remove the text and background image from the logo
var logo = document.id("homeLogo").set("html","").setStyles({ backgroundImage: "none" });

// For every desired row
rows.times(function(rowIndex) {
  // For every desired column
  cols.times(function(colIndex) {
    // Create a SPAN element with the proper CSS settings
    // Width, height, browser-specific CSS
    var element = new Element("span",{
      style: "width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * colIndex) + "px -" + (singleWidth * rowIndex) + "px;-" + cssPrefix + "-transition-property: -" + cssPrefix + "-transform; -" + cssPrefix + "-transition-duration: 200ms; -" + cssPrefix + "-transition-timing-function: ease-out; -" + cssPrefix + "-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);"
    }).inject(logo);
    // Save it
    shards.push(element);
  });
  // Create a DIV clear for next row
  new Element("div",{ clear: "clear" }).inject(logo);
});

Последним шагом будет использование метода fromChaos, который создает движение элемента.

// Chaos!
$$(shards).fromChaos(1000);

Собственно и все. Мы получили один из методов создания взрывного логотипа с помощью CSS3 и MooTools.
Кстати, собираемся на отдых. Нашли отличное место — Феодосия частные пансионаты там просто сказка. Черное море, успокаивающая тишина… Но вернемся к нашим кодам.

jQuery JavaScript

Тот самый код мы можем написать с использованием библиотеки jQuery. Код будет немного неказистый и больше, но при этом весь функционал останется таким же.

Number.random = function(min, max){
  return Math.floor(Math.random() * (max - min + 1) + min);
};

var zeros = {x:0, y:0, z:0};

jQuery.extend(jQuery.fn, {

  scatter: function(){
    return this.translate({
      x: Number.random(-1000, 1000),
      y: Number.random(-1000, 1000),
      z: Number.random(-500, 500)
    }).rotate({
      x: Number.random(-720, 720),
      y: Number.random(-720, 720),
      z: Number.random(-720, 720)
    });
  },

  unscatter: function(){
    return this.translate(zeros).rotate(zeros);
  },

  frighten: function(d){
    var self = this;
    this.setTransition('timing-function', 'ease-out').scatter();
    setTimeout(function(){
      self.setTransition('timing-function', 'ease-in-out').unscatter();
    }, 500);
    return this;
  },

  zoom: function(delay){
    var self = this;
    this.scale(0.01);
    setTimeout(function(){
      self.setTransition({
        property: 'transform',
        duration: '250ms',
        'timing-function': 'ease-out'
      }).scale(1.2);
      setTimeout(function(){
        self.setTransition('duration', '100ms').scale(1);
      }, 250)
    }, delay);
    return this;
  },

  makeSlider: function(){
    return this.each(function(){
      var $this = $(this),
        open = false,
        next = $this.next(),
        height = next.attr('scrollHeight'),
        transition = {
          property: 'height',
          duration: '500ms',
          transition: 'ease-out'
        };
      next.setTransition(transition);
      $this.bind('click', function(){
        next.css('height', open ? 0 : height);
        open = !open;
      });
    })
  },

  fromChaos: (function(){
    var delay = 0;
    return function(){
      return this.each(function(){
        var element = $(this);
        //element.scatter();
        setTimeout(function(){
          element.setTransition({
            property: 'transform',
            duration: '500ms',
            'timing-function': 'ease-out'
          });
          setTimeout(function(){
            element.unscatter();
            element.bind({
              mouseenter: jQuery.proxy(element.frighten, element),
              touchstart: jQuery.proxy(element.frighten, element)
            });
          }, delay += 100);
        }, 1000);
      })
    }
  }())

});


// When the DOM is ready...
$(document).ready(function() {

  // Get the proper CSS prefix
  var cssPrefix = false;
  if(jQuery.browser.webkit) {
    cssPrefix = "webkit";
  }
  else if(jQuery.browser.mozilla) {
    cssPrefix = "moz";
  }

  // If we support this browser
  if(cssPrefix) {
    // 300 x 233
    var cols = 10; // Desired columns
    var rows = 8; // Desired rows
    var totalWidth = 300; // Logo width
    var totalHeight = 233; // Logo height
    var singleWidth = Math.ceil(totalWidth / cols); // Shard width
    var singleHeight = Math.ceil(totalHeight / rows); // Shard height

    // Remove the text and background image from the logo
    var logo = jQuery("#homeLogo").css("backgroundImage","none").html("");

    // For every desired row
    for(x = 0; x < rows; x++) {
      var last;
      //For every desired column
      for(y = 0; y < cols; y++) {
        // Create a SPAN element with the proper CSS settings
        // Width, height, browser-specific CSS
        last = jQuery("").attr("style","width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * y) + "px -" + (singleWidth * x) + "px;-" + cssPrefix + "-transition-property: -" + cssPrefix + "-transform; -" + cssPrefix + "-transition-duration: 200ms; -" + cssPrefix + "-transition-timing-function: ease-out; -" + cssPrefix + "-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);");
        // Insert into DOM
        logo.append(last);
      }
      // Create a DIV clear for row
      last.append(jQuery("

").addClass("clear"));
    }

    // Chaos!
    jQuery("#homeLogo span").fromChaos();
  }
});

Посмотреть демо  Скачать исходники на jQuery

Составление семантического ядра для сайта является важной процедурой при его проектировании. Если вы не знаете что такое семантическое ядро и как правильно подобрать ключевые слова, то советую вам прочесть статью на korchik.com.