{"id":714,"date":"2023-03-15T23:55:48","date_gmt":"2023-03-15T20:55:48","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=714"},"modified":"2023-03-28T23:36:42","modified_gmt":"2023-03-28T20:36:42","slug":"menyu-s-effektom-zhalyuzi","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/headermenu\/714\/","title":{"rendered":"Menu with blinds effect"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"781\" style=\"aspect-ratio: 1524 \/ 781;\" width=\"1524\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-15_21-48-39.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;section class=&quot;demo&quot;&gt;\n\n    &lt;dl class=&quot;list nigiri&quot;&gt;\n        &lt;dt&gt;Nigiri&lt;\/dt&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Maguro&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Sake&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Unagi&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Buri&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Suzuki&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Saba&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Iwashi&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Kohada&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Hirame&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Tobiwo&lt;\/a&gt;&lt;\/dd&gt;\n    &lt;\/dl&gt;\n\n    &lt;dl class=&quot;list maki&quot;&gt;\n        &lt;dt&gt;Maki&lt;\/dt&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Ana-kyu&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Chutoro&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Kaiware&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Kampyo&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Kappa&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Natto&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Negitoro&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Oshinko&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Otoro&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Tekka&lt;\/a&gt;&lt;\/dd&gt;\n    &lt;\/dl&gt;\n\n    &lt;dl class=&quot;list sashimi&quot;&gt;\n        &lt;dt&gt;Sashimi&lt;\/dt&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Maguro&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Toro&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Ebi&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Saba&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Ika&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Tako&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Tomago&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Kani&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Katsuo&lt;\/a&gt;&lt;\/dd&gt;\n        &lt;dd&gt;&lt;a href=&quot;#&quot;&gt;Maguro&lt;\/a&gt;&lt;\/dd&gt;\n    &lt;\/dl&gt;\n    &lt;a href=&quot;#&quot; class=&quot;toggle&quot;&gt;Toggle&lt;\/a&gt;\n&lt;\/section&gt;\n\n &lt;script src=&quot;\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n\/\/\u0421\u043a\u0440\u0438\u043f\u0442 js \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">body {\n  background-color: #0e3e50;\n}\n.list {\n  -webkit-transform-style: preserve-3d;\n  -moz-transform-stle: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  -o-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n  text-transform: uppercase;\n  position: absolute;\n  margin-left: -140px;\n  top: 20%;\n}\n\n.list a {\n  display: block;\n  color: #fff;\n}\n\n.list a:hover {\n  text-indent: 20px;\n}\n\n.list dt, .list dd {\n  text-indent: 10px;\n  line-height: 55px;\n  background: #E0FBAC;\n  margin: 0;\n  height: 55px;\n  width: 270px;\n  color: #fff;\n}\n\n.list dt {\n  \/* Since we're hiding elements behind here, we need it in 3d *\/\n  -webkit-transform: translateZ(0.3px);\n  -moz-transform: translateZ(0.3px);\n  -ms-transform: translateZ(0.3px);\n  -o-transform: translateZ(0.3px);\n  transform: translateZ(0.3px);\n  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);\n  font-size: 15px;\n}\n\n.list dd {\n  border-top: 1px dashed rgba(255,255,255,0.3);\n  line-height: 35px;\n  font-size: 11px;\n  height: 35px;\n  margin: 0;\n}\n\n\/* UI *\/\n\n.toggle {\n  -webkit-transform: translateZ(100px);\n  -moz-transform: translateZ(100px);\n  -ms-transform: translateZ(100px);\n  -o-transform: translateZ(100px);\n  transform: translateZ(100px);\n  box-shadow: 0 1px 4px rgba(0,0,0,0.15);\n  border-radius: 3px;\n  text-transform: uppercase;\n  letter-spacing: -1px;\n  line-height: 50px;\n  margin-left: -70px;\n  margin-top: -20px;\n  background: #2b2b2b;\n  text-align: center;\n  font-size: 12px;\n  position: absolute;\n  z-index: 1;\n  height: 50px;\n  bottom: 10%;\n  width: 140px;\n  color: #fff;\n  left: 50%;\n}\n\n.toggle:hover {\n  background: #E42692;\n}\n\n\/* No CSS 3D support warning *\/\n.warning {\n  -webkit-transform: translateZ(2px);\n  -moz-transform: translateZ(2px);\n  -ms-transform: translateZ(2px);\n  -o-transform: translateZ(2px);\n  transform: translateZ(2px);\n  background: rgba(255,255,255,0.6);\n  position: fixed;\n  display: none;\n  z-index: 999;\n  height: 100%;\n  width: 100%;\n  left: 0;\n  top: 0;\n}\n\n.warning .message {\n  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);\n  border-radius: 5px;\n  text-align: center;\n  margin-left: -150px;\n  margin-top: -60px;\n  line-height: 1.5;\n  background: #222;\n  font-size: 12px;\n  position: absolute;\n  padding: 10px;\n  width: 280px;\n  color: #fff;\n  left: 50%;\n  top: 50%;\n}\n\n\/* Individual styles *\/\n.sashimi dt, .sashimi dd, .sashimi a { background: #73C8A9; }\n.nigiri dt, .nigiri dd, .nigiri a { background: #E32551; }\n.maki dt, .maki dd, .maki a { background: #FFC219; }\n.sashimi a:hover { background: #61c19e; }\n.nigiri a:hover { background: #d31b46; }\n.maki a:hover { background: #ffbb00; }\n\n.nigiri {\n  -webkit-transform: perspective(1200px) rotateY(40deg) !important;\n  -moz-transform: perspective(1200px) rotateY(40deg) !important;\n  -ms-transform: perspective(1200px) rotateY(40deg) !important;\n  -o-transform: perspective(1200px) rotateY(40deg) !important;\n  transform: perspective(1200px) rotateY(40deg) !important;\n  -webkit-transform-origin: 110% 25%;\n  -moz-transform-origin: 110% 25%;\n  -ms-transform-origin: 110% 25%;\n  -o-transform-origin: 110% 25%;\n  transform-origin: 110% 25%;\n  left: 20%;\n}\n\n.maki {\n  -webkit-transform: perspective(600px) translateZ(1px) !important;\n  -moz-transform: perspective(600px) translateZ(1px) !important;\n  -ms-transform: perspective(600px) translateZ(1px) !important;\n  -o-transform: perspective(600px) translateZ(1px) !important;\n  transform: perspective(600px) translateZ(1px) !important;\n  left: 50%;\n}\n\n.sashimi {\n  -webkit-transform: perspective(1200px) rotateY(-40deg) !important;\n  -moz-transform: perspective(1200px) rotateY(-40deg) !important;\n  -ms-transform: perspective(1200px) rotateY(-40deg) !important;\n  -o-transform: perspective(1200px) rotateY(-40deg) !important;\n  transform: perspective(1200px) rotateY(-40deg) !important;\n  -webkit-transform-origin: -10% 25%;\n  -moz-transform-origin: -10% 25%;\n  -ms-transform-origin: -10% 25%;\n  -o-transform-origin: -10% 25%;\n  transform-origin: -10% 25%;\n  left: 80%;\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">\/**\n * Copyright (C) 2012 by Justin Windle\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the &quot;Software&quot;), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and\/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *\/\n\n(function ($) {\n\t\/\/ Global initialisation flag\n\tvar initialized = false;\n  \n\t\/\/ For detecting browser prefix and capabilities\n\tvar el = document.createElement(&quot;div&quot;);\n\tvar re = \/^(Moz|(w|W)ebkit|O|ms)(?=[A-Z])\/;\n  \n\t\/\/ Establish vendor prefix and CSS 3D support\n\tvar vendor =\n\t  (function () {\n\t\tfor (var p in el.style) if (re.test(p)) return p.match(re)[0];\n\t  })() || &quot;&quot;;\n\tvar canRun = vendor + &quot;Perspective&quot; in el.style;\n\tvar prefix = &quot;-&quot; + vendor.toLowerCase() + &quot;-&quot;;\n  \n\tvar $this, $root, $base, $kids, $node, $item, $over, $back;\n\tvar wait, anim, last;\n  \n\t\/\/ Public API\n\tvar api = {\n\t  \/\/ Toggle open \/ closed\n\t  toggle: function () {\n\t\t$this = $(this);\n\t\t$this.makisu($this.hasClass(&quot;open&quot;) ? &quot;close&quot; : &quot;open&quot;);\n\t  },\n  \n\t  \/\/ Trigger the unfold animation\n\t  open: function (speed, overlap, easing) {\n\t\t\/\/ Cache DOM references\n\t\t$this = $(this);\n\t\t$root = $this.find(&quot;.root&quot;);\n\t\t$kids = $this.find(&quot;.node&quot;).not($root);\n  \n\t\t\/\/ Establish values or fallbacks\n\t\tspeed = utils.resolve($this, &quot;speed&quot;, speed);\n\t\teasing = utils.resolve($this, &quot;easing&quot;, easing);\n\t\toverlap = utils.resolve($this, &quot;overlap&quot;, overlap);\n  \n\t\t$kids.each(function (index, el) {\n\t\t  \/\/ Establish settings for this iteration\n\t\t  anim = &quot;unfold&quot; + (!index ? &quot;-first&quot; : &quot;&quot;);\n\t\t  last = index === $kids.length - 1;\n\t\t  time = speed * (1 - overlap);\n\t\t  wait = index * time;\n  \n\t\t  \/\/ Cache DOM references\n\t\t  $item = $(el);\n\t\t  $over = $item.find(&quot;.over&quot;);\n  \n\t\t  \/\/ Element animation\n\t\t  $item.css(\n\t\t\tutils.prefix({\n\t\t\t  transform: &quot;rotateX(180deg)&quot;,\n\t\t\t  animation:\n\t\t\t\tanim +\n\t\t\t\t&quot; &quot; +\n\t\t\t\tspeed +\n\t\t\t\t&quot;s &quot; +\n\t\t\t\teasing +\n\t\t\t\t&quot; &quot; +\n\t\t\t\twait +\n\t\t\t\t&quot;s 1 normal forwards&quot;\n\t\t\t})\n\t\t  );\n  \n\t\t  \/\/ Shading animation happens when the next item starts\n\t\t  if (!last) wait = (index + 1) * time;\n  \n\t\t  \/\/ Shading animation\n\t\t  $over.css(\n\t\t\tutils.prefix({\n\t\t\t  animation:\n\t\t\t\t&quot;unfold-over &quot; +\n\t\t\t\tspeed * 0.45 +\n\t\t\t\t&quot;s &quot; +\n\t\t\t\teasing +\n\t\t\t\t&quot; &quot; +\n\t\t\t\twait +\n\t\t\t\t&quot;s 1 normal forwards&quot;\n\t\t\t})\n\t\t  );\n\t\t});\n  \n\t\t\/\/ Add momentum to the container\n\t\t$root.css(\n\t\t  utils.prefix({\n\t\t\tanimation:\n\t\t\t  &quot;swing-out &quot; +\n\t\t\t  $kids.length * time * 1.4 +\n\t\t\t  &quot;s ease-in-out 0s 1 normal forwards&quot;\n\t\t  })\n\t\t);\n  \n\t\t$this.addClass(&quot;open&quot;);\n\t  },\n  \n\t  \/\/ Trigger the fold animation\n\t  close: function (speed, overlap, easing) {\n\t\t\/\/ Cache DOM references\n\t\t$this = $(this);\n\t\t$root = $this.find(&quot;.root&quot;);\n\t\t$kids = $this.find(&quot;.node&quot;).not($root);\n  \n\t\t\/\/ Establish values or fallbacks\n\t\tspeed = utils.resolve($this, &quot;speed&quot;, speed) * 0.66;\n\t\teasing = utils.resolve($this, &quot;easing&quot;, easing);\n\t\toverlap = utils.resolve($this, &quot;overlap&quot;, overlap);\n  \n\t\t$kids.each(function (index, el) {\n\t\t  \/\/ Establish settings for this iteration\n\t\t  anim = &quot;fold&quot; + (!index ? &quot;-first&quot; : &quot;&quot;);\n\t\t  last = index === 0;\n\t\t  time = speed * (1 - overlap);\n\t\t  wait = ($kids.length - index - 1) * time;\n  \n\t\t  \/\/ Cache DOM references\n\t\t  $item = $(el);\n\t\t  $over = $item.find(&quot;.over&quot;);\n  \n\t\t  \/\/ Element animation\n\t\t  $item.css(\n\t\t\tutils.prefix({\n\t\t\t  transform: &quot;rotateX(0deg)&quot;,\n\t\t\t  animation:\n\t\t\t\tanim +\n\t\t\t\t&quot; &quot; +\n\t\t\t\tspeed +\n\t\t\t\t&quot;s &quot; +\n\t\t\t\teasing +\n\t\t\t\t&quot; &quot; +\n\t\t\t\twait +\n\t\t\t\t&quot;s 1 normal forwards&quot;\n\t\t\t})\n\t\t  );\n  \n\t\t  \/\/ Adjust delay for shading\n\t\t  if (!last) wait = ($kids.length - index - 2) * time + speed * 0.35;\n  \n\t\t  \/\/ Shading animation\n\t\t  $over.css(\n\t\t\tutils.prefix({\n\t\t\t  animation:\n\t\t\t\t&quot;fold-over &quot; +\n\t\t\t\tspeed * 0.45 +\n\t\t\t\t&quot;s &quot; +\n\t\t\t\teasing +\n\t\t\t\t&quot; &quot; +\n\t\t\t\twait +\n\t\t\t\t&quot;s 1 normal forwards&quot;\n\t\t\t})\n\t\t  );\n\t\t});\n  \n\t\t\/\/ Add momentum to the container\n\t\t$root.css(\n\t\t  utils.prefix({\n\t\t\tanimation:\n\t\t\t  &quot;swing-in &quot; +\n\t\t\t  $kids.length * time * 1.0 +\n\t\t\t  &quot;s ease-in-out 0s 1 normal forwards&quot;\n\t\t  })\n\t\t);\n  \n\t\t$this.removeClass(&quot;open&quot;);\n\t  }\n\t};\n  \n\t\/\/ Utils\n\tvar utils = {\n\t  \/\/ Resolves argument values to defaults\n\t  resolve: function ($el, key, val) {\n\t\treturn typeof val === &quot;undefined&quot; ? $el.data(key) : val;\n\t  },\n  \n\t  \/\/ Prefixes a hash of styles with the current vendor\n\t  prefix: function (style) {\n\t\tfor (var key in style) {\n\t\t  style[prefix + key] = style[key];\n\t\t}\n  \n\t\treturn style;\n\t  },\n  \n\t  \/\/ Inserts rules into the document styles\n\t  inject: function (rule) {\n\t\ttry {\n\t\t  var style = document.createElement(&quot;style&quot;);\n\t\t  style.innerHTML = rule;\n\t\t  document.getElementsByTagName(&quot;head&quot;)[0].appendChild(style);\n\t\t} catch (error) {}\n\t  }\n\t};\n  \n\t\/\/ Element templates\n\tvar markup = {\n\t  node: '&lt;span class=&quot;node&quot;\/&gt;',\n\t  back: '&lt;span class=&quot;face back&quot;\/&gt;',\n\t  over: '&lt;span class=&quot;face over&quot;\/&gt;'\n\t};\n  \n\t\/\/ Plugin definition\n\t$.fn.makisu = function (options) {\n\t  \/\/ Notify if 3D isn't available\n\t  if (!canRun) {\n\t\tvar message = &quot;Failed to detect CSS 3D support&quot;;\n  \n\t\tif (console &amp;&amp; console.warn) {\n\t\t  \/\/ Print warning to the console\n\t\t  console.warn(message);\n  \n\t\t  \/\/ Trigger errors on elements\n\t\t  this.each(function () {\n\t\t\t$(this).trigger(&quot;error&quot;, message);\n\t\t  });\n\t\t}\n  \n\t\treturn;\n\t  }\n  \n\t  \/\/ Fires only once\n\t  if (!initialized) {\n\t\tinitialized = true;\n  \n\t\t\/\/ Unfold\n\t\tutils.inject(\n\t\t  &quot;@&quot; +\n\t\t\tprefix +\n\t\t\t&quot;keyframes unfold        {&quot; +\n\t\t\t&quot;0%   {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(180deg);  }&quot; +\n\t\t\t&quot;50%  {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(-30deg);  }&quot; +\n\t\t\t&quot;100% {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(0deg);    }&quot; +\n\t\t\t&quot;}&quot;\n\t\t);\n  \n\t\t\/\/ Unfold (first item)\n\t\tutils.inject(\n\t\t  &quot;@&quot; +\n\t\t\tprefix +\n\t\t\t&quot;keyframes unfold-first  {&quot; +\n\t\t\t&quot;0%   {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(-90deg);  }&quot; +\n\t\t\t&quot;50%  {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(60deg);   }&quot; +\n\t\t\t&quot;100% {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(0deg);    }&quot; +\n\t\t\t&quot;}&quot;\n\t\t);\n  \n\t\t\/\/ Fold\n\t\tutils.inject(\n\t\t  &quot;@&quot; +\n\t\t\tprefix +\n\t\t\t&quot;keyframes fold          {&quot; +\n\t\t\t&quot;0%   {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(0deg);    }&quot; +\n\t\t\t&quot;100% {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(180deg);  }&quot; +\n\t\t\t&quot;}&quot;\n\t\t);\n  \n\t\t\/\/ Fold (first item)\n\t\tutils.inject(\n\t\t  &quot;@&quot; +\n\t\t\tprefix +\n\t\t\t&quot;keyframes fold-first    {&quot; +\n\t\t\t&quot;0%   {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(0deg);    }&quot; +\n\t\t\t&quot;100% {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(-180deg); }&quot; +\n\t\t\t&quot;}&quot;\n\t\t);\n  \n\t\t\/\/ Swing out\n\t\tutils.inject(\n\t\t  &quot;@&quot; +\n\t\t\tprefix +\n\t\t\t&quot;keyframes swing-out     {&quot; +\n\t\t\t&quot;0%   {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(0deg);    }&quot; +\n\t\t\t&quot;30%  {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(-30deg);  }&quot; +\n\t\t\t&quot;60%  {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(15deg);   }&quot; +\n\t\t\t&quot;100% {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(0deg);    }&quot; +\n\t\t\t&quot;}&quot;\n\t\t);\n  \n\t\t\/\/ Swing in\n\t\tutils.inject(\n\t\t  &quot;@&quot; +\n\t\t\tprefix +\n\t\t\t&quot;keyframes swing-in      {&quot; +\n\t\t\t&quot;0%   {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(0deg);    }&quot; +\n\t\t\t&quot;50%  {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(-10deg);  }&quot; +\n\t\t\t&quot;90%  {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(15deg);   }&quot; +\n\t\t\t&quot;100% {&quot; +\n\t\t\tprefix +\n\t\t\t&quot;transform: rotateX(0deg);    }&quot; +\n\t\t\t&quot;}&quot;\n\t\t);\n  \n\t\t\/\/ Shading (unfold)\n\t\tutils.inject(\n\t\t  &quot;@&quot; +\n\t\t\tprefix +\n\t\t\t&quot;keyframes unfold-over   {&quot; +\n\t\t\t&quot;0%   { opacity: 1.0; }&quot; +\n\t\t\t&quot;100% { opacity: 0.0; }&quot; +\n\t\t\t&quot;}&quot;\n\t\t);\n  \n\t\t\/\/ Shading (fold)\n\t\tutils.inject(\n\t\t  &quot;@&quot; +\n\t\t\tprefix +\n\t\t\t&quot;keyframes fold-over     {&quot; +\n\t\t\t&quot;0%   { opacity: 0.0; }&quot; +\n\t\t\t&quot;100% { opacity: 1.0; }&quot; +\n\t\t\t&quot;}&quot;\n\t\t);\n  \n\t\t\/\/ Node styles\n\t\tutils.inject(&quot;.node {&quot; + &quot;position: relative;&quot; + &quot;display: block;&quot; + &quot;}&quot;);\n  \n\t\t\/\/ Face styles\n\t\tutils.inject(\n\t\t  &quot;.face {&quot; +\n\t\t\t&quot;pointer-events: none;&quot; +\n\t\t\t&quot;position: absolute;&quot; +\n\t\t\t&quot;display: block;&quot; +\n\t\t\t&quot;height: 100%;&quot; +\n\t\t\t&quot;width: 100%;&quot; +\n\t\t\t&quot;left: 0;&quot; +\n\t\t\t&quot;top: 0;&quot; +\n\t\t\t&quot;}&quot;\n\t\t);\n\t  }\n  \n\t  \/\/ Merge options &amp; defaults\n\t  var opts = $.extend({}, $.fn.makisu.defaults, options);\n  \n\t  \/\/ Extract api method arguments\n\t  var args = Array.prototype.slice.call(arguments, 1);\n  \n\t  \/\/ Main plugin loop\n\t  return this.each(function () {\n\t\t\/\/ If the user is calling a method...\n\t\tif (api[options]) {\n\t\t  return api[options].apply(this, args);\n\t\t}\n  \n\t\t\/\/ Store options in view\n\t\t$this = $(this).data(opts);\n  \n\t\t\/\/ Only proceed if the scene hierarchy isn't already built\n\t\tif (!$this.data(&quot;initialized&quot;)) {\n\t\t  $this.data(&quot;initialized&quot;, true);\n  \n\t\t  \/\/ Select the first level of matching child elements\n\t\t  $kids = $this.children(opts.selector);\n  \n\t\t  \/\/ Build a scene graph for elements\n\t\t  $root = $(markup.node).addClass(&quot;root&quot;);\n\t\t  $base = $root;\n  \n\t\t  \/\/ Process each element and insert into hierarchy\n\t\t  $kids.each(function (index, el) {\n\t\t\t$item = $(el);\n  \n\t\t\t\/\/ Which animation should this node use?\n\t\t\tanim = &quot;fold&quot; + (!index ? &quot;-first&quot; : &quot;&quot;);\n  \n\t\t\t\/\/ Since we're adding absolutely positioned children\n\t\t\t$item.css(&quot;position&quot;, &quot;relative&quot;);\n  \n\t\t\t\/\/ Give the item some depth to avoid clipping artefacts\n\t\t\t$item.css(\n\t\t\t  utils.prefix({\n\t\t\t\t&quot;transform-style&quot;: &quot;preserve-3d&quot;,\n\t\t\t\ttransform: &quot;translateZ(-0.1px)&quot;\n\t\t\t  })\n\t\t\t);\n  \n\t\t\t\/\/ Create back face\n\t\t\t$back = $(markup.back);\n\t\t\t$back.css(&quot;background&quot;, $item.css(&quot;background&quot;));\n\t\t\t$back.css(utils.prefix({ transform: &quot;translateZ(-0.1px)&quot; }));\n  \n\t\t\t\/\/ Create shading\n\t\t\t$over = $(markup.over);\n\t\t\t$over.css(utils.prefix({ transform: &quot;translateZ(0.1px)&quot; }));\n\t\t\t$over.css({\n\t\t\t  background: opts.shading,\n\t\t\t  opacity: 0.0\n\t\t\t});\n  \n\t\t\t\/\/ Begin folded\n\t\t\t$node = $(markup.node).append($item);\n\t\t\t$node.css(\n\t\t\t  utils.prefix({\n\t\t\t\t&quot;transform-origin&quot;: &quot;50% 0%&quot;,\n\t\t\t\t&quot;transform-style&quot;: &quot;preserve-3d&quot;,\n\t\t\t\tanimation: anim + &quot; 1ms linear 0s 1 normal forwards&quot;\n\t\t\t  })\n\t\t\t);\n  \n\t\t\t\/\/ Build display list\n\t\t\t$item.append($over);\n\t\t\t$item.append($back);\n\t\t\t$base.append($node);\n  \n\t\t\t\/\/ Use as parent in next iteration\n\t\t\t$base = $node;\n\t\t  });\n  \n\t\t  \/\/ Set root transform settings\n\t\t  $root.css(\n\t\t\tutils.prefix({\n\t\t\t  &quot;transform-origin&quot;: &quot;50% 0%&quot;,\n\t\t\t  &quot;transform-style&quot;: &quot;preserve-3d&quot;\n\t\t\t})\n\t\t  );\n  \n\t\t  \/\/ Apply perspective\n\t\t  $this.css(\n\t\t\tutils.prefix({\n\t\t\t  transform: &quot;perspective(&quot; + opts.perspective + &quot;px)&quot;\n\t\t\t})\n\t\t  );\n  \n\t\t  \/\/ Display the scene\n\t\t  $this.append($root);\n\t\t}\n\t  });\n\t};\n  \n\t\/\/ Default options\n\t$.fn.makisu.defaults = {\n\t  \/\/ Perspective to apply to rotating elements\n\t  perspective: 1200,\n  \n\t  \/\/ Default shading to apply (null =&gt; no shading)\n\t  shading: &quot;rgba(0,0,0,0.12)&quot;,\n  \n\t  \/\/ Area of rotation (fraction or pixel value)\n\t  selector: null,\n  \n\t  \/\/ Fraction of speed (0-1)\n\t  overlap: 0.6,\n  \n\t  \/\/ Duration per element\n\t  speed: 0.8,\n  \n\t  \/\/ Animation curve\n\t  easing: &quot;ease-in-out&quot;\n\t};\n  \n\t$.fn.makisu.enabled = canRun;\n  })(jQuery);\n  \n  \/\/ The `enabled` flag will be `false` if CSS 3D isn't available\n  \n  if ($.fn.makisu.enabled) {\n\tvar $sashimi = $(&quot;.sashimi&quot;);\n\tvar $nigiri = $(&quot;.nigiri&quot;);\n\tvar $maki = $(&quot;.maki&quot;);\n  \n\t\/\/ Create Makisus\n  \n\t$nigiri.makisu({\n\t  selector: &quot;dd&quot;,\n\t  overlap: 0.85,\n\t  speed: 1.7\n\t});\n  \n\t$maki.makisu({\n\t  selector: &quot;dd&quot;,\n\t  overlap: 0.6,\n\t  speed: 0.85\n\t});\n  \n\t$sashimi.makisu({\n\t  selector: &quot;dd&quot;,\n\t  overlap: 0.2,\n\t  speed: 0.5\n\t});\n  \n\t\/\/ Open all\n  \n\t$(&quot;.list&quot;).makisu(&quot;open&quot;);\n  \n\t\/\/ Toggle on click\n  \n\t$(&quot;.toggle&quot;).on(&quot;click&quot;, function () {\n\t  $(&quot;.list&quot;).makisu(&quot;toggle&quot;);\n\t});\n  \n\t\/\/ Disable all links\n  \n\t$(&quot;.demo a&quot;).click(function (event) {\n\t  event.preventDefault();\n\t});\n  } else {\n\t$(&quot;.warning&quot;).show();\n  }\n  <\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":715,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[43],"class_list":["post-714","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-headermenu","tag-menu"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=714"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/714\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/715"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}