├── .gitignore
├── bower.json
├── package.json
├── example
├── index.html
└── datetime.html
├── LICENSE
├── gulpfile.js
├── dist
├── illusion-number.min.js
├── illusion-number.js
├── illusion-number.min.css
└── illusion-number.css
├── src
├── illusion-number.scss
└── illusion-number.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | temp/
4 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "illusion-number",
3 | "version": "0.2.1",
4 | "homepage": "https://github.com/malash/illusion-number",
5 | "repository": {
6 | "type": "git",
7 | "url": "https://github.com/malash/illusion-number.git"
8 | },
9 | "description": "Illusion Number",
10 | "main": [
11 | "dist/illusion-number.min.css",
12 | "dist/illusion-number.min.js"
13 | ],
14 | "moduleType": [
15 | "globals"
16 | ],
17 | "keywords": [
18 | "illusion",
19 | "number"
20 | ],
21 | "authors": [
22 | {
23 | "name": "Malash",
24 | "email": "i@malash.me"
25 | }
26 | ],
27 | "license": "MIT",
28 | "ignore": [
29 | "**/.*",
30 | "node_modules",
31 | "bower_components",
32 | "test",
33 | "tests"
34 | ]
35 | }
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "illusion-number",
3 | "version": "0.2.1",
4 | "description": "Illusion Number",
5 | "repository": {
6 | "type": "git",
7 | "url": "https://github.com/malash/illusion-number.git"
8 | },
9 | "main": "index.js",
10 | "scripts": {
11 | "test": "exit 0"
12 | },
13 | "author": {
14 | "name": "Malash",
15 | "email": "i@malash.me",
16 | "url": "https://malash.me/"
17 | },
18 | "license": "MIT",
19 | "dependencies": {},
20 | "devDependencies": {
21 | "gulp": "^3.9.0",
22 | "gulp-autoprefixer": "^3.0.1",
23 | "gulp-livereload": "^3.8.0",
24 | "gulp-load-plugins": "^0.10.0",
25 | "gulp-minify-css": "^1.2.1",
26 | "gulp-rename": "^1.2.2",
27 | "gulp-sass": "^2.0.4",
28 | "gulp-uglify": "^1.4.1",
29 | "winston": "^1.0.1"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Illusion Number Example
6 |
7 |
8 |
9 |
10 |
11 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Malash
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | 'use scrice';
2 |
3 | var gulp = require('gulp'),
4 | sass = require('gulp-sass'),
5 | plugins = require('gulp-load-plugins')(),
6 | livereload = plugins.livereload,
7 | logger = require('winston'),
8 | fs = require('fs');
9 |
10 | gulp.task('css', function() {
11 | return gulp.src('src/*.scss')
12 | .pipe(sass({ indentWidth: 4 }).on('error', sass.logError))
13 | .pipe(plugins.autoprefixer({
14 | browsers: ['last 2 version', '> 5%', 'ie 10', 'ff 10', 'opera 15', 'chrome 12']
15 | }))
16 | .pipe(gulp.dest('dist/'))
17 | .pipe(plugins.minifyCss())
18 | .pipe(plugins.rename(function (path) {
19 | path.extname = '.min.css';
20 | }))
21 | .pipe(gulp.dest('dist/'));
22 | });
23 |
24 | gulp.task('js', function() {
25 | return gulp.src('src/*.js')
26 | .pipe(gulp.dest('dist/'))
27 | .pipe(plugins.uglify())
28 | .pipe(plugins.rename(function (path) {
29 | path.extname = '.min.js';
30 | }))
31 | .pipe(gulp.dest('dist/'));
32 | });
33 |
34 | gulp.task('dev', function() {
35 | livereload.listen({
36 | start: true
37 | });
38 | gulp.watch('src/*.*', ['css', 'js']).on('change', function(file) {
39 | livereload.changed('example/index.html');
40 | });
41 | gulp.watch('example/*').on('change', function(file) {
42 | livereload.changed(file);
43 | })
44 | });
45 |
46 | gulp.task('build', ['css', 'js']);
47 | gulp.task('default', ['build']);
48 |
--------------------------------------------------------------------------------
/dist/illusion-number.min.js:
--------------------------------------------------------------------------------
1 | !function(n,i){function r(n,i,r){return void 0===a[n]?0:void 0===a[n][i]?0:void 0===a[n][i][r]?0:a[n][i][r]}function e(n,i){var e,o,a,t={"in":[],out:[]};for(e=0;5>e;e++)for(t["in"][e]=[],t.out[e]=[],o=0;3>o;o++){if(t.out[e][o]=[],r(n,e,o))for(a=0;3>a;a++)!r(i,e,a-1)&&r(i,e,a)&&t.out[e][o].push(a+1);if(t["in"][e][o]=[],r(i,e,o))for(a=2;a>=0;a--)!r(n,e,a+1)&&r(n,e,a)&&t["in"][e][o].push(3-a)}return t}function o(n){return console&&console.error&&console.error(n),n}var a={0:[[1,1,1],[1,0,1],[1,0,1],[1,0,1],[1,1,1]],1:[[1,1,0],[0,1,0],[0,1,0],[0,1,0],[1,1,1]],2:[[1,1,1],[0,0,1],[1,1,1],[1,0,0],[1,1,1]],3:[[1,1,1],[0,0,1],[0,1,1],[0,0,1],[1,1,1]],4:[[1,0,1],[1,0,1],[1,1,1],[0,0,1],[0,0,1]],5:[[1,1,1],[1,0,0],[1,1,1],[0,0,1],[1,1,1]],6:[[1,1,1],[1,0,0],[1,1,1],[1,0,1],[1,1,1]],7:[[1,1,1],[0,0,1],[0,0,1],[0,0,1],[0,0,1]],8:[[1,1,1],[1,0,1],[1,1,1],[1,0,1],[1,1,1]],9:[[1,1,1],[1,0,1],[1,1,1],[0,0,1],[1,1,1]]};i.IllusionNumber={play:function(i,r){if(r=r||{},!i)return o(new Error("IllusionNumber.play: "+i+" is not an invalid element"));var t=r.from;if("undefined"==typeof t||"undefined"==typeof a[t])return o(new Error("IllusionNumber.play: "+t+" is not an invalid 'from' char"));var s=r.to;if("undefined"==typeof s&&(s=(parseInt(t)+1)%10),"undefined"==typeof a[s])return o(new Error("IllusionNumber.play: "+s+" is not an invalid 'to' char"));var l=r.size||"250px";parseFloat(l)==l&&(l+="px");var u;/^((\d+)(\.\d+)?)([^\d]+)$/.test(l)&&(u=l.match(/^((\d+)(\.\d+)?)([^\d]+)$/),l=parseFloat(u[1])/6+u[4]),tilePositionsMap=e(t,s);var d=n.createElement("div");d.classList.add("illusion-number"),d.style.fontSize=l;var f=n.createElement("div");f.classList.add("illusion-number-tiles"),r.reverse&&f.classList.add("illusion-number-tiles-reverse");for(var p in["in","out"])for(var v=["in","out"][p],m=0;5>m;m++)for(var c=0;3>c;c++){var y=tilePositionsMap[v][m][c];for(var b in y){var h=y[b],L=n.createElement("div");L.classList.add("illusion-number-tile-x-"+m),L.classList.add("illusion-number-tile-y-"+c),L.classList.add("illusion-number-animation-"+v+"-"+h),r.animationDuration&&!isNaN(parseFloat(r.animationDuration))&&(L.style.animationDuration=parseFloat(r.animationDuration)+"s"),f.appendChild(L)}}d.appendChild(f),i.innerHTML="",i.appendChild(d)},setBitmap:function(n,i){a[n]=i}}}(document,window);
--------------------------------------------------------------------------------
/src/illusion-number.scss:
--------------------------------------------------------------------------------
1 | $animationDuration: 1s;
2 | $tileWidth: 1em;
3 | $tileHeight: 1em;
4 | $lightColor: #dcdcdc;
5 | $darkColor: #707070;
6 | $backgroundColor: #000000;
7 |
8 | .illusion-number {
9 | position: relative;
10 | /* 2^(-1/2) = 0.70710678118655 */
11 | padding: 0 0.70710678118655 * $tileWidth;
12 | width: 3 * $tileWidth;
13 | height: 5 * $tileHeight;
14 | overflow: hidden;
15 | background-color: $backgroundColor;
16 | /* DEBUG */
17 | /* perspective: 500px; */
18 | .illusion-number-tiles {
19 | position: absolute;
20 | width: 3 * $tileWidth;
21 | height: 5 * $tileHeight;
22 | transform-style: preserve-3d;
23 | div {
24 | position: absolute;
25 | backface-visibility: hidden;
26 | /* fix gap between tiles*/
27 | width: 1.05 * $tileWidth;
28 | height: 1.05 * $tileHeight;
29 | margin: 0;
30 | padding: 0;
31 | animation-duration: $animationDuration;
32 | animation-iteration-count: 1;
33 | animation-fill-mode: forwards;
34 | animation-timing-function: ease;
35 | }
36 | @for $x from 0 through 4 {
37 | .illusion-number-tile-x-#{$x} {
38 | top: $x * $tileHeight;
39 | }
40 | }
41 | @for $y from 0 through 2 {
42 | .illusion-number-tile-y-#{$y} {
43 | left: $y * $tileWidth;
44 | transform-origin: (1.5 - $y) * $tileWidth 0 0;
45 | }
46 | }
47 | @mixin illusion-number-animation($deg, $tilePosition) {
48 | transform: rotateY($deg) translateZ(map-get(("1": 1.5em, "2": 0.5em, "3": -0.5em), #{$tilePosition}));
49 | background-color: map-get(("0": #{$lightColor}, "-90deg": #{$darkColor}, "90deg": #{$lightColor}), #{$deg})
50 | }
51 |
52 | @for $tilePosition from 1 through 3 {
53 | .illusion-number-animation-out-#{$tilePosition} {
54 | animation-name: illusion-number-animation-out-#{$tilePosition};
55 | }
56 | @keyframes illusion-number-animation-out-#{$tilePosition} {
57 | 0% {
58 | @include illusion-number-animation(0, $tilePosition);
59 | }
60 | 100% {
61 | @include illusion-number-animation(-90deg, $tilePosition);
62 | }
63 | }
64 | .illusion-number-animation-in-#{$tilePosition} {
65 | animation-name: illusion-number-animation-in-#{$tilePosition};
66 | }
67 | @keyframes illusion-number-animation-in-#{$tilePosition} {
68 | 0% {
69 | @include illusion-number-animation(90deg, $tilePosition);
70 | }
71 | 100% {
72 | @include illusion-number-animation(0, $tilePosition);
73 | }
74 | }
75 | }
76 | }
77 | .illusion-number-tiles-reverse div {
78 | animation-direction: reverse;
79 | }
80 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Illusion Number
2 |
3 | 
4 |
5 | ## Overview
6 |
7 | Implementing an illusion number transform as showing in GIF written in Javascript and CSS.
8 | I find the GIF image from SNS website and don't know its source. Please leave me a issuse if you know it and I will be appreciate for you :)
9 |
10 | ## Demo
11 |
12 | Timer: [https://rawgit.com/malash/illusion-number/master/example/index.html](https://rawgit.com/malash/illusion-number/master/example/index.html)
13 |
14 | Datetime: [https://rawgit.com/malash/illusion-number/master/example/datetime.html](https://rawgit.com/malash/illusion-number/master/example/datetime.html)
15 |
16 | You can find more demos in the `example` folder.
17 |
18 | ## Usage
19 |
20 | Use `bower` to install `illusion-number` to your project:
21 |
22 | ```bash
23 | $ bower install illusion-number
24 | ```
25 |
26 | Then include `.js` and `.css` files:
27 |
28 | ```html
29 |
30 |
31 | ```
32 |
33 | Put an empty `div` emelent to your HTML file:
34 |
35 | ```html
36 |
37 | ```
38 |
39 | Call global variable `IllusionNumber`'s method `play` with the element and options:
40 |
41 | ```javascript
42 | IllusionNumber.play(document.getElementById('test'), {
43 | from: '0',
44 | to: '1'
45 | });
46 | ```
47 |
48 | ## Documentation
49 |
50 | ### IllusionNumber.play(ele, options)
51 |
52 | #### ele
53 |
54 | Type: `element`
55 |
56 | Required: `true`
57 |
58 | The DOM element to bind
59 |
60 | #### options.from
61 |
62 | Type: `number` or `char`
63 |
64 | Required: `true`
65 |
66 | #### options.to
67 |
68 | Type: `number` or `char`
69 |
70 | Required: `true`
71 |
72 | The animation transforms from `options.from` bitmap to `options.to` bitmap.
73 |
74 | #### options.size
75 |
76 | Type: `number` or `string`
77 |
78 | Default: `250px`
79 |
80 | The animation canvas size. Some valid value: `250`, `'14px'`, `'3em'`, `'2rem'`
81 |
82 | #### options.animationDuration
83 |
84 | Type: `number`
85 |
86 | Default: `1`
87 |
88 | The animation duration defaults to 1 second. The type of value could be `number` or `float`.
89 |
90 | #### options.reverse
91 |
92 | Type: `boolean`
93 |
94 | Default: `false`
95 |
96 | If `options.reverse` is `true`, the anamation direction will be reversed.
97 |
98 | ### IllusionNumber.setBitmap(char, bitmap)
99 |
100 | Set or override a bitmap.
101 |
102 | For example:
103 |
104 | ```javascript
105 | IllusionNumber.setBitmap('A', [
106 | [0, 1, 0],
107 | [1, 0, 0],
108 | [1, 1, 1],
109 | [1, 0, 1],
110 | [1, 0, 1]
111 | ]);
112 | IllusionNumber.play(document.getElementById('test'), {
113 | from: '9',
114 | to: 'A'
115 | });
116 |
117 | ```
118 |
119 | #### char
120 |
121 | Type: `char`
122 |
123 | Required: `true`
124 |
125 | Character to set.
126 |
127 | #### bitmap
128 |
129 | Type: `number[][]`
130 |
131 | Required: `true`
132 |
133 | Character's bitmap. The tile displays for value `1` and hides for value `0` at the same position in 2-dimensional array.
134 |
135 | ## Development
136 |
137 | We use `gulp` as build system.
138 |
139 | For development:
140 |
141 | ```bash
142 | npm install
143 | gulp dev
144 | ```
145 |
146 | For build:
147 |
148 | ```bash
149 | npm install
150 | gulp build
151 | ```
152 |
153 | ## License
154 |
155 | The MIT License (MIT)
156 |
157 | Copyright (c) 2015 [Malash](https://malash.me/) <>
158 |
159 | Permission is hereby granted, free of charge, to any person obtaining a copy
160 | of this software and associated documentation files (the "Software"), to deal
161 | in the Software without restriction, including without limitation the rights
162 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
163 | copies of the Software, and to permit persons to whom the Software is
164 | furnished to do so, subject to the following conditions:
165 |
166 | The above copyright notice and this permission notice shall be included in
167 | all copies or substantial portions of the Software.
168 |
169 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
170 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
171 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
172 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
173 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
174 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
175 | THE SOFTWARE.
176 |
--------------------------------------------------------------------------------
/example/datetime.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Illusion Number Datetime Example
6 |
7 |
8 |
9 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |