Skip to content
Newer
Older
100644 74 lines (50 sloc) 2.39 KB
796e3ec @darsain Updating readme
authored
1 # [Motio](http://darsa.in/motio)
9813e15 @darsain Initial commit
authored
2
796e3ec @darsain Updating readme
authored
3 Small JavaScript library for simple but powerful sprite based animations and panning.
9813e15 @darsain Initial commit
authored
4
796e3ec @darsain Updating readme
authored
5 Motio takes an element and animates its background position to create an animation effect. All is super optimized for
6 speed and chained to the requestAnimationFrame, with a polyfill for older browsers without it.
9813e15 @darsain Initial commit
authored
7
796e3ec @darsain Updating readme
authored
8 That being said, animating the element background is not the fastest possible way how to do this (canvas solutions are
9 a lot faster), but it is sure as hell the most simple one, and compatible with everything from IE6 and up.
9813e15 @darsain Initial commit
authored
10
796e3ec @darsain Updating readme
authored
11 #### Dependencies
9813e15 @darsain Initial commit
authored
12
796e3ec @darsain Updating readme
authored
13 Motio has no dependencies, but there is an optional
b8227e0 @darsain Changing repo url
authored
14 [Motio jQuery plugin extension](https://raw.github.com/darsain/motio/master/dist/jquery.motio.min.js) available.
9813e15 @darsain Initial commit
authored
15
796e3ec @darsain Updating readme
authored
16 #### Compatibility
9813e15 @darsain Initial commit
authored
17
796e3ec @darsain Updating readme
authored
18 Works everywhere.
9813e15 @darsain Initial commit
authored
19
7969ebb @darsain Moving changelog & documentation to repo.
authored
20 ## Usage
21
22 Sprite animation mode:
23
24 ```js
25 var element = document.querySelector('#sprite');
26 var sprite = new Motio(element, {
27 fps: 10,
28 frames: 14
29 });
30 sprite.play(); // start animation
31 sprite.pause(); // pause animation
32 sprite.toggle(); // toggle play/pause
c872eda @Spone Update README.md
Spone authored
33 sprite.toStart(); // animate to 1st frame and stop
34 sprite.toEnd(); // animate to last frame and stop
35 sprite.to(10); // animate to 11th frame and stop
7969ebb @darsain Moving changelog & documentation to repo.
authored
36 ```
37
38 Seamless background panning mode:
39
40 ```js
41 var element = document.querySelector('#panning');
42 var panning = new Motio(element, {
43 fps: 30, // Frames per second. More fps = higher CPU load.
44 speedX: -30 // Negative horizontal speed = panning to left.
45 });
68d947b @Spone Update README.md
Spone authored
46 panning.play(); // start animation
47 panning.pause(); // pause animation
48 panning.toggle(); // toggle play/pause
7969ebb @darsain Moving changelog & documentation to repo.
authored
49 ```
9813e15 @darsain Initial commit
authored
50
e8c4ba8 @darsain Moving away from bower
authored
51 ## Download
bcde343 @darsain Updating readme
authored
52
e8c4ba8 @darsain Moving away from bower
authored
53 Latest stable release:
bcde343 @darsain Updating readme
authored
54
e8c4ba8 @darsain Moving away from bower
authored
55 - [Production `motio.min.js`](https://raw.github.com/darsain/motio/master/dist/motio.min.js) - 3KB, 1.6KB gzipped
56 - [Development `motio.js`](https://raw.github.com/darsain/motio/master/dist/motio.js) - 12KB
bcde343 @darsain Updating readme
authored
57
e8c4ba8 @darsain Moving away from bower
authored
58 jQuery plugin version:
bcde343 @darsain Updating readme
authored
59
e8c4ba8 @darsain Moving away from bower
authored
60 - [Production `jquery.motio.min.js`](https://raw.github.com/darsain/motio/master/dist/jquery.motio.min.js) - 3.7KB, 1.8KB gzipped
61 - [Development `jquery.motio.js`](https://raw.github.com/darsain/motio/master/dist/jquery.motio.js) - 13.5KB
bcde343 @darsain Updating readme
authored
62
e8c4ba8 @darsain Moving away from bower
authored
63 When isolating issues on jsfiddle, you can use this URL:
bcde343 @darsain Updating readme
authored
64
e8c4ba8 @darsain Moving away from bower
authored
65 - [http://darsain.github.io/motio/js/motio.min.js](http://darsain.github.io/motio/js/motio.min.js)
bcde343 @darsain Updating readme
authored
66
796e3ec @darsain Updating readme
authored
67 ## Documentation
9813e15 @darsain Initial commit
authored
68
7969ebb @darsain Moving changelog & documentation to repo.
authored
69 Can be found in the [docs](https://github.com/darsain/motio/tree/master/docs) directory.
4e1cb08 @darsain Adding links to chinese documentation, closes #15
authored
70
796e3ec @darsain Updating readme
authored
71 ## Contributing
9813e15 @darsain Initial commit
authored
72
68d947b @Spone Update README.md
Spone authored
73 Please, read the [Contributing Guidelines](CONTRIBUTING.md) for this project.
Something went wrong with that request. Please try again.