Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mebjas/jquery-digitalwrite
jquery plugin to write charecters in digital format in a 5x5 matrix
https://github.com/mebjas/jquery-digitalwrite
animation jquery-digitalwrite jquery-plugin
Last synced: 19 days ago
JSON representation
jquery plugin to write charecters in digital format in a 5x5 matrix
- Host: GitHub
- URL: https://github.com/mebjas/jquery-digitalwrite
- Owner: mebjas
- License: mit
- Created: 2015-10-25T18:14:27.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2021-07-06T09:59:30.000Z (over 3 years ago)
- Last Synced: 2024-05-23T08:34:20.177Z (6 months ago)
- Topics: animation, jquery-digitalwrite, jquery-plugin
- Language: JavaScript
- Homepage: https://blog.minhazav.dev/research/jquery-digital-write
- Size: 135 KB
- Stars: 26
- Watchers: 7
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
README
# digitalwrite jQuery plugin
[](https://todofy.org/r/mebjas/jquery-digitalwrite)
jQuery plugin to write charecters in digital format in a 5x5 matrix.
Using this plugin, you can create such charecters with animations, color options & size options!
In future it may enable you to transform one charecter to another - that should be kinda cool!
# Live Demo & more information - [minhazav.dev](https://blog.minhazav.dev/research/jquery-digital-write)
Its live on: https://blog.minhazav.dev/research/jquery-digital-write
# How to use: ([Read More](https://blog.minhazav.dev/research/jquery-digital-write))
- Create a `div`
```html
```
- Include `jQuery` and this library and in js
```js
$("#M_Placeholder").digitalwrite({char: 'M'});
```
This will create a 5X5 digital `M` with `width = 100px` & `height = 500px`, in black color.
These properties can be customised as follows:
`char` - (required) Charecter to print, `(A-Z, '.', '!') supported`
`height` - height of the charecter in px
`width` - width of the charecter in px
`background` - background color of the blocks, ex `red`, `rgba(255, 0, 0, 1)`
`border` - border property of the blocks, ex `1px solid red`, `2px dotted black`
`animation` - how the blocks animate to form the charecter at the end. Categories are: `none`, `motion`, `spiral`, `contract` & `fade` of these `spiral` & `fade` are experimental and buggy!
`success` - (function) callback called when charecter has been printed on screen
`timeout` - control speed of animation, value in ms, `500, default`
So if we use everything it would look something like
```js
$("#M_Placeholder").digitalwrite({
char: 'M',
height: 120,
width: 120,
background: 'rgba(0, 0, 0, .1)',
border: '1px dased black',
animate: 'contract',
success: function() {
console.info('Charecter M ready');
}
});
```
### You can also convert a text to other text!
```js
$("#M_Placeholder").transformTo('K', function() {
console.info('successfully transformed to K');
});
```
 will transform to  with animation!
For more information [view documentation](http://minhazav.xyz/samples/jquery-digitalwrite-example/)
### Animations
Different possible animations are: `none`, `motion`, `spiral`, `contract` & `fade`
