diff options
| author | s1n <[email protected]> | 2019-07-24 13:09:15 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2019-07-24 13:09:15 +0200 |
| commit | 4e75a2f38fcc62e63891dd3413ddffc34e060a71 (patch) | |
| tree | 1e8650ac2ee17b56e6e22820de227ca347a8f800 | |
| parent | Create .gitignore (diff) | |
| download | wallet-4e75a2f38fcc62e63891dd3413ddffc34e060a71.tar.xz wallet-4e75a2f38fcc62e63891dd3413ddffc34e060a71.zip | |
upload filesets
| -rw-r--r-- | css/main.css | 19 | ||||
| -rw-r--r-- | index.html | 34 | ||||
| -rw-r--r-- | js/app.js | 149 |
3 files changed, 202 insertions, 0 deletions
diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..9be9641 --- /dev/null +++ b/css/main.css @@ -0,0 +1,19 @@ +body {
+ background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/codepen-bg-light1.png")
+ }
+ .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/index.html b/index.html new file mode 100644 index 0000000..11eaf09 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>S1N</title>
+ <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+
+ <div class="bobAnimate-container">
+ <div id="bobAnimate"></div>
+ </div>
+
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/colors.js"></script>
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_right.js"></script>
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_right_walk1.js"></script>
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_right_walk2.js"></script>
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_right_blink.js"></script>
+
+ <!-- left -->
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_left.js"></script>
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_left_walk1.js"></script>
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_left_walk2.js"></script>
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_left_blink.js"></script>
+ <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/782173/bob_left_angry.js"></script>
+
+ <!-- animate -->
+ <script src="js/app.js"></script>
+
+
+ </body>
+</html>
\ 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 = `
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="${frameWidth}px"
+ height="${frameWidth}px"
+ style="background-color: ${frame.bg};"
+ viewBox="0 0 522 522">
+ <defs>
+ <filter id="f1" height="130%" width="130%">
+ <feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur>
+ <feOffset dx="5" dy="5" result="offsetblur"></feOffset>
+ <feComponentTransfer>
+ <feFuncA type="linear" slope="0.5"></feFuncA>
+ </feComponentTransfer>
+ <feMerge>
+ <feMergeNode></feMergeNode>
+ <feMergeNode in="SourceGraphic"></feMergeNode>
+ </feMerge>
+ </filter>
+ </defs>
+ <g filter="url(#f1)" id="g-${elmId}"></g>
+ </svg>
+ `
+ setPixels(elmId, frame)
+ }
+
+ function setPixels(elmId, frame) {
+ const g = document.getElementById("g-"+elmId)
+ g.innerHTML = ""
+ frame.pixels.map( p => {
+ g.innerHTML += /*html*/`
+ <path fill-rule="evenodd"
+ fill="${p.color}"
+ opacity="${p.opacity || 1}"
+ d=" M${p.x*64} ${p.y*64}
+ L${(p.x*64) + 64} ${p.y*64}
+ L${(p.x*64) + 64} ${(p.y*64) + 64}
+ L${(p.x*64)} ${(p.y*64) + 64} Z">
+ </path>
+ `
+ })
+ }
+
+ 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 |