{"id":2,"date":"2022-12-28T06:13:06","date_gmt":"2022-12-28T06:13:06","guid":{"rendered":"https:\/\/horr.nkdev.info\/landing\/?page_id=2"},"modified":"2023-01-10T05:12:40","modified_gmt":"2023-01-10T05:12:40","slug":"landing","status":"publish","type":"page","link":"https:\/\/horr.nkdev.info\/landing\/","title":{"rendered":"Landing"},"content":{"rendered":"<div class=\"lazyblock-horr-hover-slider-Z2dyh7m alignfull wp-block-lazyblock-horr-hover-slider\">  <a target=\"_blank\" href=\"https:\/\/horr.nkdev.info\/\" class=\"horr-hover-slider-link\" data-horr-hover-slider-name=\"Main Demo\">\n    <img decoding=\"async\" src=\"https:\/\/horr.nkdev.info\/landing\/wp-content\/uploads\/sites\/5\/2022\/12\/IP38-EggHunt-1-scaled.jpg\" alt=\"IP38-EggHunt-1\">\n    <span class=\"h2 horr-hover-slider-link-heading\">Main Demo<\/span>\n  <\/a>\n  <a target=\"_blank\" href=\"https:\/\/horr.nkdev.info\/studio\/\" class=\"horr-hover-slider-link\" data-horr-hover-slider-name=\"Studio Demo\">\n    <img decoding=\"async\" src=\"https:\/\/horr.nkdev.info\/landing\/wp-content\/uploads\/sites\/5\/2022\/12\/IP31-TheTower-scaled.jpg\" alt=\"IP31-TheTower\">\n    <span class=\"h2 horr-hover-slider-link-heading\">Studio Demo<\/span>\n  <\/a>\n  <a target=\"_blank\" href=\"https:\/\/horr.nkdev.info\/gamer\/\" class=\"horr-hover-slider-link\" data-horr-hover-slider-name=\"Gamer Demo\">\n    <img decoding=\"async\" src=\"https:\/\/horr.nkdev.info\/landing\/wp-content\/uploads\/sites\/5\/2023\/01\/IP39-DeepMarket-scaled.jpg\" alt=\"IP39-DeepMarket\">\n    <span class=\"h2 horr-hover-slider-link-heading\">Gamer Demo<\/span>\n  <\/a>\n  <a target=\"_blank\" href=\"https:\/\/horr.nkdev.info\/blogger\/\" class=\"horr-hover-slider-link\" data-horr-hover-slider-name=\"Blogger Demo\">\n    <img decoding=\"async\" src=\"https:\/\/horr.nkdev.info\/landing\/wp-content\/uploads\/sites\/5\/2023\/01\/IP39-Overrun-scaled.jpg\" alt=\"IP39-Overrun\">\n    <span class=\"h2 horr-hover-slider-link-heading\">Blogger Demo<\/span>\n  <\/a>\n\n<h2 class=\"horr-hover-slider-label\">Horr Theme<\/h2>\n\n<style>\n  .wp-block-lazyblock-horr-hover-slider,\n  .editor-styles-wrapper .lzb-preview-server > div {\n    --skew: 60px;\n    --gap: 10px;\n    --skew-img: calc(var(--skew) + var(--skew) + var(--gap));\n\n    display: flex;\n    position: fixed;\n    min-height: 400px;\n    top: var(--wp-admin--admin-bar--height);\n    left: 0;\n    width: 100%;\n    height: calc(100% - var(--wp-admin--admin-bar--height));\n    overflow: hidden;\n  }\n  \n  \/* Links. *\/\n  a.horr-hover-slider-link {\n    display: block;\n    flex: 1 1 auto;\n    width: 25%;\n    opacity: .4;\n    transition: width 0.5s cubic-bezier(0.3, 0.5, 0.2, 1), opacity 0.3s ease-in-out;\n  }\n  .horr-hover-slider-link:hover {\n    width: 100%;\n    opacity: 1;\n  }\n  \n  \/* First link. *\/\n  .horr-hover-slider-link:first-of-type {\n    clip-path: polygon(0 0, 0% 100%, calc(100% - var(--skew)) 100%, calc(100% + var(--skew)) 0);\n  }\n  .horr-hover-slider-link:first-of-type > img {\n    clip-path: polygon(0 100%, 0 0, calc(100% - (var(--gap) * 0.5)) 0, calc(100% - var(--skew-img)) 100%);\n  }\n  \n  \/* Last link. *\/\n  .horr-hover-slider-link:last-of-type {\n    clip-path: polygon(var(--skew) 0, calc(var(--skew) * -1) 100%, 100% 100%, 100% 0);\n  }\n  .horr-hover-slider-link:last-of-type > img {\n    clip-path: polygon(var(--gap) 100%, var(--skew-img) 0, 100% 0, 100% 100%);\n  }\n  \n  \/* All links but the first and last. *\/\n  .horr-hover-slider-link:not(:first-of-type):not(:last-of-type) {\n    clip-path: polygon(var(--skew) 0, calc(var(--skew) * -1) 100%, calc(100% - var(--skew)) 100%, calc(100% + var(--skew)) 0);\n  }\n  .horr-hover-slider-link:not(:first-of-type):not(:last-of-type) > img {\n    clip-path: polygon(var(--gap) 100%, var(--skew-img) 0, calc(100% - var(--gap)) 0, calc(100% - var(--skew-img)) 100%);\n  }\n  \n  \/* Images. *\/\n  .horr-hover-slider-link img {\n    object-fit: cover;\n    height: 100%;\n    width: calc(100% + var(--skew) + var(--skew));\n    max-width: calc(100% + var(--skew) + var(--skew));\n    margin-left: calc(var(--skew) * -1);\n    \/* Fixes artifacts in safari. *\/\n    transform: translate3d(0,0,0);\n  }\n  \n  \/* Label. *\/\n  .horr-hover-slider-label {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    margin: 0 !important;\n    pointer-events: none;\n    font-size: 4vw;\n    z-index: 1;\n  }\n  \n  .horr-hover-slider-label > span {\n    display: inline-block;\n    min-width: 20px;\n    opacity: 0;\n    transform: translateX(25px);\n    transition: opacity .7s var(--horr-transition-cubic-easing), transform .6s var(--horr-transition-cubic-easing);\n  }\n\n  .horr-hover-slider-label > .show {\n    transform: translateX(0);\n    opacity: 1;\n  }\n  \n  .horr-hover-slider-link-heading {\n    display: none;\n  }\n  \n  @media (max-width: 1081.98px) {\n    .wp-block-lazyblock-horr-hover-slider,\n    .editor-styles-wrapper .lzb-preview-server > div {\n      position: static;\n      padding: 120px 0;\n      width: var(--horr--container--width);\n      flex-wrap: wrap;\n      gap: 50px 30px;\n      margin: 0 auto;\n    }\n    \n    .horr-hover-slider-label {\n      display: none;\n    }\n    \n    a.horr-hover-slider-link {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 30px;\n      opacity: 1;\n      width: 100%;\n      transition: color var(--horr-transition-duration) var(--horr-transition-easing);\n    }\n    \n    .horr-hover-slider-link:hover,\n    .horr-hover-slider-link:focus {\n      color: var(--horr-color-brand);\n    }\n    \n    .horr-hover-slider-link > img {\n      width: 100%;\n      max-width: 100%;\n      margin-left: 0;\n    }\n    \n    .horr-hover-slider-link,\n    .horr-hover-slider-link > img {\n      clip-path: none !important;\n    }\n    \n    .horr-hover-slider-link-heading {\n      display: block;\n      text-align: center;\n    }\n  }\n  \n  \/* Editor styles. *\/\n  .editor-styles-wrapper .lzb-preview-server > div {\n    position: absolute;\n  }\n<\/style>\n\n<script>\n  const slider = document.querySelectorAll(\".wp-block-lazyblock-horr-hover-slider\");\n  const links = document.querySelectorAll(\".horr-hover-slider-link\");\n  const label = document.querySelectorAll(\".horr-hover-slider-label\");\n  const labelDefaultText = label[0].textContent;\n  \n  function splitText(string) {\n    \/\/ Clean label text.\n    label[0].innerHTML = '';\n\n    let transition = 0;\n\n    \/\/ Split text.\n    string.split(\"\").forEach((symbol) => {\n      transition += 40;\n\n      \/\/ Create span with text.\n      const span = document.createElement(\"span\");\n      span.innerHTML = symbol;\n      \n      \/\/ Add transition delay in the Span Label.\n      span.style.transitionDelay = `${transition}ms`;\n      \n      \/\/ Add show class.\n      setTimeout(() => {\n        span.classList.add('show');\n      }, 10);\n\n      \/\/ Add split text in the Label.\n      label[0].append(span);\n    });\n  }\n  \n  links.forEach((link) => {\n    link.addEventListener(\"mouseenter\", function() {\n      splitText(this.getAttribute(\"data-horr-hover-slider-name\"));\n    }, false);\n  });\n\n  slider[0].addEventListener(\"mouseleave\", function() {\n    splitText(labelDefaultText);\n  }, false);\n<\/script><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ghostkit_customizer_options":"","ghostkit_custom_css":"@media (min-width: 1082px) {\n  body {\n    --horr--container--padding: 0px;\n  }\n}","ghostkit_custom_js_head":"","ghostkit_custom_js_foot":"","ghostkit_typography":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/horr.nkdev.info\/landing\/wp-json\/wp\/v2\/pages\/2"}],"collection":[{"href":"https:\/\/horr.nkdev.info\/landing\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/horr.nkdev.info\/landing\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/horr.nkdev.info\/landing\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/horr.nkdev.info\/landing\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":0,"href":"https:\/\/horr.nkdev.info\/landing\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"wp:attachment":[{"href":"https:\/\/horr.nkdev.info\/landing\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}