css-sprite-lite
v2.1.1
Published
An easy AND LIGHT way to create a spinner from a sprite
Downloads
8
Readme
csSpriteLite
csSpriteLite is a standalone and light script to animate sprites.
Installation
npm install css-sprite-lite
Example
const csSpriteLite = require('css-sprite-lite');
let sprite = new csSpriteLite({
anchor : document.getElementById('cssprit-container'),
url : "sprite.png",
classname : 'class_1 class_2'
width : 184,
height : 325,
loop_from : 8,
ignored_frames : [29, 30],
interval : 100,
onLoaded : function(sprite) {
sprite.goTo(5);
sprite.play();
sprite.pauseTo(60);
}
});
<div id="cssprit-container"></div>
Options
- anchor : The dom element you want to display your sprite into. Default is document.body
- url : The file path of your sprite
- classname : Add passed class to the sprite container
- width / height : The size of a UNIQUE element in your sprite
- interval : Time (in ms) between to elements of your sprite. Default is 100
- loop_from : Just in case you don't want to loop from the beginning of your sprite (imagine an intro for exemple). Default is 0
- ignored_frames : Array of elements you eventually want to ignore.
- onLoaded : Callback used when the source sprite is loaded.
NB
loop_from and ignored_frames options work with frame numbers : for exemple, if you have 8 frames of intro, you should loop from frame 8 (begin with frame 0, same thing for ignored_frames)...
Methods
play()
Play sprite with passed options. If you paused it, it will resume from current frame.
pause()
Pause animation on current frame.
goTo(frame_key)
Alias of pause method, point to passed frame key.
pauseTo(frame_key)
Will play untill frame key.
Todos
- Accept coords for ignored_frames and loop_from
- Write tests, tests, TESTS !
License
MIT License style, please distribute & credit me somewhere.