hotchpotch (owner)

Revisions

gist: 156276 Download_button fork
public
Public Clone URL: git://gist.github.com/156276.git
Embed All Files: show embed
JavaScript #
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*
* for webkit (Safari4, Google Chrome2) bookmarklet
*
* javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://gist.github.com/raw/156276/f7ef79b8da5514f44b84cf00367a92185747244d/gistfile1.js";s.onload=function(){_anim("div > * > * > * > *")};document.body.appendChild(s)})();
*/
 
 
window._anim = function _anim (selector) {
   var elements = document.querySelectorAll(selector);
   var s = document.createElement("script");s.charset="UTF-8";
   s.src="http://b.hatena.ne.jp/js/JSTweener.js";
   s.addEventListener('load', function() {
       var mouseOverHandler = function(ev) {
           ev.target.removeEventListener('mouseover', mouseOverHandler, false);
           anim(ev.target);
       };
       for (var i = 0; i < elements.length; i++) {
           var e = elements[i];
           e.addEventListener('mouseover', mouseOverHandler, false);
       }
   }, false);
   document.body.appendChild(s);
 
 
    var anim = function anim(el) {
        var matrix = new WebKitCSSMatrix();
        var stash = {rotate: 0};
        var rotate = 10 + (Math.random() * 50);
        if (Math.random() > 0.5) rotate *= -1;
        JSTweener.addTween(stash, {
          time: 0.2 + (Math.random() * 0.8),
          transition: 'easeOutBounce',
          rotate: rotate,
          onUpdate: function() {
              el.style.webkitTransform = matrix.rotateAxisAngle(0,0,0,stash.rotate);
          },
          onComplete: function() {
              stash.y = 0;
              JSTweener.addTween(stash, {
                time: 1,
                transition: 'linear',
                y: 3000,
                onUpdate: function() {
                    el.style.webkitTransform = matrix.translate(0,stash.y,0).rotateAxisAngle(0,0,0,stash.rotate);
                },
                onComplete: function() {
                    if (el.parentNode) el.parentNode.removeChild(el);
                }
              });
          }
      });
    }
};