/sprite-spirit

SCSS Mixin that Brings Image Sprite to life

Primary LanguageCSSMIT LicenseMIT

Sprite Spirit

SCSS Mixin that Brings Image Sprite to life

Image Sprite to Animation Generator:

https://eliorshalev.github.io/sprite-spirit/

sprite spirit

Quick start using CDN:

https://unpkg.com/sprite-spirit@1.0.0/scss/sprite-spirit.scss

Using npm:

npm install sprite-spirit

Using bower:

bower install sprite-spirit

Usage

Include Sprite Spirit Mixin in your project and then use it like:

@include spriteSpirit($name, $url, $vertical, $width, $height, $frameNum, $duration, $iteration, $reverse);
  • $name - String - Animation Name
  • $url - String - Image Sprite Path
  • $vertical - Boolean - Vertical Sprite?
  • $width - Number - Image Sprite Width
  • $height - Number - Image Sprite Height
  • $frameNum - String - Animation Frames
  • $duration - Number - Animation Duration - .8 is Default
  • $iteration - Number - Animation Iteration - 0 is Default (Infinity)
  • $reverse - Boolean - Reverse Animation - false is Default

Demo of Usage

http://codepen.io/eliorshalev/pen/ObPRrw

Credit

Handcrafted with love by Elior Shalev Tabeka