https://github.com/bchoubert/jsonimate
A minimalist jQuery 2D Engine !
https://github.com/bchoubert/jsonimate
Last synced: 3 months ago
JSON representation
A minimalist jQuery 2D Engine !
- Host: GitHub
- URL: https://github.com/bchoubert/jsonimate
- Owner: bchoubert
- License: mit
- Created: 2017-01-13T12:13:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-13T12:35:40.000Z (over 8 years ago)
- Last Synced: 2025-03-11T13:53:00.787Z (3 months ago)
- Language: JavaScript
- Homepage: https://bchoubert.github.io/jsonimate/
- Size: 2.1 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# jsonimate
JSONimate is a minimalist 
jQuery 2D engine that works with CSS3.
You just have to pass a formatted 
JSON to a function and the animations begins !
# Presentation
JSONimate is a jQuery library. You have to include jQuery first to be able to use JSONimate.
This 2D engine generates on the fly CSS properties and jQuery animations.
You can see some examples in the :file_folder:/examples folder or here : https://biok03.github.io/jsonimate/
# Architecture
Folder / File | Description
-------- | --------------
⊢ :file_folder:/examples | Some examples files you have also access with de :pencil:/index.html file
⊢ :pencil:1 | Example 1 : A flying phone...
⊢ :pencil:2 | Example 2 : Carousel...
⊢ :pencil:3 | Example 3 : A running man...
⊢ :file_folder:/images | The images folder
⊢ :pencil:logo.png | The JSONimate logo
⊢ :file_folder:/jsonimate | The JSONimate folder
⊢ :pencil:jsonimate.css | The 
CSS sheet of JSONimate
⊢ :pencil:jsonimate.engine.js | The developer version of JSONimate
⊢ :pencil:jsonimate.engine.min.js | The production version of JSONimate
⊢ :file_folder:/lib | The lib folder
⊢ :pencil:jquery.easing.js | The Easings library that permits to add effects (optional)
⊢ :pencil:jquery.min.js | The jQuery production file ( :warning: required)
⊢ :file_folder:/styles | The styles folder
⊢ :pencil:style.css | The CSS file of the project (purely optional)
⊢ :pencil:Easing.url | Some documentation about the Easings library
⊢ :pencil:gulpfile.js | The 
gulpfile worflow to automatically compress the JSONimate.engine.js file
⊢ :pencil:index.html | The 
index file of the project
⊢ :pencil:package.json | The 
NPM file of the project
The Gulp workflow is purely optional, you can use online minifiers or use the developer version.
If so, don't use NPM as it was included in the project only for Gulp !
# Configuration
As long as JSONimate is a simple jQuery file, you juste need to start with a simple HTML file :
``` html
```
Directs links :
[jQuery CDN](https://code.jquery.com/jquery-3.1.1.min.js)
[Easings Docs](http://easings.net/fr)
# Writing your first JSONimate project
Follow the simple steps :
* Create an index.html file and paste the code in the previous section
* Download the jQuery file or use the CDN
* Choose to include Easings or not
* Create a file called 'call.js' and paste the following code :
``` javascript
$json = {
"ID": {
/* INITIAL STATE HERE */
"states": [
/* FOLLOWING STATES HERE */
]
}
};
jsonimate($json);
```
The "ID" string corresponds to the id of the element that will be created and animated. It must be unique and must not be present in the initial HTML page.
:warning: All options detailled below are mandatory !
## Initial state
The initial state muse be defined at the beginning of the call.js file.
```json
"image": "image.png",
"repetition": 2000,
"startPadding": 0,
"startPosition": {
"x": 10,
"y": 10
},
"startAngle": 0,
"startSize": {
"width": 3,
"height": 3
},
```
### Options
Name | Description
---- | ----
image | The picture to print at the start point
repetition | Delay between the animation end point and the restart of the animation, in ms. (-1 = no repetition)
startPadding | Delay before the animation start at the first time
startPosition | The position the image is printed at the start point (in %)
startAngle | Angle where the image is printed ( :warning: BETA)
startSize | The size of the picture befire the animation starts (in %)
## Following states
A following state is an object that must be paste inside the state[] array inside the call.js file.
:heavy_exclamation_mark: The order inside the states[] array is the order of the animation !
A following state is like this bunch of code :
```json
{
"startImage": "",
"endPos": {
"x": 20,
"y": 10
},
"endAngle": 179,
"endSize": {
"width": 3,
"height": 3
},
"animationType": "linear",
"animationTime": 2000,
"endPaddingTime": 0
},
```
### Options
Name | Description
--- | ---
startImage | The image set at the beginning of the state (if you d'ont want to change image, put "")
endPos | The end position at the end of the state (in %)
endAngle | The angle at the end of the state ( :warning: BETA)
endSize | The size of the picture at the end of the state (in %)
animationType | The type of animation to play. With jQuery, you have swing or linear. With Easings, you can have different types of animations ! (Docs : http://easings.net/fr)
animationTime | The time of the animation (in ms)
endPaddingTime | The time before the next animation starts (for the last state : time before the animation restarts if repetition > 0)
# Credits
Logos here are from [Logonoid](http://logonoid.com/) or official docs !