From e64f009ac9148f3d732ccbafb6892e087beaf42b Mon Sep 17 00:00:00 2001 From: s1n Date: Wed, 24 Jul 2019 18:13:11 +0200 Subject: files upload --- css/main.css | 19 +++++++ favicon.ico | Bin 0 -> 38038 bytes index.html | 176 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ js/app.js | 149 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 344 insertions(+) create mode 100644 css/main.css create mode 100644 favicon.ico create mode 100644 index.html create mode 100644 js/app.js diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..e4beab5 --- /dev/null +++ b/css/main.css @@ -0,0 +1,19 @@ +body { + background: none + } + .bobAnimate-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + width: 375px; + } + .inline { + display: inline-block; + } + #bobAnimate { + margin-left: 5px; + transition-timing-function: ease-in-out; + transition: margin-left 2s; + } + \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..50e8433 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..8d1e16f --- /dev/null +++ b/index.html @@ -0,0 +1,176 @@ + + + + + s1nical - About Me + + + + + + + + + + + + + + + + +
+ s1nical
+ Full-stack developer.

+ Follow me on Twitter. + View my code on GitHub. +
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..b943d69 --- /dev/null +++ b/js/app.js @@ -0,0 +1,149 @@ +window.onload = ()=>{ + animate() + } + + function animate() { + animateFrame( "bobAnimate", 70, [ + { // run right + move: ()=>{ bobAnimate.style.marginLeft = "300px" }, + frames: [ bob_right, bob_right_walk1, bob_right_walk2 ], + delay: 100, + limitFrames: 15, + }, + { // stop blink , blink + frames: [ bob_right_blink, bob_right, bob_right_blink, bob_right, bob_left ], + delay: 150, + limitFrames: 5, + }, + { // turn left, blink + frames: [ bob_left_blink, bob_left ], + delay: 500, + limitFrames: 2, + }, + { // run left + move: ()=>{ bobAnimate.style.marginLeft = "80px" }, + frames: [ bob_left_walk1, bob_left_walk2, bob_left ], + delay: 100, + limitFrames: 15 + }, + { // stop blink + frames: [ bob_left, bob_left_blink, bob_left ], + delay: 500, + limitFrames: 3, + }, + { // turn & blink, blink + frames: [ bob_right, bob_right_blink, bob_right, bob_right_blink, bob_right ], + delay: 100, + limitFrames: 5, + }, + { // run right + move: ()=>{ bobAnimate.style.marginLeft = "200px" }, + frames: [ bob_right, bob_right_walk1, bob_right_walk2 ], + delay: 100, + limitFrames: 13, + }, + { // turn, turn, turn + frames: [ bob_left, bob_right, bob_left ], + delay: 250, + limitFrames: 3, + }, + { // angry, angry + frames: [ bob_left_angry, bob_left, bob_left_angry, bob_left ], + delay: 150, + limitFrames: 4, + }, + { // run left + move: ()=>{ bobAnimate.style.marginLeft = "0px" }, + frames: [ bob_left_walk1, bob_left_walk2, bob_left ], + delay: 100, + limitFrames: 15 + }, + { // turn slow, blnk slow + frames: [ bob_right, bob_right_blink, bob_right ], + delay: 1000, + limitFrames: 3, + }, + { // RESTART + move: ()=>{ animate() }, frames: [], delay: 0, limitFrames: 0 + }, + ]) + } + + function buildFrame(elmId, frameWidth, frame) { + const pW = frameWidth/8 + const elm = document.getElementById(elmId) + elm.innerHTML = ` + + + + + + + + + + + + + + + + + ` + setPixels(elmId, frame) + } + + function setPixels(elmId, frame) { + const g = document.getElementById("g-"+elmId) + g.innerHTML = "" + frame.pixels.map( p => { + g.innerHTML += /*html*/` + + + ` + }) + } + + function animateFrame(elmId, size, anime){ + + buildFrame("bobAnimate", size, anime[0].frames[0]) + anime[0].frames.push(anime[0].frames[0]) + anime[0].frames.shift() + + const g = document.getElementById("g-"+elmId) + + function animate(anime) { + + const int = setInterval(function(){ + if (anime[0].limitFrames === 0) { + clearInterval(int) + anime.shift() + if (anime.length > 0) { + if (anime[0].move) anime[0].move() + animate(anime) + } + } else { + setPixels(elmId, anime[0].frames[0]) + anime[0].frames.push(anime[0].frames[0]) + anime[0].frames.shift() + anime[0].limitFrames-- + } + }, anime[0].delay) + + } + + if (anime[0].move) anime[0].move() + animate(anime) + + } + \ No newline at end of file -- cgit v1.2.3