SpriteSpin Frame Details Example

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

by Alexander Gräfenstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://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

// use helper method to generate an array of image urls. We have 34 frames in total
var frames = SpriteSpin.sourceArray('https://spritespin.ginie.eu/images/rad_zoom_{frame}.jpg', { 
    frame: [1, 34], 
    digits: 3 
});

// 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: frames,
    width: 480,
    sense: -1,
    height: 327,
    animate: false
});
// get the api object. This is used to trigger animation to play up to a specific frame
var api = spin.spritespin("api");