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>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <img src="http://www.branddiaries.com/development/wp-content/uploads/2014/01/cover-origami-files-08.png" style="position:absolute;margin-top:-7px;margin-left:12%;z-index:20" usemap="#blueBall" href="#" />
  
<map id="blueBallMap" name="blueBall"><area shape="poly" alt="" title="" coords="15,134,23,124,42,122,56,120,64,134,66,143,71,156,70,172,62,177,59,187,21,187,1,169,13,141,13,138,12,139" href="" target="" /></map>
 
<div id="cyclerBlue" class="cycler">
<img id="initializerImageBlue" class="active" src="" />
<img src="http://www.branddiaries.com/development/wp-content/uploads/2014/02/1.png" alt="My image" />
<img src="http://www.branddiaries.com/development/wp-content/uploads/2014/02/2.png" alt="My image" />   
<img src="http://www.branddiaries.com/development/wp-content/uploads/2014/02/3.png" alt="My image" />   
<img src="http://www.branddiaries.com/development/wp-content/uploads/2014/02/4.png" alt="My image" />   
<img src="http://www.branddiaries.com/development/wp-content/uploads/2014/02/5.png" alt="My image" />   
<img src="http://www.branddiaries.com/development/wp-content/uploads/2014/02/6.png" alt="My image" />   
<img src="http://www.branddiaries.com/development/wp-content/uploads/2014/02/7.png" alt="My image" />   
<img src="http://www.branddiaries.com/development/wp-content/uploads/2014/02/8.png" alt="My image" />   
</div>
</body>
</html>
 
var counter = 1;
var currentBallDiv;
var currentBallInitImage;
​
function initializeAnimation(e) {
$(currentBallDiv).find('img').each(function(){$(this).removeClass('active');}).hide();
​
$(currentBallInitImage).addClass('active');
var newX = e.pageX - 100;
var newY = e.pageY - 150;
var fadeOutTimer = 20;
$(currentBallDiv).show().css({left: newX+'px',top: newY+'px'});
counter = 1;
setTimeout('cycleImages()', 60);
}
​
 function cycleImages(){
 
      var $active = $(currentBallDiv).find('.active');
      var $next = ($active.next().length > 0) ? $active.next() : $(currentBallDiv).find('img:first');
      $next.css('z-index',2).show();//move the next image up the pile
      $active.fadeOut(fadeOutTimer,function(){//fade out the top image
      $active.css('z-index',1).hide().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active').show();//make the next image the top one
      });
      
      if (counter < 6) {
      counter++;setTimeout('cycleImages()', 60);
      } else if (counter < 9) {
       counter++;fadeOutTimer = 1000;setTimeout('cycleImages()', 1000);
      }
}
​
​
$(document).ready(function(){
 $(document).click(function(){ 
$('.cycler').hide();
});
​
$('map[name=blueBall] area').on('click',function(e){
fadeOutTimer = 20;
currentBallDiv = $('#cyclerBlue');
currentBallInitImage = $('#initializerImageBlue');
initializeAnimation(e);
e.stopPropagation();
});
})
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers