{"id":3042,"date":"2020-08-03T16:16:14","date_gmt":"2020-08-03T07:16:14","guid":{"rendered":"http:\/\/www.editionkawai.jp\/blog\/?p=3042"},"modified":"2020-08-03T16:16:14","modified_gmt":"2020-08-03T07:16:14","slug":"testtest","status":"publish","type":"post","link":"https:\/\/blog.editionkawai.jp\/blog\/2020\/08\/03\/testtest\/","title":{"rendered":"testtest"},"content":{"rendered":"<p><script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\"><\/script>\t<\/p>\n<style>\n.bod {\n\tdisplay: flex;\n\theight: 100vh;<\/p>\n<p>\talign-items: center;\n\tjustify-content: center;\n}<\/p>\n<p>.btn-liquid {\n\tdisplay: inline-block;\n\tposition: relative;\n\twidth: 240px;\n\theight: 60px;<\/p>\n<p>\tborder-radius: 27px;<\/p>\n<p>\tcolor: #fff;\n\tfont: 700 14px\/60px \"Droid Sans\", sans-serif;\n\tletter-spacing: 0.05em;\n\ttext-align: center;\n\ttext-decoration: none;\n\ttext-transform: uppercase;\n}<\/p>\n<p>.btn-liquid .inner {\n\tposition: relative;<\/p>\n<p>\tz-index: 2;\n}<\/p>\n<p>.btn-liquid canvas {\n\tposition: absolute;\n\ttop: -50px;\n\tright: -50px;\n\tbottom: -50px;\n\tleft: -50px;<\/p>\n<p>\tz-index: 1;\n}\t<\/p>\n<\/style>\n<p><script>\n$(function() {\n\t\/\/ Vars\n\tvar pointsA = [],\n\t\tpointsB = [],\n\t\t$canvas = null,\n\t\tcanvas = null,\n\t\tcontext = null,\n\t\tvars = null,\n\t\tpoints = 8,\n\t\tviscosity = 20,\n\t\tmouseDist = 70,\n\t\tdamping = 0.05,\n\t\tshowIndicators = false;\n\t\tmouseX = 0,\n\t\tmouseY = 0,\n\t\trelMouseX = 0,\n\t\trelMouseY = 0,\n\t\tmouseLastX = 0,\n\t\tmouseLastY = 0,\n\t\tmouseDirectionX = 0,\n\t\tmouseDirectionY = 0,\n\t\tmouseSpeedX = 0,\n\t\tmouseSpeedY = 0;<\/p>\n<p>\t\/**\n\t * Get mouse direction\n\t *\/\n\tfunction mouseDirection(e) {\n\t\tif (mouseX < e.pageX)\n\t\t\tmouseDirectionX = 1;\n\t\telse if (mouseX > e.pageX)\n\t\t\tmouseDirectionX = -1;\n\t\telse\n\t\t\tmouseDirectionX = 0;<\/p>\n<p>\t\tif (mouseY < e.pageY)\n\t\t\tmouseDirectionY = 1;\n\t\telse if (mouseY > e.pageY)\n\t\t\tmouseDirectionY = -1;\n\t\telse\n\t\t\tmouseDirectionY = 0;<\/p>\n<p>\t\tmouseX = e.pageX;\n\t\tmouseY = e.pageY;<\/p>\n<p>\t\trelMouseX = (mouseX - $canvas.offset().left);\n\t\trelMouseY = (mouseY - $canvas.offset().top);\n\t}\n\t$(document).on('mousemove', mouseDirection);<\/p>\n<p>\t\/**\n\t * Get mouse speed\n\t *\/\n\tfunction mouseSpeed() {\n\t\tmouseSpeedX = mouseX - mouseLastX;\n\t\tmouseSpeedY = mouseY - mouseLastY;<\/p>\n<p>\t\tmouseLastX = mouseX;\n\t\tmouseLastY = mouseY;<\/p>\n<p>\t\tsetTimeout(mouseSpeed, 50);\n\t}\n\tmouseSpeed();<\/p>\n<p>\t\/**\n\t * Init button\n\t *\/\n\tfunction initButton() {\n\t\t\/\/ Get button\n\t\tvar button = $('.btn-liquid');\n\t\tvar buttonWidth = button.width();\n\t\tvar buttonHeight = button.height();<\/p>\n<p>\t\t\/\/ Create canvas\n\t\t$canvas = $('<canvas><\/canvas>');\n\t\tbutton.append($canvas);<\/p>\n<p>\t\tcanvas = $canvas.get(0);\n\t\tcanvas.width = buttonWidth+100;\n\t\tcanvas.height = buttonHeight+100;\n\t\tcontext = canvas.getContext('2d');<\/p>\n<p>\t\t\/\/ Add points<\/p>\n<p>\t\tvar x = buttonHeight\/2;\n\t\tfor(var j = 1; j < points; j++) {\n\t\t\taddPoints((x+((buttonWidth-buttonHeight)\/points)*j), 0);\n\t\t}\n\t\taddPoints(buttonWidth-buttonHeight\/5, 0);\n\t\taddPoints(buttonWidth+buttonHeight\/10, buttonHeight\/2);\n\t\taddPoints(buttonWidth-buttonHeight\/5, buttonHeight);\n\t\tfor(var j = points-1; j > 0; j--) {\n\t\t\taddPoints((x+((buttonWidth-buttonHeight)\/points)*j), buttonHeight);\n\t\t}\n\t\taddPoints(buttonHeight\/5, buttonHeight);<\/p>\n<p>\t\taddPoints(-buttonHeight\/10, buttonHeight\/2);\n\t\taddPoints(buttonHeight\/5, 0);\n\t\t\/\/ addPoints(x, 0);\n\t\t\/\/ addPoints(0, buttonHeight\/2);<\/p>\n<p>\t\t\/\/ addPoints(0, buttonHeight\/2);\n\t\t\/\/ addPoints(buttonHeight\/4, 0);<\/p>\n<p>\t\t\/\/ Start render\n\t\trenderCanvas();\n\t}<\/p>\n<p>\t\/**\n\t * Add points\n\t *\/\n\tfunction addPoints(x, y) {\n\t\tpointsA.push(new Point(x, y, 1));\n\t\tpointsB.push(new Point(x, y, 2));\n\t}<\/p>\n<p>\t\/**\n\t * Point\n\t *\/\n\tfunction Point(x, y, level) {\n\t  this.x = this.ix = 50+x;\n\t  this.y = this.iy = 50+y;\n\t  this.vx = 0;\n\t  this.vy = 0;\n\t  this.cx1 = 0;\n\t  this.cy1 = 0;\n\t  this.cx2 = 0;\n\t  this.cy2 = 0;\n\t  this.level = level;\n\t}<\/p>\n<p>\tPoint.prototype.move = function() {\n\t\tthis.vx += (this.ix - this.x) \/ (viscosity*this.level);\n\t\tthis.vy += (this.iy - this.y) \/ (viscosity*this.level);<\/p>\n<p>\t\tvar dx = this.ix - relMouseX,\n\t\t\tdy = this.iy - relMouseY;\n\t\tvar relDist = (1-Math.sqrt((dx * dx) + (dy * dy))\/mouseDist);<\/p>\n<p>\t\t\/\/ Move x\n\t\tif ((mouseDirectionX > 0 && relMouseX > this.x) || (mouseDirectionX < 0 &#038;&#038; relMouseX < this.x)) {\n\t\t\tif (relDist > 0 && relDist < 1) {\n\t\t\t\tthis.vx = (mouseSpeedX \/ 4) * relDist;\n\t\t\t}\n\t\t}\n\t\tthis.vx *= (1 - damping);\n\t\tthis.x += this.vx;\n\n\t\t\/\/ Move y\n\t\tif ((mouseDirectionY > 0 && relMouseY > this.y) || (mouseDirectionY < 0 &#038;&#038; relMouseY < this.y)) {\n\t\t\tif (relDist > 0 && relDist < 1) {\n\t\t\t\tthis.vy = (mouseSpeedY \/ 4) * relDist;\n\t\t\t}\n\t\t}\n\t\tthis.vy *= (1 - damping);\n\t\tthis.y += this.vy;\n\t};\n\n\n\t\/**\n\t * Render canvas\n\t *\/\n\tfunction renderCanvas() {\n\t\t\/\/ rAF\n\t\trafID = requestAnimationFrame(renderCanvas);\n\n\t\t\/\/ Clear scene\n\t\tcontext.clearRect(0, 0, $canvas.width(), $canvas.height());\n\t\tcontext.fillStyle = '#fff';\n\t\tcontext.fillRect(0, 0, $canvas.width(), $canvas.height());\n\n\t\t\/\/ Move points\n\t\tfor (var i = 0; i <= pointsA.length - 1; i++) {\n\t\t\tpointsA[i].move();\n\t\t\tpointsB[i].move();\n\t\t}\n\n\t\t\/\/ Create dynamic gradient\n\t\tvar gradientX = Math.min(Math.max(mouseX - $canvas.offset().left, 0), $canvas.width());\n\t\tvar gradientY = Math.min(Math.max(mouseY - $canvas.offset().top, 0), $canvas.height());\n\t\tvar distance = Math.sqrt(Math.pow(gradientX - $canvas.width()\/2, 2) + Math.pow(gradientY - $canvas.height()\/2, 2)) \/ Math.sqrt(Math.pow($canvas.width()\/2, 2) + Math.pow($canvas.height()\/2, 2));\n\n\t\tvar gradient = context.createRadialGradient(gradientX, gradientY, 300+(300*distance), gradientX, gradientY, 0);\n\t\tgradient.addColorStop(0, '#102ce5');\n\t\tgradient.addColorStop(1, '#E406D6');\n\n\t\t\/\/ Draw shapes\n\t\tvar groups = [pointsA, pointsB]\n\n\t\tfor (var j = 0; j <= 1; j++) {\n\t\t\tvar points = groups[j];\n\n\t\t\tif (j == 0) {\n\t\t\t\t\/\/ Background style\n\t\t\t\tcontext.fillStyle = '#1CE2D8';\n\t\t\t} else {\n\t\t\t\t\/\/ Foreground style\n\t\t\t\tcontext.fillStyle = gradient;\n\t\t\t}\n\n\t\t\tcontext.beginPath();\n\t\t\tcontext.moveTo(points[0].x, points[0].y);\n\n\t\t\tfor (var i = 0; i < points.length; i++) {\n\t\t\t\tvar p = points[i];\n\t\t\t\tvar nextP = points[i + 1];\n\t\t\t\tvar val = 30*0.552284749831;\n\n\t\t\t\tif (nextP != undefined) {\n\t\t\t\t\t\/\/ if (nextP.ix > p.ix && nextP.iy < p.iy) {\n\t\t\t\t\t\/\/ \tp.cx1 = p.x;\n\t\t\t\t\t\/\/ \tp.cy1 = p.y-val;\n\t\t\t\t\t\/\/ \tp.cx2 = nextP.x-val;\n\t\t\t\t\t\/\/ \tp.cy2 = nextP.y;\n\t\t\t\t\t\/\/ } else if (nextP.ix > p.ix && nextP.iy > p.iy) {\n\t\t\t\t\t\/\/ \tp.cx1 = p.x+val;\n\t\t\t\t\t\/\/ \tp.cy1 = p.y;\n\t\t\t\t\t\/\/ \tp.cx2 = nextP.x;\n\t\t\t\t\t\/\/ \tp.cy2 = nextP.y-val;\n\t\t\t\t\t\/\/ }  else if (nextP.ix < p.ix &#038;&#038; nextP.iy > p.iy) {\n\t\t\t\t\t\/\/ \tp.cx1 = p.x;\n\t\t\t\t\t\/\/ \tp.cy1 = p.y+val;\n\t\t\t\t\t\/\/ \tp.cx2 = nextP.x+val;\n\t\t\t\t\t\/\/ \tp.cy2 = nextP.y;\n\t\t\t\t\t\/\/ } else if (nextP.ix < p.ix &#038;&#038; nextP.iy < p.iy) {\n\t\t\t\t\t\/\/ \tp.cx1 = p.x-val;\n\t\t\t\t\t\/\/ \tp.cy1 = p.y;\n\t\t\t\t\t\/\/ \tp.cx2 = nextP.x;\n\t\t\t\t\t\/\/ \tp.cy2 = nextP.y+val;\n\t\t\t\t\t\/\/ } else {\n\n\t\t\t\t\t\tp.cx1 = (p.x+nextP.x)\/2;\n\t\t\t\t\t\tp.cy1 = (p.y+nextP.y)\/2;\n\t\t\t\t\t\tp.cx2 = (p.x+nextP.x)\/2;\n\t\t\t\t\t\tp.cy2 = (p.y+nextP.y)\/2;\n\n\t\t\t\t\t\tcontext.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);\n\t\t\t\t\t\/\/ \tcontinue;\n\t\t\t\t\t\/\/ }\n\n\t\t\t\t\t\/\/ context.bezierCurveTo(p.cx1, p.cy1, p.cx2, p.cy2, nextP.x, nextP.y);\n\t\t\t\t} else {\nnextP = points[0];\n\t\t\t\t\t\tp.cx1 = (p.x+nextP.x)\/2;\n\t\t\t\t\t\tp.cy1 = (p.y+nextP.y)\/2;\n\n\t\t\t\t\t\tcontext.bezierCurveTo(p.x, p.y, p.cx1, p.cy1, p.cx1, p.cy1);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t\/\/ context.closePath();\n\t\t\tcontext.fill();\n\t\t}\n\n\t\tif (showIndicators) {\n\t\t\t\/\/ Draw points\n\t\t\tcontext.fillStyle = '#000';\n\t\t\tcontext.beginPath();\n\t\t\tfor (var i = 0; i < pointsA.length; i++) {\n\t\t\t\tvar p = pointsA[i];\n\n\t\t\t\tcontext.rect(p.x - 1, p.y - 1, 2, 2);\n\t\t\t}\n\t\t\tcontext.fill();\n\n\t\t\t\/\/ Draw controls\n\t\t\tcontext.fillStyle = '#f00';\n\t\t\tcontext.beginPath();\n\t\t\tfor (var i = 0; i < pointsA.length; i++) {\n\t\t\t\tvar p = pointsA[i];\n\n\t\t\t\tcontext.rect(p.cx1 - 1, p.cy1 - 1, 2, 2);\n\t\t\t\tcontext.rect(p.cx2 - 1, p.cy2 - 1, 2, 2);\n\t\t\t}\n\t\t\tcontext.fill();\n\t\t}\n\t}\n\n\t\/\/ Init\n\tinitButton();\n});\t\n\t<\/script>\t<\/p>\n<div class=\"bod\">\n<a href=\"http:\/\/waaark.com\" class=\"btn-liquid\"><br \/>\n<span class=\"inner\">\u30df\u30cb\u30d4\u30a2\u30ce\u3063\u3066\u3053\u3093\u306a\u97f3<\/span><br \/>\n<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u30df\u30cb\u30d4\u30a2\u30ce\u3063\u3066\u3053\u3093\u306a\u97f3<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.editionkawai.jp\/blog\/wp-json\/wp\/v2\/posts\/3042"}],"collection":[{"href":"https:\/\/blog.editionkawai.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.editionkawai.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.editionkawai.jp\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.editionkawai.jp\/blog\/wp-json\/wp\/v2\/comments?post=3042"}],"version-history":[{"count":1,"href":"https:\/\/blog.editionkawai.jp\/blog\/wp-json\/wp\/v2\/posts\/3042\/revisions"}],"predecessor-version":[{"id":3043,"href":"https:\/\/blog.editionkawai.jp\/blog\/wp-json\/wp\/v2\/posts\/3042\/revisions\/3043"}],"wp:attachment":[{"href":"https:\/\/blog.editionkawai.jp\/blog\/wp-json\/wp\/v2\/media?parent=3042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.editionkawai.jp\/blog\/wp-json\/wp\/v2\/categories?post=3042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.editionkawai.jp\/blog\/wp-json\/wp\/v2\/tags?post=3042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}