{"id":558,"date":"2026-08-23T09:18:03","date_gmt":"2026-08-23T09:18:03","guid":{"rendered":"https:\/\/dpromtex.com\/?page_id=558"},"modified":"2026-08-23T09:19:07","modified_gmt":"2026-08-23T09:19:07","slug":"elementor-558","status":"publish","type":"page","link":"https:\/\/dpromtex.com\/?page_id=558","title":{"rendered":"Elementor #558"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"558\" class=\"elementor elementor-558\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1aa4a41 e-con e-atomic-element e-flexbox-base e-28288c7 \" data-id=\"1aa4a41\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"1aa4a41\" data-e-type=\"e-flexbox\" data-id=\"1aa4a41\">\n    \t\t<div class=\"elementor-element elementor-element-bbb5631 elementor-widget elementor-widget-html\" data-id=\"bbb5631\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<style>\n\n.scrolly-wrap { position: relative; font-family: 'Poppins', sans-serif; }\n.scrolly-sticky {\n  position: sticky; top: 0; height: 100vh; overflow: hidden;\n  display: flex; align-items: center;\n}\n.scrolly-bg { position:absolute; inset:0; z-index:0; transition: background-color 0.05s linear; }\n\n.scrolly-row { position: relative; z-index: 1; display:flex; width:100%; height:100%; align-items:center; padding:0 48px; box-sizing:border-box; }\n\n.text-stack { position: relative; width: 42%; height: 220px; }\n.text-item {\n  position: absolute; top:0; left:0; width:100%; color:#fff;\n  will-change: transform, opacity;\n}\n.text-item .eyebrow { font-size:12px; letter-spacing:1px; text-transform:uppercase; opacity:0.6; margin-bottom:12px; }\n.text-item h2 { font-family:'Playfair Display', serif; font-size:44px; line-height:1.15; margin:0 0 16px 0; font-weight:500; }\n.text-item p { font-size:15px; line-height:1.6; opacity:0.85; margin:0 0 26px 0; max-width:380px; }\n.text-item a { display:inline-block; padding:12px 26px; border:1px solid rgba(255,255,255,0.5); border-radius:30px; color:#fff; text-decoration:none; font-size:14px; }\n\n.image-frame {\n  width: 58%; height: 82%; position: relative; border-radius: 28px;\n  background: #f3cdd4; overflow: hidden;\n}\n.image-item {\n  position: absolute; inset: 0; will-change: transform;\n}\n.image-item img {\n  width: 88%; height: 90%; object-fit: cover; border-radius: 20px;\n  position: absolute; left: 6%; bottom: 5%;\n  box-shadow: 0 30px 60px rgba(0,0,0,0.35);\n}\n\n\n\/* Fallback defaults - agar JS na chale to bhi ye default (section 1) state dikhega, black\/blank nahi *\/\n.scrolly-bg { background-color: #2c4a3e; }\n.text-item { opacity: 0; transform: translateY(60px); }\n.text-item[data-index=\"0\"] { opacity: 1; transform: translateY(0); }\n.image-item { transform: translateY(100%); }\n.image-item[data-index=\"0\"] { transform: translateY(0); }\n\n@media (max-width: 900px) {\n  .scrolly-row { flex-direction:column; padding:24px; }\n  .text-stack, .image-frame { width:100%; }\n  .text-stack { height:auto; margin-bottom:16px; }\n  .image-frame { height:50%; }\n}\n<\/style>\n\n<div class=\"scrolly-wrap\" id=\"scrollyWrap\" style=\"height:300vh;\">\n  <div class=\"scrolly-sticky\">\n    <div class=\"scrolly-bg\" id=\"scrollyBg\"><\/div>\n    <div class=\"scrolly-row\">\n\n      <div class=\"text-stack\" id=\"textStack\">\n        <div class=\"text-item\" data-index=\"0\">\n          <div class=\"eyebrow\">Interior Design \u2014 2024<\/div>\n          <h2>Pink scandinavian<br>design office<\/h2>\n          <p>We aimed at making both exterior and interiors for this project, and the first thing I did we visiting the Swedish showroom.<\/p>\n          <a href=\"#\">Explore project &#8599;<\/a>\n        <\/div>\n        <div class=\"text-item\" data-index=\"1\">\n          <div class=\"eyebrow\">Interior Design \u2014 2023<\/div>\n          <h2>Second section<br>heading yahan<\/h2>\n          <p>Doosre section ka text yahan likhein \u2014 ye pehle text ko replace karega.<\/p>\n          <a href=\"#\">Explore project &#8599;<\/a>\n        <\/div>\n        <div class=\"text-item\" data-index=\"2\">\n          <div class=\"eyebrow\">Interior Design \u2014 2022<\/div>\n          <h2>Third section<br>heading yahan<\/h2>\n          <p>Teesre section ka text yahan likhein.<\/p>\n          <a href=\"#\">Explore project &#8599;<\/a>\n        <\/div>\n      <\/div>\n\n      <div class=\"image-frame\" id=\"imageFrame\">\n        <div class=\"image-item\" data-index=\"0\" style=\"z-index:1;\">\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600585154340-be6161a56a0c?w=900\" alt=\"Image 1\">\n        <\/div>\n        <div class=\"image-item\" data-index=\"1\" style=\"z-index:2;\">\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?w=900\" alt=\"Image 2\">\n        <\/div>\n        <div class=\"image-item\" data-index=\"2\" style=\"z-index:3;\">\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618221195710-dd6b41faaea6?w=900\" alt=\"Image 3\">\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var colors = ['#2c4a3e', '#7a2e2e', '#1f2937'];\n  var wrap = document.getElementById('scrollyWrap');\n  var bg = document.getElementById('scrollyBg');\n  var textItems = document.querySelectorAll('.text-item');\n  var imageItems = document.querySelectorAll('.image-item');\n  var n = textItems.length;\n\n  function hexToRgb(hex){\n    hex = hex.replace('#','');\n    return [parseInt(hex.substring(0,2),16), parseInt(hex.substring(2,4),16), parseInt(hex.substring(4,6),16)];\n  }\n  function lerpColor(c1, c2, t){\n    var a = hexToRgb(c1), b = hexToRgb(c2);\n    var r = Math.round(a[0] + (b[0]-a[0])*t);\n    var g = Math.round(a[1] + (b[1]-a[1])*t);\n    var bl = Math.round(a[2] + (b[2]-a[2])*t);\n    return 'rgb(' + r + ',' + g + ',' + bl + ')';\n  }\n\n  function onScroll(){\n    var rect = wrap.getBoundingClientRect();\n    var scrolled = -rect.top;\n    var total = wrap.offsetHeight - window.innerHeight;\n    if (total <= 0) return;\n    var raw = Math.max(0, Math.min(1, scrolled \/ total)) * (n - 1);\n    var idx = Math.floor(raw);\n    if (idx >= n - 1) idx = n - 2;\n    var local = raw - idx;\n    if (idx < 0) { idx = 0; local = 0; }\n\n    bg.style.backgroundColor = lerpColor(colors[idx], colors[Math.min(idx+1, n-1)], local);\n\n    textItems.forEach(function(el){\n      var i = parseInt(el.getAttribute('data-index'));\n      if (i === idx) {\n        el.style.transform = 'translateY(' + (-local * 60) + 'px)';\n        el.style.opacity = 1 - local;\n        el.style.zIndex = 2;\n      } else if (i === idx + 1) {\n        el.style.transform = 'translateY(' + ((1 - local) * 60) + 'px)';\n        el.style.opacity = local;\n        el.style.zIndex = 1;\n      } else {\n        el.style.opacity = 0;\n        el.style.zIndex = 0;\n      }\n    });\n\n    imageItems.forEach(function(el){\n      var i = parseInt(el.getAttribute('data-index'));\n      if (i === idx) {\n        el.style.transform = 'translateY(0%)';\n      } else if (i === idx + 1) {\n        el.style.transform = 'translateY(' + ((1 - local) * 100) + '%)';\n      } else if (i < idx) {\n        el.style.transform = 'translateY(0%)';\n      } else {\n        el.style.transform = 'translateY(100%)';\n      }\n    });\n  }\n\n  window.addEventListener('scroll', onScroll, { passive: true });\n  window.addEventListener('resize', onScroll);\n  onScroll();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Interior Design \u2014 2024 Pink scandinaviandesign office We aimed at making both exterior and interiors for this project, and the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-558","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/pages\/558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dpromtex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=558"}],"version-history":[{"count":4,"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/pages\/558\/revisions"}],"predecessor-version":[{"id":564,"href":"https:\/\/dpromtex.com\/index.php?rest_route=\/wp\/v2\/pages\/558\/revisions\/564"}],"wp:attachment":[{"href":"https:\/\/dpromtex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}