SpriteSpin Frame Details Example

Shows how to use the api to animate between frames and show additional information bubbles

by HyyanAF

HTML

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://unpkg.com/[email protected]/release/spritespin.js"></script>

<div id='spritespin'></div>

<button id="prev">PREV</button>
<button id="next">NEXT</button>

<div class="details" style="display:none;">
  <div class="detail detail-0">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
  <div class="detail detail-8">sed diam nonumy eirmod tempor invidunt ut labore et</div>
  <div class="detail detail-20">consetetur sadipscing elitr, sed diam nonumy eirmod</div>
</div>

CSS

.detail{
      position: absolute;
      width: 100px;
      background: white; 
      opacity: 0.7;
      padding: 10px;
      border: 1px dashed black;
      z-index: 1000;
    }
    .detail-0{
      top : 40px;
      left: 40px;
    }

    .detail-8{
      right : 40px;
      bottom: 40px;
    }

    .detail-20{
      top: 40px;
      left: 40px;
    }

JavaScript

// these are the frame numbers that will show a detail bubble
var details = [0, 8, 20];
// the current index in the details array
var detailIndex = 0;

// initialise spritespin
var spin = $('#spritespin');

spin.spritespin({
    source: 'http://spritespin.ginie.eu/images/bike6x6_big.jpg',
   width: 480,
    height: 327,
    // Set the total number of frames to show. The 6x6 sprite might contain 36 images
    // but it only has 34 frames, hence we set it to 34 here
    frames: 34,
    // The 6x6 sprite sheet contains 6 frames in one row.
    framesX: 6,
    // reverse interaction direction
    sense: -1,
    animate: false
});

console.log(spin)
// get the api object. This is used to trigger animation to play up to a specific frame
var api = spin.spritespin("api");

spin.on("onLoad", function(){
    var data = api.data;
    data.stage.prepend($(".details .detail")); // add current details
    data.stage.find(".detail").hide();         // hide current details
}).on("onFrame", function(){
    var data = api.data;
    data.stage.find(".detail:visible").stop(false).fadeOut();
    data.stage.find(".detail.detail-" + data.frame).stop(false).fadeIn();
});
    
$( "#prev" ).click(function(){
    setDetailIndex(detailIndex - 1);
});
    
$( "#next" ).click(function(){
    setDetailIndex(detailIndex + 1);
});

function setDetailIndex(index){
    detailIndex = index;
    if (detailIndex < 0){
        detailIndex = details.length - 1;
    }
    if (detailIndex >= details.length){
        detailIndex = 0;
    }
    api.playTo(details[detailIndex]);
}