Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eliortabeka/sprite-spirit
SCSS Mixin that Brings Image Sprite to life
https://github.com/eliortabeka/sprite-spirit
sprite-image
Last synced: about 1 month ago
JSON representation
SCSS Mixin that Brings Image Sprite to life
- Host: GitHub
- URL: https://github.com/eliortabeka/sprite-spirit
- Owner: eliortabeka
- License: mit
- Created: 2016-11-06T02:29:39.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-07T21:15:49.000Z (over 6 years ago)
- Last Synced: 2024-05-08T13:11:21.708Z (8 months ago)
- Topics: sprite-image
- Language: CSS
- Homepage: https://eliortabeka.github.io/sprite-spirit/
- Size: 3.1 MB
- Stars: 234
- Watchers: 5
- Forks: 68
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Sprite Spirit
SCSS Mixin that Brings Image Sprite to **life**
### Image Sprite to Animation Generator:
https://eliortabeka.github.io/sprite-spirit/
**Quick start using CDN:**
```
https://unpkg.com/[email protected]/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:
```html
@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/eliortabeka/pen/ObPRrw
### Credit
Handcrafted with love by [Elior Shalev Tabeka](http://codepen.io/eliortabeka)