Sprite.js

Static Icons


  <div class="icon_item" sprite="iconset" spriteIdx="0"></div>
  <div class="icon_item md" sprite="iconset" spriteIdx="0"></div>
  <div class="icon_item lg" sprite="iconset" spriteIdx="0"></div>

  <div class="icon_item" sprite="iconset" spriteIdx="0"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="1"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="2"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="3"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="4"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="5"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="6"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="7"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="8"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="9"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="10"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="11"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="12"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="13"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="14"></div>
  <div class="icon_item" sprite="iconset" spriteIdx="15"></div>
    

  const iconset = new Sprite('./src/images/sample_iconset.webp', [2, 8], {
    id: 'iconset',
    offset: [87, 227, 86, 227],
    initialFrame: 0,
  });

  iconset.render();

Animation Sprite

basic
variable
hover
click
[0, 1] loop
[2, 3] loop
[4, 5] loop
[6, 7] loop 

  <div class="animtion_1"></div>
  <div class="animtion_2"></div>
  <div class="animtion_3"></div>
  <div class="animtion_4"></div>
  <div class="animtion_5"></div>
  <div class="animtion_6"></div>
  <div class="animtion_7"></div>
  <div class="animtion_8"></div>
    

  const animation = new Sprite('./src/images/sample_animation.jpg', [2, 4], {
    initialFrame: 0,
    frame: 12,
    loop: true,
  });

  animation.create('.animtion_1', 0).play();
  animation.create('.animtion_2', 0).setSpeed(4).play();
  animation.create('.animtion_3', 0).onPlay();
  animation.create('.animtion_4', 0).onClick();
  animation.create('.animtion_5', 0).play(0, 1);
  animation.create('.animtion_6', 0).play(2, 3);
  animation.create('.animtion_7', 0).play(4, 5);
  animation.create('.animtion_8', 0).play(6, 7);