みかづきブログ その3

3ヶ月つづけてみました。

原稿を落とさないようにbox2d-jqueryで原稿を落とす

このエントリーは jQuery Advent Calendar 2014 の 11日目のエントリーです。
Google Chromeでご観覧ください。

jQuery Advent Calendar 2014 - Adventar



原稿が締め切りに間に合わないことを「原稿を落とす」と表現することがありますね。

当日までになにか思いつくだろうと軽い気持ちでアドベントカレンダーに登録したものの、なにも思いつかず、このままだと落としてしまいそうだったので、今年1番すごい(公開されたのは去年末みたいですね)と思ったjQueryプラグインをつかって原稿を落とすことにしました。

franzenzenhofer/box2d-jquery · GitHub

こういうプラグインをつくれる人、尊敬します。

ソースコード

(function(win, doc, $) {

  "use strict";

  setTimeout(function() {
    var $txts = $(".a20141211"),
        spans = [];
      
    $txts.each(function(index) {
        var $txt = $txts.eq(index),
            txt = $txt.text(),
            df = new DocumentFragment(),
            $spans = [],
            $span, html;
        
        for (var i = 0, length = txt.length; i < length; ++i) {
          $span = $('<span>' + txt[i] + '</span>');
          spans.push($span);
          df.appendChild($span[0]);
        }
        
        $txt.html("");
        $txt[0].appendChild(df);
    });
      
    $.each(spans, function(index) {  
      var $span = spans[index];

      (function($span, interval) {
        setTimeout(function() {
            $span.box2d({"y-velocity": Math.random() * 10 + 5});
        }, interval);
      })($span, index * 100);
    });
  }, 5000);

  setTimeout(function() {
    $(".a20141211-drop").box2d({"y-velocity": 20});
    $(".entry-title").box2d({"y-velocity": 10});
  }, 25000);

  setTimeout(function() {
    $(".code.lang-javascript").box2d({"y-velocity": 30});
  }, 30000);

})(this, document, $);





無事(?)に危機的状況を回避できましたね。原稿を落としそうなときにご利用ください。