Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>  
  
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
#box { display: none; height: 100px; width: 100px; background: rgba(67, 133, 255, 0.5); position: absolute; top: 200px; left: 200px;
    box-shadow: 0 0 15px rgba(67, 133, 255, 0.7);
    -webkit-box-shadow: 0 0 15px rgba(67, 133, 255, 0.7); 
    -moz-box-shadow: 0 0 15px rgba(67, 133, 255, 0.7); 
  border-radius: 50px;
}
</style>
</head>
<body>
  <button>Run animation!</button>
​
</body>
</html>
 
var box = $('#box'),
    clones = $.map(Array(20), function(item, i){
        var new_box = box.clone();
        new_box.css('width', (100*(0.9 - i/50)));
        new_box.css('height', (100*(0.9 - i/50)));
        new_box.css('opacity', 1 / (i + 1));
        return new_box.insertAfter(box);
    });
    
$('body').hover(function(){
​
  box.css({
    width: 100,
    height: 100
  });
  
  box.show().animate({
      top: [Math.floor((Math.random() * 600) + 1), "easeInQuad"],
      left: [Math.floor((Math.random() * 600) + 1), "easeOutQuad"],
      width: [40, "easeOutQuad"],
      height: [40, "easeOutQuad"]
    }, 
    {
      duration: 1500,
      
      step: function(now, fx) {
          var prop = fx.prop;
          $.each(clones, function(i, clone){
              clone = $(clone).show();
              setTimeout(function(){
                  clone.css(prop, now);
              }, 50 * i);
          });
      }
  });
​
});
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers