{"id":86,"date":"2023-10-19T08:35:47","date_gmt":"2023-10-19T08:35:47","guid":{"rendered":"https:\/\/x-impuls.kp-w.de\/?page_id=86"},"modified":"2023-10-19T10:52:50","modified_gmt":"2023-10-19T10:52:50","slug":"parallax-logo","status":"publish","type":"page","link":"https:\/\/x-impuls.kp-w.de\/index.php\/parallax-logo\/","title":{"rendered":"Parallax Logo"},"content":{"rendered":"\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<style>\n  \/*body {\n    margin: 0;\n    height:2500px;    \n  }\n  *\/\n\n  section {\n          width: 100%;\n          height: 2000px;\n          margin: auto;\n          background: #e7e2dd;\n          text-align: center;\n  }\n  \n  .container {\n    \/* position: fixed; *\/\n    width: 100%;\n     height:2500px;    \n   \n  }\n  \n  video {\n    width: 100%;\n  }\n  \n  .overlay {\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n  }\n<\/style>\n   \n    <script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>\n    <script>\n      $(document).ready(function() {\n    var s = skrollr.init([\n      smoothScrolling=true,\n      smoothScrollingDuration=1000,\n      \/\/forceHeight=true,\n\n    ]);\n    console.log('hello');\n    constants: {\n      \/\/fill the box for a \"duration\" of 150% of the viewport (pause for 150%)\n      \/\/adjust for shorter\/longer pause\n      \n      knockout: '1000px',\n      forceHeight=true\n    }\n  })  \n    <\/script>\n\n<\/head>\n\n<body>\n                                                 \n  <script src=\"https:\/\/x-impuls.kp-w.de\/js\/jquery-2.1.3.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/skrollr\/0.6.30\/skrollr.min.js\"><\/script>\n  \n  <div class=\"container\">\n  \n    <video autoplay muted loop id=\"myVideo\">\n      <source src=\"https:\/\/x-impuls.kp-w.de\/parallax\/AdobeStock_203432259_Video_HD_Preview.mov\" type=\"video\/mp4\">\n    <\/video>\n  \n    <svg class=\"overlay\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid slice\">\n      <defs>\n        <mask id=\"knockout\" maskContentUnits=\"objectBoundingBox\">\n          <rect x=\"0\" y=\"0\" width=\"1\" height=\"1\" fill=\"white\"\/>\n          <g fill=\"black\" data-0=\"transform: translate(0.5px,0.5px) scale(0.0004) translate(-49px,-49px);\"\n             data-200p=\"transform: translate(0.5px,0.5px) scale(0.08) translate(-53px,-49px);\">\n\n             <g>\n              <path d=\"M50.4,30.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l5.8-5.8c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9l-5.8,5.8\n                C51.5,30.6,50.9,30.8,50.4,30.8z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M33,48.2c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l11.6-11.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L34.5,47.6\n                C34.1,48,33.5,48.2,33,48.2z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M27.2,42.4c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l23.2-23.2c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9\n                L28.7,41.8C28.3,42.2,27.7,42.4,27.2,42.4z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M21.4,36.6c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l11.6-11.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L22.9,36\n                C22.5,36.4,21.9,36.6,21.4,36.6z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M9.8,25c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l5.8-5.8c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9l-5.8,5.8\n                C10.9,24.8,10.3,25,9.8,25z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M4,19.2c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3-0.1-0.4-0.1C3.1,19,3,18.9,2.9,18.9c-0.1-0.1-0.2-0.2-0.3-0.3\n                c-0.1-0.1-0.2-0.2-0.2-0.3c-0.1-0.1-0.1-0.2-0.2-0.4C2.1,17.8,2,17.7,2,17.5c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4\n                c0-0.1,0.1-0.3,0.1-0.4c0.1-0.1,0.1-0.2,0.2-0.4c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.4-0.2\n                c0.1-0.1,0.2-0.1,0.4-0.1C4.3,15,5,15.2,5.5,15.7c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.1,0.1,0.2,0.2,0.4C6,16.5,6,16.6,6,16.7\n                c0,0.1,0,0.3,0,0.4c0,0.1,0,0.3,0,0.4c0,0.1-0.1,0.3-0.1,0.4c-0.1,0.1-0.1,0.2-0.2,0.4c-0.1,0.1-0.2,0.2-0.3,0.3\n                c-0.1,0.1-0.2,0.2-0.3,0.3C5,18.9,4.9,19,4.8,19.1c-0.1,0.1-0.3,0.1-0.4,0.1C4.3,19.2,4.1,19.2,4,19.2z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M15.6,30.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l11.6-11.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9\n                L17.1,30.2C16.7,30.6,16.1,30.8,15.6,30.8z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M56.4,71.2c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9L67.6,55c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L57.9,70.6\n                C57.5,71,56.9,71.2,56.4,71.2z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M62,77.2c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l23.2-23.2c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L63.5,76.6\n                C63,77,62.5,77.2,62,77.2z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M27.2,88.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l69.6-69.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9\n                L28.7,88.2C28.3,88.6,27.7,88.8,27.2,88.8z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M15.6,88.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l69.7-69.7c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9\n                L17.1,88.2C16.7,88.6,16.1,88.8,15.6,88.8z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M4,88.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l69.6-69.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L5.5,88.2\n                C5.1,88.6,4.5,88.8,4,88.8z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M85.2,88.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l5.8-5.8c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9l-5.8,5.8\n                C86.2,88.6,85.7,88.8,85.2,88.8z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M73.6,88.8c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l18.6-18.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L75,88.2\n                C74.6,88.6,74.1,88.8,73.6,88.8z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M84.1,43.5c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l12.7-12.7c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9\n                L85.6,42.9C85.2,43.3,84.6,43.5,84.1,43.5z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M67.8,83c-0.5,0-1.1-0.2-1.5-0.6c-0.8-0.8-0.8-2.1,0-2.9l11.6-11.6c0.8-0.8,2.1-0.8,2.9,0c0.8,0.8,0.8,2.1,0,2.9L69.2,82.4\n                C68.8,82.8,68.3,83,67.8,83z\"\/>\n            <\/g>\n            <g>\n              <path d=\"M96.8,88.8c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3-0.1-0.4-0.1c-0.1,0-0.2-0.1-0.4-0.2c-0.1-0.1-0.2-0.2-0.3-0.3\n                c-0.2-0.2-0.3-0.4-0.4-0.7c-0.1-0.2-0.2-0.5-0.2-0.8c0-0.1,0-0.3,0-0.4c0-0.1,0.1-0.3,0.1-0.4c0.1-0.1,0.1-0.2,0.2-0.4\n                c0.1-0.1,0.2-0.2,0.2-0.3c0.8-0.8,2.2-0.8,2.9,0c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.1,0.1,0.2,0.2,0.4c0,0.1,0.1,0.3,0.1,0.4\n                c0,0.1,0,0.3,0,0.4c0,0.3-0.1,0.5-0.2,0.8c-0.1,0.2-0.3,0.5-0.5,0.7c-0.1,0.1-0.2,0.2-0.3,0.3c-0.1,0.1-0.2,0.1-0.4,0.2\n                c-0.1,0.1-0.3,0.1-0.4,0.1C97.1,88.8,96.9,88.8,96.8,88.8z\"\/>\n            <\/g>\n\n\n          <\/g>\n        <\/mask>\n      <\/defs>\n      <rect x=\"-150\" y=\"-150\" width=\"400\" height=\"400\" fill=\"white\" mask=\"url(#knockout)\"\/>\n    <\/svg>\n  \n  <\/div>\n    \n      \n    <\/body>\n\n\n    <\/html><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns alignfull is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><html lang=\"en\">\n<head>\n\t<meta charset=\"utf-8\">\n\n\t<style>\n\t\tbody {\n\t\t\tfont-family: 'Quicksand', sans-serif;\n\t\t\tmargin: 0;\n\t\t}\n\t\tsection {\n\t\t\twidth: 100%;\n\t\t\theight: 2000px;\n\t\t\tmargin: auto;\n\t\t\tbackground: #e7e2dd;\n\t\t\ttext-align: center;\n\t\t}\n\t\theader {\n\t\t\tposition: relative;\n\t\t\tbackground: #000;\n\t\t\tcolor:#fff;\n\t\t\tpadding: 80px 0;\n\t\t\tfont-size: 2em;\n\t\t}\n\t\th1 {\n\t\t\tfont-weight: normal;\n\t\t}\n\t\t.github {\n\t\t\tbackground: #fff;\n\t\t\tposition: absolute;\n\t\t\ttop: 10px;\n\t\t\tright: 10px;\n\t\t\twidth: 100px;\n\t\t}\n\t\tul {\n\t\t\ttext-align: left;\n\t\t\tmargin-top: 120px;\n\t\t}\n\t\tul.letters {\n\t\t\ttext-align: right;\n\t\t\twidth: 1100px;\n\t\t}\n\t\tli {\n\t\t\tdisplay: inline-block;\n\t\t\tlist-style: none;\n\t\t\twidth: 60px;\n\t\t\theight: 45px;\n\t\t\tborder-radius: 60px;\n\t\t\tbackground: #fff;\n\t\t\ttext-align: center;\n\t\t\tpadding-top: 15px;\n\t\t\tfont-size: 24px;\n\t\t\tmargin: 15px;\n\t\t}\n\t\tarticle {\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\theight: 370px;\n\t\t\tmargin-top: 400px;\n\t\t\toverflow: hidden;\n\t\t\tborder-top: 4px solid #fff;\n\t\t\tborder-bottom: 4px solid #fff;\n\t\t}\n\t\tarticle img {\n\t\t\tposition: absolute;\n\t\t\tbottom:0;\n\t\t\tleft: 0;\n\t\t}\n\t\tarticle p {\n\t\t\tposition: absolute;\n\t\t\twidth: 100%;\n\t\t\tmargin-top: 120px;\n\t\t\ttext-transform: uppercase;\n\t\t\tcolor: #fff;\n\t\t\tfont-size: 6em;\n\t\t}\n\t\tdiv.yeah {\n\t\t\tcolor: #333;\n\t\t\tfont-size: 8em;\n\t\t\tletter-spacing: 20px;\n\t\t\tmargin-top: 500px;\n\t\t}\n\t\tdiv.yeah p {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t<\/style>\n<\/head>\n\n<body>\n\t<section style=\"width:100%; margin:0; padding:0\">\n\t\t<ul>\n\t\t\t<li data-parallax='{\"x\": 650, \"from-scroll\": 50, \"distance\": 0, \"smoothness\": 10}'>1<\/li>\n\t\t\t<li data-parallax='{\"x\": 650, \"from-scroll\": 70, \"distance\": 0, \"smoothness\": 20}'>2<\/li>\n\t\t\t<li data-parallax='{\"x\": 650, \"from-scroll\": 90, \"distance\": 0}' data-parallax2='{\"y\": 500, \"from-scroll\": 400, \"distance\": 60}'>3<\/li>\n\t\t\t<li data-parallax='{\"x\": 650, \"from-scroll\": 110, \"distance\": 0, \"smoothness\": 40}'>4<\/li>\n\t\t\t<li data-parallax='{\"x\": 650, \"from-scroll\": 120, \"easing\": \"easeOutBack\", \"easing-return\": \"easeInOutBack\", \"duration\": 100}'>5<\/li>\n\t\t<\/ul>\n\t\t<ul class=\"letters\" data-parallax='{\"y\": 300, \"from-scroll\": 645, \"easing\": \"easeOutElastic\", \"duration\": 150}'>\n\t\t\t<li data-parallax='{\"x\": -650, \"from-scroll\": 80, \"distance\": 30}'>A<\/li>\n\t\t\t<li data-parallax='{\"x\": -650, \"from-scroll\": 100, \"distance\": 60}'>B<\/li>\n\t\t\t<li data-parallax='{\"x\": -650, \"from-scroll\": 120, \"distance\": 90}'>C<\/li>\n\t\t\t<li data-parallax='{\"x\": -650, \"scaleX\":0.5, \"from-scroll\": 140, \"distance\": 120}'>D<\/li>\n\t\t\t<li data-parallax='{\"x\": -650, \"scale\":0.6, \"from-scroll\": 160, \"distance\": 180}'>E<\/li>\n\t\t<\/ul>\n\t\t<article>\n\t\t\t<img decoding=\"async\" src=\"https:\/\/x-impuls.kp-w.de\/wp-content\/uploads\/2023\/10\/jess-bailey-q10VITrVYUM-unsplash-scaled.jpg\" alt=\"Paris\" data-parallax='{\"y\": 230}'\/>\n\t\t\t<p>Paris est magique<\/p>\n                         <button>Click me<\/button>\n\t\t<\/article>\n\t\t<div class=\"yeah\">\n                  <p data-parallax='{\"z\": -600}'>Y<\/p>\n                  <p data-parallax='{\"z\": -500}'>e<\/p>\n                  <p data-parallax='{\"z\": -400}'>a<\/p>\n                  <p data-parallax='{\"z\": -300}'>a<\/p>\n                  <p data-parallax='{\"z\": -200}'>a<\/p>\n                  <p data-parallax='{\"z\": -100}'>h<\/p>\n                  <p data-parallax='{\"rotateX\": 1000}'>!<\/p>\n                <\/div>\n\t<\/section>\n\t<script src=\"https:\/\/x-impuls.kp-w.de\/js\/jquery.easing.1.3.js\"><\/script>\n\t<script src=\"https:\/\/x-impuls.kp-w.de\/js\/jquery.parallax-scroll.js\"><\/script>\n<\/body>\n<\/html><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":{"footnotes":""},"class_list":["post-86","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/pages\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":30,"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/pages\/86\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/pages\/86\/revisions\/123"}],"wp:attachment":[{"href":"https:\/\/x-impuls.kp-w.de\/index.php\/wp-json\/wp\/v2\/media?parent=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}