{"id":2587,"date":"2025-05-01T15:38:30","date_gmt":"2025-05-01T14:38:30","guid":{"rendered":"https:\/\/delab.in\/?page_id=2587"},"modified":"2026-01-03T06:08:12","modified_gmt":"2026-01-03T06:08:12","slug":"new-landing-page-rotation-with-header","status":"publish","type":"page","link":"https:\/\/delab.in\/","title":{"rendered":"Home Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2587\" class=\"elementor elementor-2587\">\n\t\t\t\t\t\t<section data-marvy_enable_drop_animation=\"false\" data-marvy_enable_fancy_rotate=\"false\" data-marvy_enable_flying_object=\"false\" data-marvy_enable_ripples_animation=\"false\" data-marvy_enable_waves_animation=\"false\" data-marvy_enable_rings_animation=\"false\" data-marvy_enable_topology_animation=\"false\" data-marvy_enable_gradient_animation=\"false\" data-marvy_enable_snow_animation=\"false\" data-marvy_enable_firework_animation=\"false\" data-marvy_enable_cloud_animation=\"false\" class=\"elementor-section elementor-top-section elementor-element elementor-element-5eee46c elementor-section-full_width elementor-section-height-full elementor-section-items-stretch elementor-section-stretched elementor-section-height-default\" data-id=\"5eee46c\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-35fa9b8\" data-id=\"35fa9b8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-89de336 elementor-widget elementor-widget-html\" data-id=\"89de336\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  html, body {\r\n    margin: 0; padding: 0;\r\n    overflow-x: hidden; background: black;\r\n  }\r\n  body { height: 200vh; }\r\n\r\n  #scroll-video-wrapper {\r\n    position: relative; height: 100vh; overflow: hidden;\r\n  }\r\n  #scroll-canvas {\r\n    position: fixed; top: 0; left: 0;\r\n    width: 100vw; height: 100vh;\r\n    z-index: 1;\r\n  }\r\n\r\n  #scroll-header,\r\n  #scroll-header *,\r\n  .header-inner {\r\n    background: none !important;\r\n    background-color: transparent !important;\r\n    background-image: none !important;\r\n    box-shadow: none !important;\r\n  }\r\n  #scroll-header {\r\n    position: fixed; top: 0; left: 0;\r\n    width: 100%; height: 100px;\r\n    z-index: 10; display: flex; align-items: flex-start;\r\n  }\r\n  .header-inner {\r\n    display: flex; align-items: center; justify-content: space-between;\r\n    width: 100%; max-width: 1200px;\r\n    padding: 30px 20px 10px; margin: 0 auto;\r\n    transition: opacity 0.6s ease-in-out;\r\n  }\r\n  .header-inner.hidden { opacity: 0; }\r\n  .header-inner:not(.hidden) { opacity: 1; }\r\n\r\n  .logo-container { flex: 0 0 auto; }\r\n  .logo { display: block; height: 20px; width: auto; }\r\n\r\n  .nav-links {\r\n    display: flex; flex: 1 1 auto; justify-content: flex-end;\r\n  }\r\n  .nav-links a {\r\n    margin-left: 40px; color: white; text-decoration: none;\r\n    font-size: 1.1rem; font-weight: bold; letter-spacing: 0.05em;\r\n    background: none !important;\r\n  }\r\n  .nav-links a:hover { text-decoration: underline; }\r\n\r\n  .scroll-text {\r\n    position: fixed; width: 100%; text-align: center;\r\n    color: white; font-family: 'Georgia', serif;\r\n    font-size: 1.5rem; opacity: 0; z-index: 5;\r\n    pointer-events: none; transition: opacity 1s ease-in-out;\r\n  }\r\n  .scroll-text.top { top: 15%; }\r\n  .scroll-text.bottom { bottom: 15%; }\r\n  .scroll-text.visible { opacity: 1; }\r\n\r\n  #orientation-overlay {\r\n    position: fixed; top: 0; left: 0;\r\n    width: 100vw; height: 100vh;\r\n    background: rgba(255,255,255,0.95);\r\n    color: black; display: none;\r\n    align-items: center; justify-content: center;\r\n    text-align: center; z-index: 9999;\r\n    font-family: 'Georgia', serif; font-size: 1.5rem; padding: 1em;\r\n  }\r\n<\/style>\r\n\r\n<div id=\"scroll-video-wrapper\">\r\n  <canvas id=\"scroll-canvas\"><\/canvas>\r\n<\/div>\r\n\r\n<div id=\"scroll-header\">\r\n  <div class=\"header-inner hidden\" id=\"header-contents\">\r\n    <div class=\"logo-container\">\r\n      <img decoding=\"async\" src=\"https:\/\/delab.in\/wp-content\/uploads\/2025\/05\/DELAB-LOGO-4.png\"\r\n           alt=\"Logo\" class=\"logo\" \/>\r\n    <\/div>\r\n    <nav class=\"nav-links\">\r\n      <a href=\"https:\/\/delab.in\/index.php\/videos\/\">Videos<\/a>\r\n      <a href=\"https:\/\/delab.in\/index.php\/contact\/\">Contact<\/a>\r\n    <\/nav>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"scroll-text top\" id=\"text1\">Designing is an artform<\/div>\r\n<div class=\"scroll-text bottom\" id=\"text2\">For the general practitioner to advance,<\/div>\r\n<div class=\"scroll-text top\" id=\"text3\">one needs not a mere office<\/div>\r\n<div class=\"scroll-text bottom\" id=\"text4\"><\/div>\r\n<div class=\"scroll-text top\" id=\"text5\">but a laboratory dedicated to the art of design<\/div>\r\n\r\n<div id=\"orientation-overlay\">\r\n  Kindly rotate your device to <strong>landscape<\/strong> mode for an optimal experience.\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  const canvas = document.getElementById(\"scroll-canvas\");\r\n  const ctx = canvas.getContext(\"2d\");\r\n  const headerContents = document.getElementById(\"header-contents\");\r\n\r\n  const texts = [\r\n    document.getElementById(\"text1\"),\r\n    document.getElementById(\"text2\"),\r\n    document.getElementById(\"text3\"),\r\n    document.getElementById(\"text4\"),\r\n    document.getElementById(\"text5\"),\r\n  ];\r\n\r\n  const threshold = window.innerHeight;\r\n  const totalFrames = 121;\r\n  const imgPathBase = \"https:\/\/delab.in\/wp-content\/uploads\/2025\/06\/frame_\";\r\n  const imgExt = \".png\";\r\n  const images = [];\r\n\r\n  function resize() {\r\n    canvas.width = window.innerWidth;\r\n    canvas.height = window.innerHeight;\r\n  }\r\n  window.addEventListener(\"resize\", resize);\r\n  resize();\r\n\r\n  for (let i = 1; i <= totalFrames; i++) {\r\n    const img = new Image();\r\n    const num = String(i - 1).padStart(6, \"0\");\r\n    img.src = imgPathBase + num + imgExt;\r\n    images.push(img);\r\n  }\r\n\r\n  let targetScrollY = 0;\r\n  let virtualScrollY = 0;\r\n\r\n  window.addEventListener(\"scroll\", () => {\r\n    targetScrollY = window.scrollY;\r\n  });\r\n\r\n  (function scrubLoop() {\r\n    const ease = 0.2;\r\n    virtualScrollY += (targetScrollY - virtualScrollY) * ease;\r\n\r\n    const frac = Math.min(virtualScrollY \/ threshold, 1);\r\n    const idx = Math.floor(frac * (totalFrames - 1));\r\n    const frame = images[idx];\r\n\r\n    if (frame && frame.complete) {\r\n      ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);\r\n    }\r\n    requestAnimationFrame(scrubLoop);\r\n  })();\r\n\r\n  let consumed = Array(texts.length).fill(false);\r\n  let headerRevealed = false;\r\n\r\n  function hideAllTexts() {\r\n    texts.forEach((el, i) => {\r\n      el.classList.remove(\"visible\");\r\n      consumed[i] = true;\r\n    });\r\n  }\r\n\r\n  window.addEventListener(\"scroll\", function() {\r\n    const scrollY = window.scrollY;\r\n    const totalStages = texts.length + 1;\r\n    const fraction = Math.min(scrollY \/ threshold, 1);\r\n    const stage = Math.floor(fraction * totalStages);\r\n\r\n    texts.forEach((el, i) => {\r\n      if (stage === i + 1 && !consumed[i]) el.classList.add(\"visible\");\r\n      if (stage > i + 1) { consumed[i] = true; el.classList.remove(\"visible\"); }\r\n    });\r\n\r\n    if (!headerRevealed && scrollY >= threshold) {\r\n      headerContents.classList.remove(\"hidden\");\r\n      headerRevealed = true;\r\n      hideAllTexts();\r\n    }\r\n\r\n    if (scrollY > threshold) window.scrollTo(0, threshold);\r\n  });\r\n\r\n  \/* 15-second failsafe *\/\r\n  setTimeout(function() {\r\n    if (!headerRevealed) {\r\n      headerContents.classList.remove(\"hidden\");\r\n      headerRevealed = true;\r\n      hideAllTexts();\r\n    }\r\n  }, 15000);\r\n\r\n  function updateOrientationOverlay() {\r\n    const overlay = document.getElementById(\"orientation-overlay\");\r\n    const isPortrait = window.matchMedia(\"(orientation: portrait)\").matches;\r\n    overlay.style.display = isPortrait ? \"flex\" : \"none\";\r\n  }\r\n  window.addEventListener(\"load\", updateOrientationOverlay);\r\n  window.addEventListener(\"resize\", updateOrientationOverlay);\r\n  window.addEventListener(\"orientationchange\", updateOrientationOverlay);\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Videos Contact Designing is an artform For the general practitioner to advance, one needs not a mere office but a laboratory dedicated to the art of design Kindly rotate your device to landscape mode for an optimal experience.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-2587","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/delab.in\/index.php\/wp-json\/wp\/v2\/pages\/2587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/delab.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/delab.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/delab.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/delab.in\/index.php\/wp-json\/wp\/v2\/comments?post=2587"}],"version-history":[{"count":161,"href":"https:\/\/delab.in\/index.php\/wp-json\/wp\/v2\/pages\/2587\/revisions"}],"predecessor-version":[{"id":3391,"href":"https:\/\/delab.in\/index.php\/wp-json\/wp\/v2\/pages\/2587\/revisions\/3391"}],"wp:attachment":[{"href":"https:\/\/delab.in\/index.php\/wp-json\/wp\/v2\/media?parent=2587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}