{"id":14,"date":"2021-01-02T04:08:33","date_gmt":"2021-01-02T04:08:33","guid":{"rendered":"http:\/\/tru.xeon.ec\/?page_id=14"},"modified":"2021-01-02T04:10:38","modified_gmt":"2021-01-02T04:10:38","slug":"slider","status":"publish","type":"page","link":"https:\/\/tru.xeon.ec\/index.php\/slider\/","title":{"rendered":"Slider"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\n\n\n\n \n \n \n\n TR\u00dc - Alimentos<\/title>\n\n <!-- JQuery -->\n <script src=\"js\/jquery-3.4.1.min.js\"><\/script>\n\n <!-- CSS -->\n <link rel=\"stylesheet\" href=\"css\/uikit.min.css\" \/>\n <link rel=\"stylesheet\" href=\"style\/css\/custom.css\" \/>\n\n <!-- ANIMATIONS -->\n <link rel=\"stylesheet\" href=\"css\/animate.css\">\n\n <!-- JS -->\n <script src=\"js\/uikit.min.js\"><\/script>\n <script src=\"js\/uikit-icons.min.js\"><\/script>\n\n <script src=\"https:\/\/unpkg.com\/scrollreveal@4\"><\/script>\n\n <style>\n body::-webkit-scrollbar {\n display: none;\n }\n\n \/* Hide scrollbar for IE, Edge and Firefox *\/\n body {\n -ms-overflow-style: none;\n \/* IE and Edge *\/\n scrollbar-width: none;\n \/* Firefox *\/\n }\n\n .background-scroll {\n width: 100%;\n height: auto;\n overflow: auto;\n overflow-y: hidden;\n margin: 0 auto;\n white-space: nowrap;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .front-scroll {\n width: 100%;\n height: auto;\n overflow: auto;\n overflow-y: hidden;\n margin: 0 auto;\n white-space: nowrap;\n position: absolute;\n opacity: 0.8;\n top: 0;\n left: 0;\n z-index: 1;\n }\n\n .container {\n width: 100%;\n height: 100%;\n position: relative;\n display: contents;\n }\n\n .background {\n width: 3000px;\n height: 300px;\n margin: 0px;\n display: inline-table;\n }\n\n .section {\n width: 100%;\n height: 100%;\n margin: 0px;\n display: inline;\n margin-right: -5px;\n }\n\n .content {\n display: inline-block;\n position: relative;\n }\n\n .item {\n display: block;\n position: absolute;\n }\n <\/style>\n\n\n\n\n<\/head>\n\n<body style=\"overflow: hidden; height: 800px;\">\n\n\n <div id=\"reveal\" class=\"container\">\n\n <div id=\"background-scroll\" class=\"background-scroll\">\n <div id=\"background\" class=\"background\">\n <img id=\"background-image\" src='https:\/\/i.ibb.co\/wwVYRKj\/tru-background.png'><\/img>\n <\/div>\n <\/div>\n\n <div id=\"front-scroll\" class=\"front-scroll stack-top\" onscroll=\"myFunction()\">\n\n <!-- SECTION 1-->\n <div class=\"section\">\n <div class=\"content\" style=\"background-color: transparent\">\n\n <img id=\"1_image1\" class=\"item animated fadeInDown\"\n style=\"width: auto; height: 40%; left: 2%; top: 2%; opacity: 0 !important;\"\n src=\"assets\/images\/1_image1.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"1_image2\" class=\"item animated fadeInLeft\"\n style=\"width: auto; height: 30%; left: 3%; top: 45%; opacity: 0 !important;\"\n src=\"assets\/images\/1_image2.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"1_image3\" class=\"item animated fadeInUp delay-500ms\"\n style=\"width: auto; height: 8%; left: 3%; top: 85%; opacity: 0 !important;\"\n src=\"assets\/images\/1_image3.png\" style=\"z-index:1\" alt=\"image\" \/>\n\n <img id=\"2_image1\" class=\"item animated fadeInDown\"\n style=\"width: auto; height: 40%; left: 65%; top: 2%; opacity: 0 !important;\"\n src=\"assets\/images\/2_image1.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"2_image2\" class=\"item animated fadeInUp\"\n style=\"width: auto; height: 42%; left: 65%; top: 55%; opacity: 0 !important;\"\n src=\"assets\/images\/2_image2.png\" style=\"z-index:1\" alt=\"image\" \/>\n\n <form>\n <input class=\"item animated fadeIn delay-500ms\" type=\"radio\" name=\"producto\" id=\"val1\"\n value=\"val1\"\n style=\"left: 71.8%; top: 28.1%; z-index:2; width: 20px; height: 20px; opacity: 0 !important;\">\n <input class=\"item animated fadeIn delay-500ms\" type=\"radio\" name=\"producto\" id=\"val2\"\n value=\"val2\"\n style=\"left: 83.3%; top: 28.1%; z-index:2; width: 20px; height: 20px; opacity: 0 !important;\">\n <input class=\"item animated fadeIn delay-500ms\" type=\"radio\" name=\"producto\" id=\"val3\"\n value=\"val3\"\n style=\"left: 95%; top: 28.1%; z-index:2; width: 20px; height: 20px; opacity: 0 !important;\">\n <input class=\"item animated fadeIn delay-500ms\" type=\"radio\" name=\"producto\" id=\"val4\"\n value=\"val4\"\n style=\"left: 106.2%; top: 28.1%; z-index:2; width: 20px; height: 20px; opacity: 0 !important;\">\n <\/form>\n\n <input id=\"lote\" class=\"item animated fadeIn delay-500ms\" type=\"text\" name=\"name\" required\n minlength=\"8\" maxlength=\"8\" size=\"10\"\n style=\"left: 81%; top: 65.5%; height: 5.5%; width: 20%; background: transparent; border: none; text-align: center; border: none;\n outline:none; font-size: large; border-radius: 25px; border: 2px solid #231713; opacity: 0 !important;\">\n\n <button id=\"enviar\" onclick=\"getData()\" class=\"item animated fadeIn delay-500ms\" type=\"button\"\n style=\"left: 93%; top: 73%; background: transparent; border: none; text-align: center; border: none; font-size: large; font-weight: bold; z-index: 10; opacity: 0 !important;\">Enviar<\/button>\n\n <\/div>\n <\/div>\n\n <!-- SECTION 2-->\n <div class=\"section\">\n <div class=\"content\" style=\"background-color: transparent\">\n <img id=\"3_image1\" class=\"item animated pulse\"\n style=\"width: auto; height: 17%; left: 40%; top: 10%; opacity: 0 !important;\"\n src=\"assets\/images\/3_image1.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"3_image2\" class=\"item animated fadeInUp\"\n style=\"width: auto; height: 35%; left: 33%; top: 38%; opacity: 0 !important;\"\n src=\"assets\/images\/3_image2.png\" style=\"z-index:1\" alt=\"image\" \/>\n <\/div>\n <\/div>\n\n <!-- SECTION 3-->\n <div class=\"section\">\n <div class=\"content\" style=\"background-color: transparent\">\n <img id=\"4_image1\" class=\"item animated fadeInRight\"\n style=\"width: auto; height: 25%; left: -20%; top: 10%; opacity: 0 !important;\"\n src=\"assets\/images\/4_image1.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"4_image2\" class=\"item animated fadeInDown\"\n style=\"width: auto; height: 60%; left: 40%; top: 5%; opacity: 0 !important;\"\n src=\"assets\/images\/4_image2.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"4_image3\" class=\"item animated pulse\"\n style=\"width: auto; height: 25%; left: 60%; top: 55%; opacity: 0 !important;\"\n src=\"assets\/images\/4_image3.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"4_image4\" class=\"item animated pulse\"\n style=\"width: auto; height: 25%; left: 80%; top: 70%; opacity: 0 !important;\"\n src=\"assets\/images\/4_image4.png\" style=\"z-index:1\" alt=\"image\" \/>\n <h4 id=\"data1\" class=\"item animated fadeIn delay-500ms\"\n style=\"font-weight: 700; color: black; left: 23%; top: 22%; opacity: 0 !important;\">XX\/XX\/XX\n <\/h4>\n <\/div>\n <\/div>\n\n <!-- SECTION 4-->\n <div class=\"section\">\n <div class=\"content\" style=\"background-color: transparent\">\n <img id=\"5_image1\" class=\"item animated fadeInDown\"\n style=\"width: auto; height: 35%; left: 17%; top: 10%; opacity: 0 !important;\"\n src=\"assets\/images\/5_image1.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"5_image2\" class=\"item animated fadeIn\"\n style=\"width: auto; height: 25%; left: 18%; top: 70%; opacity: 0 !important;\"\n src=\"assets\/images\/5_image2.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"5_image3\" class=\"item animated pulse\"\n style=\"width: auto; height: 25%; left: 42%; top: 70%; opacity: 0 !important;\"\n src=\"assets\/images\/5_image3.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"5_image4\" class=\"item animated pulse\"\n style=\"width: auto; height: 25%; left: 64%; top: 70%; opacity: 0 !important;\"\n src=\"assets\/images\/5_image4.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"5_image5\" class=\"item animated pulse\"\n style=\"width: auto; height: 25%; left: 86%; top: 70%; opacity: 0 !important;\"\n src=\"assets\/images\/5_image5.png\" style=\"z-index:1\" alt=\"image\" \/>\n <h4 id=\"data2\" class=\"item animated pulse\"\n style=\"font-weight: 700; color: black; left: 79%; top: 24%; opacity: 0 !important;\">XX\/XX\/XX\n <\/h4>\n <\/div>\n <\/div>\n\n <!-- SECTION 5-->\n <div class=\"section\">\n <div class=\"content\" style=\"background-color: transparent\">\n\n <\/div>\n <\/div>\n\n\n <!-- SECTION 6-->\n <div class=\"section\">\n <div class=\"content\" style=\"background-color: transparent\">\n <img id=\"6_image1\" class=\"item animated fadeInUp\"\n style=\"width: auto; height: 25%; left: -24%; top: 8%; opacity: 0 !important;\"\n src=\"assets\/images\/6_image1.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"6_image2\" class=\"item animated fadeInUp\"\n style=\"width: auto; height: 18%; left: 26%; top: 13%; opacity: 0 !important;\"\n src=\"assets\/images\/6_image2.png\" style=\"z-index:1\" alt=\"image\" \/>\n <\/div>\n <\/div>\n\n <!-- SECTION 7-->\n <div class=\"section\">\n <div class=\"content\" style=\"background-color: transparent\">\n <img id=\"7_image1\" class=\"item animated fadeInDown\"\n style=\"width: auto; height: 28%; left: 15%; top: 8%; opacity: 0 !important\"\n src=\"assets\/images\/7_image1.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"7_image2\" class=\"item animated fadeIn\"\n style=\"width: auto; height: 18%; left: 66%; top: 10%; opacity: 0 !important\"\n src=\"assets\/images\/7_image2.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"7_image3\" class=\"item animated fadeInRight\"\n style=\"width: auto; height: 18%; left: 68%; top: 10%; opacity: 0 !important\"\n src=\"assets\/images\/7_image3.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"7_image4\" class=\"item animated pulseAppear delay-1500ms\"\n style=\"width: auto; height: 14%; left: 22%; top: 40%; opacity: 0 !important\"\n src=\"assets\/images\/7_image4.png\" style=\"z-index:1\" alt=\"image\" \/>\n <h4 id=\"data3\" class=\"item\"\n style=\"font-weight: 700; color: black; left: 68%; top: 17%; opacity: 0 !important\">XX\/XX\/XX\n <\/h4>\n <\/div>\n <\/div>\n\n <!-- SECTION 8-->\n <div class=\"section\">\n <div class=\"content\" style=\"background-color: transparent\">\n <img id=\"8_image1\" class=\"item animated fadeInLeft\"\n style=\"width: auto; height: 18%; left: 35%; top: 8%; opacity: 0 !important;\"\n src=\"assets\/images\/8_image1.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"8_image2\" class=\"item animated fadeInDown\"\n style=\"width: auto; height: 6%; left: 43%; top: 10%; opacity: 0 !important;\"\n src=\"assets\/images\/8_image2.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"8_image3\" class=\"item animated fadeInUp\"\n style=\"width: auto; height: 19%; left: 43%; top: 16%; opacity: 0 !important;\"\n src=\"assets\/images\/8_image3.png\" style=\"z-index:1\" alt=\"image\" \/>\n <\/div>\n <\/div>\n\n <!-- SECTION 9-->\n <div class=\"section\">\n <div class=\"content\" style=\"background-color: transparent\">\n <img id=\"9_image1\" class=\"item animated fadeInLeft\"\n style=\"width: auto; height: 18%; left: 36%; top: 9%; opacity: 0 !important;\"\n src=\"assets\/images\/9_image1.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"9_image2\" class=\"item animated fadeInLeft delay-500ms\"\n style=\"width: auto; height: 13%; left: 44%; top: 10%; opacity: 0 !important;\"\n src=\"assets\/images\/9_image2.png\" style=\"z-index:1\" alt=\"image\" \/>\n <\/div>\n <\/div>\n\n <!-- SECTION 10-->\n <div class=\"section\">\n <div class=\"content\" style=\"background-color: transparent\">\n <img id=\"10_image1\" class=\"item animated fadeIn\"\n style=\"width: auto; height: 10%; left: 45%; top: 10%; opacity: 0 !important;\"\n src=\"assets\/images\/10_image1.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"10_image2\" class=\"item animated fadeInLeft\"\n style=\"width: auto; height: 9%; left: 47%; top: 25%; opacity: 0 !important;\"\n src=\"assets\/images\/10_image2.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"10_image3\" class=\"item animated pulse\"\n style=\"width: auto; height: 16%; left: 75%; top: 25%; opacity: 0 !important;\"\n src=\"assets\/images\/10_image3.png\" style=\"z-index:1\" alt=\"image\" \/>\n <img id=\"10_image4\" class=\"item\"\n style=\"width: auto; height: 22%; left: 55%; top: 73%; opacity: 0 !important;\"\n src=\"assets\/images\/10_image4.png\" style=\"z-index:1\" alt=\"image\" \/>\n <h4 id=\"data4\" class=\"item animated fadeInUp\"\n style=\"font-weight: 700; color: black; left: 73%; top: 38%; opacity: 0 !important;\">XX\/XX\/XX\n <\/h4>\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n\n\n\n<\/body>\n\n\n<script>\n\n function myFunction() {\n\n let backgroundScroll = document.getElementById(\"background-scroll\");\n let frontScroll = document.getElementById(\"front-scroll\");\n backgroundScroll.scrollTo(frontScroll.scrollLeft, 0)\n\n }\n\n<\/script>\n\n\n<script>\n\n\n var loadedAnimationIDs = [];\n\n window.onload = function () {\n resizeBackgroundFullScreen();\n\n var observer = new IntersectionObserver(function (entries) {\n\n for (var i = 0; i < entries.length; i += 1) {\n if (entries[i].isIntersecting === true) {\n refreshSlideElement(entries[i].target.id);\n\n if (entries[i].target.id == \"2_image1\") {\n refreshSlideElement(\"val1\");\n refreshSlideElement(\"val2\");\n refreshSlideElement(\"val3\");\n refreshSlideElement(\"val4\");\n refreshSlideElement(\"lote\");\n refreshSlideElement(\"enviar\");\n }\n\n }\n }\n\n }, { threshold: [0.75] });\n\n observer.observe(document.getElementById(\"1_image1\"));\n observer.observe(document.getElementById(\"1_image2\"));\n observer.observe(document.getElementById(\"1_image3\"));\n\n observer.observe(document.getElementById(\"2_image1\"));\n observer.observe(document.getElementById(\"2_image2\"));\n\n observer.observe(document.getElementById(\"3_image1\"));\n observer.observe(document.getElementById(\"3_image2\"));\n\n\n observer.observe(document.getElementById(\"4_image1\"));\n observer.observe(document.getElementById(\"4_image2\"));\n observer.observe(document.getElementById(\"4_image3\"));\n observer.observe(document.getElementById(\"4_image4\"));\n\n observer.observe(document.getElementById(\"5_image1\"));\n observer.observe(document.getElementById(\"5_image2\"));\n observer.observe(document.getElementById(\"5_image3\"));\n observer.observe(document.getElementById(\"5_image4\"));\n observer.observe(document.getElementById(\"5_image5\"));\n\n observer.observe(document.getElementById(\"6_image1\"));\n observer.observe(document.getElementById(\"6_image2\"));\n\n\n observer.observe(document.getElementById(\"7_image1\"));\n observer.observe(document.getElementById(\"7_image2\"));\n observer.observe(document.getElementById(\"7_image3\"));\n observer.observe(document.getElementById(\"7_image4\"));\n\n observer.observe(document.getElementById(\"8_image1\"));\n observer.observe(document.getElementById(\"8_image2\"));\n observer.observe(document.getElementById(\"8_image3\"));\n\n observer.observe(document.getElementById(\"9_image1\"));\n observer.observe(document.getElementById(\"9_image2\"));\n\n observer.observe(document.getElementById(\"10_image1\"));\n observer.observe(document.getElementById(\"10_image2\"));\n observer.observe(document.getElementById(\"10_image3\"));\n observer.observe(document.getElementById(\"10_image4\"));\n\n observer.observe(document.getElementById(\"data1\"));\n observer.observe(document.getElementById(\"data2\"));\n observer.observe(document.getElementById(\"data3\"));\n observer.observe(document.getElementById(\"data4\"));\n\n\n\n };\n\n $(window).resize(function () {\n resizeBackgroundFullScreen();\n });\n\n\n\n function resizeBackgroundFullScreen() {\n\n let width = window.innerWidth;\n let height = window.innerHeight\n\n \/\/console.log(\"WIDTH: \" + width);\n \/\/console.log(\"HEIGHT: \" + height);\n\n let realImageWidth = 14290.0;\n let realImageHeight = 1080.0;\n\n var resizedImageHeight = 0;\n var resizedImageWidth = 0;\n\n if (height > width) {\n resizedImageHeight = height \/ (height \/ width);\n } else {\n resizedImageHeight = height;\n }\n\n\n\n var ratio = 1.0 * (resizedImageHeight \/ realImageHeight);\n resizedImageWidth = realImageWidth * ratio;\n\n let reveal = document.getElementById(\"reveal\");\n reveal.style.height = resizedImageHeight + \"px\";\n\n let background = document.getElementById(\"background\");\n background.style.width = resizedImageWidth + \"px\";\n background.style.height = resizedImageHeight + \"px\";\n\n let backgroundImage = document.getElementById(\"background-image\");\n backgroundImage.style.width = resizedImageWidth + \"px\";\n backgroundImage.style.height = resizedImageHeight + \"px\";\n\n\n let contents = document.getElementsByClassName(\"content\");\n\n for (let i = 0; i < contents.length; i++) {\n let content = contents[i];\n content.style.width = resizedImageWidth \/ 10 + \"px\";\n content.style.height = resizedImageHeight + \"px\";\n }\n\n if (height > width) {\n let backgroundScroll = document.getElementById(\"background-scroll\");\n let frontScroll = document.getElementById(\"front-scroll\");\n let margin = (height - resizedImageHeight) \/ 2;\n backgroundScroll.style.marginTop = margin + \"px\";\n frontScroll.style.marginTop = margin + \"px\";\n }\n\n }\n\n\n function refreshSlideElement(id) {\n\n if (!loadedAnimationIDs.includes(id)) {\n loadedAnimationIDs.push(id);\n\n element = document.getElementById(id);\n\n element.style.opacity = \"1.0\"\n\n var elementClassList = [...element.classList];\n element.classList.remove(...element.classList);\n\n void element.offsetWidth;\n\n for (var i = 0; i < elementClassList.length; i++) {\n element.classList.add(elementClassList[i]);\n }\n }\n\n };\n\n\n\n function getData() {\n\n console.log(\"GET DATA CALLED\");\n\n\n fetch('https:\/\/ibmft.trualimentos.com\/40000474\/32519')\n .then(response => response.json())\n .then(data => console.log(data));\n\n\n \/*\n fetch('https:\/\/ibmft.trualimentos.com\/40000474\/32519', {\n mode: 'no-cors' \/\/ 'cors' by default\n })\n .then(function (response) {\n \/\/ Do something with response\n console.log(response)\n });\n *\/\n\n }\n\n\n\n<\/script>\n\n\n\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>TR\u00dc – Alimentos Enviar XX\/XX\/XX XX\/XX\/XX XX\/XX\/XX XX\/XX\/XX<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/tru.xeon.ec\/index.php\/wp-json\/wp\/v2\/pages\/14"}],"collection":[{"href":"https:\/\/tru.xeon.ec\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tru.xeon.ec\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tru.xeon.ec\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tru.xeon.ec\/index.php\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":6,"href":"https:\/\/tru.xeon.ec\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/tru.xeon.ec\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions\/26"}],"wp:attachment":[{"href":"https:\/\/tru.xeon.ec\/index.php\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}