{"id":185,"date":"2023-10-15T00:34:51","date_gmt":"2023-10-14T15:34:51","guid":{"rendered":"https:\/\/finady.jp\/demo-04\/?page_id=185"},"modified":"2023-10-16T14:59:11","modified_gmt":"2023-10-16T05:59:11","slug":"%e5%8b%95%e3%81%8d","status":"publish","type":"page","link":"https:\/\/finady.jp\/demo-04\/%e5%8b%95%e3%81%8d\/","title":{"rendered":"\u52d5\u304d"},"content":{"rendered":"\n<div class=\"container_01\">\n<div class=\"box\"><\/div>\n<\/div>\n\n\n\n<style>\n.container_01 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  overflow: hidden;\n  background: #5CDB94;\n}\n.box {\n  background-color: #05396B;\n  width: 60px;\n  height: 60px;\n  border-radius: 2px;\n}\n<\/style>\n\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script>\nlet animation = gsap.timeline({\n    paused: false, \n    repeat: -1,\n    repeatDelay:0.4\n});\n\nanimation.to(\".box\", {\n        height:140,\n        width: 20,\n        duration: 0.4,\n        ease: \"back\"\n    })\n  .to(\".box\", {\n        rotate: 90,\n        duration: 0.4,\n        delay: 0.1,\n        ease: \"back\"\n    })\n    .to(\".box\", {\n        width: 60,\n        height: 60,\n        duration: 0.4,\n        delay: 0.1,\n        ease: \"back\"\n    })\n  <\/script>\n\n\n\n<div class=\"sample_02\">\n<canvas class=\"c\"><\/canvas>\n<\/div>\n\n\n\n<style>\n.sample_02 {\n  width:100%;\n  height:600px;\n  overflow:hidden;\n  background:#000;\n}\n<\/style>\n\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.5.1\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/zepto\/1.2.0\/zepto.min.js\"><\/script>\n<script>\nvar c = $(\".c\")[0],\n  ctx = c.getContext(\"2d\"),\n  cw = 0,\n  ch = 0,\n  hue = 180,\n  img = new Image(),\n  img2 = new Image(),\n  nCubes = 0,\n  cubes = [],\n  Cube = function (index, _x, _y, _s) {\n    \/\/console.log(_x,_y)\n    this.img = img;\n    this.img2 = img2;\n    this.scale = _s;\n    this.x = _x;\n    this.y = _y;\n    this.z = this.img2_opacity = 0;\n    this.draw = function () {\n      ctx.translate(this.x, this.y + this.z);\n      ctx.drawImage(\n        this.img,\n        (-100 \/ 2) * this.scale,\n        (-200 \/ 2) * this.scale,\n        100 * this.scale,\n        200 * this.scale\n      );\n      ctx.globalAlpha = this.img2_opacity;\n      ctx.drawImage(\n        this.img2,\n        (-100 \/ 2) * this.scale,\n        (-200 \/ 2) * this.scale,\n        100 * this.scale,\n        200 * this.scale\n      );\n      ctx.globalAlpha = 1;\n      ctx.translate(-this.x, -(this.y + this.z));\n    };\n    this.draw();\n  };\n\nimg.src =\n  \"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAADIBAMAAADsElnyAAAAJFBMVEVHcEw+Pj5aWloQEBAZGRleXl6AgIDAwMBwcHCampq7u7tzc3M0sGdFAAAABXRSTlMAp\/UwQ5FLsO8AAADxSURBVHgB7c9HcQRhDITRn8NgMABDWAjO6ewMYLgsWef8akelk1Pr\/upTj023mkZxiK3dqSsODnpmdXBwUBlEaRCYckdtEKVBYModmKbQKDrGHZpaaPyqZxQaRc8oNPVyTaehUVRGURhFYerlmu2D5k3jqimO1+MCU4h5XFzc9sQjaXTO1vMTobMkXgmdBfFKNnTY8UroLIp3YkfxldBhB4QOAkIHAaHDDggdBIQOX0HoICB0EBA6CAgdlkPoICB0+ApCBwGhw1cQOggIBgHh5pCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQH0XuAS5hV4q0a3iHAAAAAElFTkSuQmCC\";\n\nimg2.src =\n  \"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAADIBAMAAADsElnyAAAAJFBMVEVHcEylpaXv7+\/Gxsa+vr7m5uahoaE\/Pz9\/f3+Ojo5lZWWCgoKkaSxxAAAABnRSTlMA9TCcskPTdr2ZAAAA40lEQVR4Ae3POW0EQQBE0UZhBEawWBaAzz0QDIVhYgxmZ3X6pFZpIl\/18xf8sep8GinFwzMmi8sFk8TlctFkockiGz80WWiyyMYPTRbZKLLxIxtFMIoVwCCSUQSTRDaeZ3POAKPIRpGNIhvPs3m8HOw0Pg+K+8fYo0FsY48GMUkyiEmSQUySDGKSZBCTJIOYZG0QkIVBQDQKydogIBqFRKOQaBSQYBAQDAKCQQSCUUg0CAhmLSAYhUSDgCwMIpFpFJnsW0lJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUlJSUnJjyJfg4PNmR1hT+AAAAAASUVORK5CYII=\";\nimg.onload = window.onresize = setGrid;\n\nfunction setGrid() {\n  \/\/console.log('set grid')\n\n  c.width = window.innerWidth;\n  c.height = window.innerHeight;\n  cw = Math.ceil(c.width \/ 100 + 1);\n  ch = Math.floor(c.height \/ 25 + 10);\n\n  cubes = [];\n\n  for (var i = (_y = 0); _y < ch; _y++) {\n    for (var _x = 0; _x < cw; _x++) {\n      \/\/console.log(_y%2==0)\n      if (_y % 2 == 0)\n        cubes.push(new Cube(i, -25 + _x * 100, -75 + _y * 25, 0.9));\n      else cubes.push(new Cube(i, 25 + _x * 100, -75 + _y * 25, 0.9));\n      i++;\n    }\n  }\n\n  nCubes = cubes.length; \/\/console.log(nCubes)\n}\n\nvar staggerAnim;\nfunction anim() {\n  staggerAnim = gsap\n    .timeline({ onComplete: anim })\n    .add(staggerFrom(gsap.utils.random(0, nCubes, 1)));\n}\n\nfunction staggerFrom(from) {\n  return gsap\n    .timeline()\n    .to(\n      cubes,\n      {\n        duration: 1,\n        z: 125,\n        ease: \"back.in(3)\",\n        stagger: {\n          yoyo: true,\n          amount: 2.5,\n          grid: [ch, cw],\n          overwrite: \"auto\",\n          from: from,\n          onComplete: function () {\n            \/\/ Like reverse: 1 but make sure to reach a z of 0\n            gsap.to(this.targets(), {\n              duration: 1,\n              z: 0,\n              ease: \"back.out(3)\"\n            });\n          }\n        }\n      },\n      0\n    )\n    .to(\n      cubes,\n      {\n        duration: 0.6,\n        img2_opacity: 1,\n        stagger: {\n          yoyo: true,\n          amount: 2.5,\n          grid: [ch, cw],\n          overwrite: \"auto\",\n          from: from,\n          onComplete: function () {\n            gsap.to(this.targets(), {\n              duration: 0.6,\n              img2_opacity: 0\n            });\n          }\n        }\n      },\n      0\n    );\n}\ngsap.delayedCall(0.2, anim);\n\n$(\".c\").on(\"click\", function (e) {\n  staggerAnim.eventCallback(\"onComplete\", null);\n\n  \/\/ An approximation that works okay\n  var gridX = Math.floor(\n    ((e.layerX -\n      ((e.layerX \/ c.width) * 2 - 1) * 20 -\n      (e.layerX \/ c.width) * 75) \/\n      c.width) *\n      cw\n  );\n  var gridY = Math.floor(\n    ((e.layerY - ((e.layerY \/ c.height) * 2 - 1) * 75 + 40) \/ c.height) * ch\n  );\n  var i = cw * gridY + gridX;\n\n  staggerFrom(i); \/\/console.log(gridX, gridY, i);\n});\n\ngsap.ticker.add(() => {\n  \/\/update on each tick\n\n  ctx.clearRect(0, 0, c.width, c.height);\n\n  ctx.globalCompositeOperation = \"source-over\";\n  for (var i = 0; i < nCubes; i++) cubes[i].draw();\n\n  hue -= 0.5;\n  ctx.globalCompositeOperation = \"lighter\";\n  ctx.fillStyle = \"hsl(\" + hue + \", 75%, 25%)\";\n  ctx.fillRect(0, 0, c.width, c.height);\n});\n<\/script>\n\n\n\n<div class=\"sample_03\">\n<div class=\"container container_02 final\">\n\t<div class=\"letter F\">F<\/div>\n\t<div class=\"letter l\">l<\/div>\n\t<div class=\"letter i\">i<\/div>\n\t<div class=\"letter p\">p<\/div>\n\t<div class=\"for\">for<\/div>\n\t<div class=\"gsap\">Finady<\/div>\n<\/div>\n<\/div>\n\n\n\n<style>\n.sample_03 {\n  background: black;\n  padding: 0;\n  margin: 0;\n  font-family: \"Signika Negative\", sans-serif, Arial;\n  font-weight: 300;\n  height: 800px;\n  overflow: hidden;\n}\n.container_02 {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n}\n.container.grid, .container.columns {\n  align-content: stretch;\n  align-items: stretch;\n  flex-wrap: wrap;\n}\n\n.letter {\n  text-align: center;\n  color: black;\n  font-size: 10vmax;\n  font-weight: 400;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 6px;\n}\n.container.grid .letter {\n  flex-basis: 50%;\n}\n.container.columns .letter {\n  flex-basis: 25%;\n}\n.for, .gsap {\n  font-size: 4vmax;\n  color: white;\n}\n.for {\n  padding: 2px 1.6vmax;\n  font-weight: 300;\n  display: none;\n}\n.gsap {\n  padding: 2px 0;\n  font-weight: 600;\n  display: none;\n}\n.container.final .for, .container.final .gsap {\n  display: block;\n}\n.F {\n  background: rgba(0, 188, 212, 0.7);\n}\n.l {\n  background: rgba(40, 150, 255, 0.7);\n}\n.i {\n  background: rgba(153, 80, 220, 0.7);\n}\n.p {\n  background: rgba(90, 108, 225, 0.7);\n}\n.container.plain .letter {\n  background: transparent;\n  color: white;\n  padding: 0;\n}\n<\/style>\n\n\n\n<script src=\"https:\/\/assets.codepen.io\/16327\/gsap-latest-beta.min.js\"><\/script>\n<script src=\"https:\/\/assets.codepen.io\/16327\/Flip.min.js\"><\/script>\n<script>\ngsap.registerPlugin(Flip);\n\nlet layouts = [\"final\", \"plain\", \"columns\", \"grid\"],\n\t\tcontainer = document.querySelector(\".container\"),\n\t\tcurLayout = 0; \/\/ index of the current layout\n\nfunction nextState() {\n  const state = Flip.getState(\".letter, .for, .gsap\", {props: \"color,backgroundColor\", simple: true}); \/\/ capture current state\n  \n  container.classList.remove(layouts[curLayout]); \/\/ remove old class\n  curLayout = (curLayout + 1) % layouts.length;   \/\/ increment (loop back to the start if at the end)\n  container.classList.add(layouts[curLayout]);    \/\/ add the new class\n\n  Flip.from(state, { \/\/ animate from the previous state\n    absolute: true,\n    stagger: 0.07,\n    duration: 0.7,\n    ease: \"power2.inOut\",\n    spin: curLayout === 0, \/\/ only spin when going to the \"final\" layout\n    simple: true,\n    onEnter: (elements, animation) => gsap.fromTo(elements, {opacity: 0}, {opacity: 1, delay: animation.duration() - 0.1}),\n    onLeave: elements => gsap.to(elements, {opacity: 0})\n  });\n\n  gsap.delayedCall(curLayout === 0 ? 3.5 : 1.5, nextState);\n}\n\ngsap.delayedCall(1, nextState);\n<\/script>\n\n\n\n<div class=\"sample_04\">\n<svg id=\"mainSVG\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 800 600\">\n\n     <defs>\n\t\t\t  <g id=\"allBoxes\">\n        <rect x=\"62.92\" y=\"231.96\" width=\"100\" height=\"100\"\/>\n        <rect x=\"185.14\" y=\"231.96\" width=\"100\" height=\"100\" rx=\"50\"\/>\n        <rect x=\"305.14\" y=\"231.96\" width=\"100\" height=\"100\"\/>\n        <rect x=\"425.14\" y=\"231.96\" width=\"100\" height=\"100\" rx=\"50\"\/>\n        <rect x=\"545.14\" y=\"231.96\" width=\"100\" height=\"100\"\/>\n        <rect x=\"665.14\" y=\"231.96\" width=\"100\" height=\"100\" rx=\"50\"\/>\n        <rect x=\"785.14\" y=\"231.96\" width=\"100\" height=\"100\"\/>\n      <\/g>\n\t\t\t <\/defs>\n\t\n\t<use xlink:href=\"#allBoxes\" \/>\n\t<g id=\"ref\" >\n\t<use xlink:href=\"#allBoxes\" x=\"-0\" y=\"100\" opacity=\"0.1\"\/>\n<\/g>\n<\/svg>\n<\/div>\n\n\n\n<style>\n.sample_04 {\n background-color: #FFF;\n overflow: hidden;\n text-align:center;\n  display: flex;\n  align-items: center;\n  justify-content: center; \n}\n\nbody,\nhtml {\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n}\n\nsvg {\n width: 100%;\n height: 100%;\n visibility: hidden;\n \n}\n\n#allBoxes rect:nth-child(3) {\n\tfill: #F2F230;\n}\n#allBoxes rect:nth-child(4) {\n\tfill: #C2F261;\n}\n#allBoxes rect:nth-child(5) {\n\tfill: #91F291;\n}\n#allBoxes rect:nth-child(6) {\n\tfill: #61F2C2;\n}\n#allBoxes rect:nth-child(7) {\n\tfill: #30F2F2;\n}\n\n#allBoxes rect:nth-child(2) {\n\tfill: #F4CC2D;\n}\n#allBoxes rect:nth-child(1) {\n\tfill: #FAA027;\n}\n<\/style>\n\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.3.1\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/35984\/ScrubGSAPTimeline_3_0.js\"><\/script>\n<script>\nlet select = s => document.querySelector(s),\n  selectAll = s =>  document.querySelectorAll(s),\n\t\tmainSVG = select('#mainSVG')\n\ngsap.set('svg', {\n\tvisibility: 'visible'\n})\n\nlet tl = gsap.timeline({repeat: -1});\ntl.to('#allBoxes rect', {\n\ttransformOrigin: '107% 50%',\n\trotation: gsap.utils.wrap([180, -180]),\n\tstagger: {\n\t\teach: 0.14,\n\t}\n})\n.to('#allBoxes', {\n\tx: -112,\n\tduration: tl.recent().duration(),\n\tease: 'linear'\n}, 0)\n\ngsap.set('#ref', {\n\tscaleY: -1,\n\ttransformOrigin: '50% 50%'\n})\n\/\/ScrubGSAPTimeline(tl)\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>F l i p for Finady<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"swell_btn_cv_data":"","footnotes":""},"class_list":["post-185","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/finady.jp\/demo-04\/wp-json\/wp\/v2\/pages\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/finady.jp\/demo-04\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/finady.jp\/demo-04\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/finady.jp\/demo-04\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/finady.jp\/demo-04\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":59,"href":"https:\/\/finady.jp\/demo-04\/wp-json\/wp\/v2\/pages\/185\/revisions"}],"predecessor-version":[{"id":262,"href":"https:\/\/finady.jp\/demo-04\/wp-json\/wp\/v2\/pages\/185\/revisions\/262"}],"wp:attachment":[{"href":"https:\/\/finady.jp\/demo-04\/wp-json\/wp\/v2\/media?parent=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}