{"id":1627,"date":"2026-08-25T05:38:28","date_gmt":"2026-08-25T05:38:28","guid":{"rendered":"https:\/\/grupocesco.mx\/hero-scroll\/"},"modified":"2026-08-26T17:55:51","modified_gmt":"2026-08-26T17:55:51","slug":"hero-scroll","status":"publish","type":"page","link":"https:\/\/grupocesco.mx\/es_mx\/hero-scroll\/","title":{"rendered":"Hero scroll (laboratorio)"},"content":{"rendered":"\n<!-- ===== HERO DE SCROLL - INICIO =====\n     Pieza autocontenida. Para cambiarla por otra animacion se\n     reemplaza todo lo que hay entre este comentario y su cierre.\n     Para desactivarla sin borrarla: ver el interruptor en el\n     snippet CSS 1479, apartado HERO DEL INICIO.\n===== -->\n<section id=\"cesco-hero-scroll\">\n<style> #cesco-hero-scroll{ --screens:1; } #cesco-hero-scroll *{box-sizing:border-box;} #cesco-hero-scroll{background:#070809;color:#EDEEEF; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }#cesco-hero-scroll .zone{ height:calc(100vh + var(--screens) * 100vh); position:relative; }#cesco-hero-scroll .sticky{ position:sticky; top:0; height:100vh; width:100%; overflow:hidden; background:#070809; }#cesco-hero-scroll .plate{ position:absolute; inset:0; }#cesco-hero-scroll .plate img{ width:100%; height:100%; object-fit:cover; display:block; }#cesco-hero-scroll #aerial{ opacity:0; z-index:2; }#cesco-hero-scroll .copy, #cesco-hero-scroll .scrim{ z-index:3; }#cesco-hero-scroll svg.trace{ z-index:1; position:absolute; inset:0; width:100%; height:100%; }#cesco-hero-scroll .trace-p{ fill:none; stroke:#F7A21F; stroke-width:2; vector-effect:non-scaling-stroke; stroke-linecap:square; stroke-linejoin:miter; stroke-dasharray:1; stroke-dashoffset:1; }#cesco-hero-scroll .trace-p.thick{ stroke-width:3; }#cesco-hero-scroll .trace-p.hair{ stroke:#B9782A; stroke-width:1.2; }#cesco-hero-scroll .scrim{ position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(105deg, rgba(7,8,9,.86) 0%, rgba(7,8,9,.62) 34%, rgba(7,8,9,0) 68%), linear-gradient(to top, rgba(7,8,9,.7) 0%, rgba(7,8,9,0) 42%); }#cesco-hero-scroll .copy{ position:absolute; left:6.2%; right:6.2%; bottom:17%; max-width:min(620px, 56%); pointer-events:none; }#cesco-hero-scroll .eyebrow{ margin:0 0 14px; color:#F7A21F; font-family:Formadjr,system-ui,sans-serif; font-weight:400; font-size:clamp(12px,1.32vw,18px); line-height:1.66; text-transform:uppercase; letter-spacing:.02em; text-shadow:0 1px 18px rgba(7,8,9,.55); }#cesco-hero-scroll .head{ margin:0; color:#fff; font-family:Formadjr,system-ui,sans-serif; font-weight:400; font-size:clamp(27px,3.3vw,46px); line-height:1.14; letter-spacing:-.01em; text-shadow:0 2px 26px rgba(7,8,9,.6); }#cesco-hero-scroll .head > span{ display:block; }#cesco-hero-scroll .w{ display:inline-block; opacity:0; transform:translateY(18px); will-change:opacity,transform; }#cesco-hero-scroll .eyebrow .w{ transform:translateY(10px); } @media (max-width:700px){#cesco-hero-scroll .copy{ max-width:88%; bottom:14%; } } @media (prefers-reduced-motion:reduce){#cesco-hero-scroll .w{ transform:none!important; } #cesco-hero-scroll .plate img{transform:none!important;} } <\/style>\n<div class=\"zone\" id=\"zone\">\n  <div class=\"sticky\">\n    <div class=\"plate\" id=\"facade\">\n      <img loading=\"lazy\" decoding=\"async\" width=\"1350\" height=\"759\" id=\"fimg\" src=\"https:\/\/grupocesco.mx\/wp-content\/uploads\/2026\/08\/cesco-fachada-capithal-park-colotlan.jpg\" alt=\"Fachada de nave industrial en Capithal Park Colotlan\">\n    <\/div>\n    <svg class=\"trace\" id=\"trace\" viewBox=\"0 0 1350 759\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\">\n      <path class=\"trace-p thick\" pathLength=\"1\" d=\"M0 214 H778 V177 H1350\"\/>\n      <path class=\"trace-p thick\" pathLength=\"1\" d=\"M0 481 H270\"\/>\n      <path class=\"trace-p thick\" pathLength=\"1\" d=\"M778 567 H1350\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M270 214 V567\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M519 214 V531\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M609 214 V567\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M778 177 V567\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M910 177 V531\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M966 177 V567\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M993 177 V567\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M1021 177 V531\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M1212 177 V567\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M1244 177 V567\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M1270 177 V531\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M1344 177 V567\"\/>\n      <path class=\"trace-p hair\" pathLength=\"1\" d=\"M778 214 H1350\"\/>\n      <path class=\"trace-p hair\" pathLength=\"1\" d=\"M0 307 H778\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M778 348 H1350\"\/>\n      <path class=\"trace-p hair\" pathLength=\"1\" d=\"M0 419 H778\"\/>\n      <path class=\"trace-p hair\" pathLength=\"1\" d=\"M778 481 H1350\"\/>\n      <path class=\"trace-p\" pathLength=\"1\" d=\"M0 531 H778\"\/>\n      <path class=\"trace-p hair\" pathLength=\"1\" d=\"M0 682 H778\"\/>\n      <path class=\"trace-p hair\" pathLength=\"1\" d=\"M0 749 H1350\"\/>\n    <\/svg>\n    <div class=\"plate\" id=\"aerial\">\n      <img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1440\" id=\"aimg\" src=\"https:\/\/grupocesco.mx\/wp-content\/uploads\/2026\/08\/home-gc-optimizada.webp\" alt=\"Vista aerea de un parque industrial de Grupo Cesco al atardecer\">\n    <\/div>\n    <div class=\"scrim\" id=\"scrim\"><\/div>\n    <div class=\"copy\">\n      <p class=\"eyebrow\" id=\"eyebrow\">Parques industriales en Jalisco<\/p>\n      <h1 class=\"head\" id=\"head\">\n        <span>Terrenos urbanizados,<\/span>\n        <span>bodegas terminadas y<\/span>\n        <span>construcci\u00f3n a la medida.<\/span>\n      <\/h1>\n    <\/div>\n  <\/div>\n<\/div>\n<script>\n(function(){\n  var zone=document.getElementById('zone'),facade=document.getElementById('facade'),fimg=document.getElementById('fimg'),\n      aerial=document.getElementById('aerial'),aimg=document.getElementById('aimg'),trace=document.getElementById('trace'),\n      scrim=document.getElementById('scrim'),eyebrow=document.getElementById('eyebrow'),\n      headLn=[].slice.call(document.querySelectorAll('#cesco-hero-scroll .head > span'));\n  if(!zone) return;\n  function splitWords(el){\n    var words=el.textContent.trim().split(\/\\s+\/),out=[];\n    el.textContent='';\n    words.forEach(function(w,i){\n      var s=document.createElement('span');\n      s.className='w'; s.textContent=w;\n      el.appendChild(s); out.push(s);\n      if(i<words.length-1) el.appendChild(document.createTextNode(' '));\n    });\n    return out;\n  }\n  var eyeW=splitWords(eyebrow), headW=[];\n  headLn.forEach(function(l){ headW=headW.concat(splitWords(l)); });\n  var lines=[].slice.call(trace.querySelectorAll('.trace-p')), N=lines.length;\n  var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;\n  function clamp(v){ return v<0?0:v>1?1:v; }\n  function seg(p,a,b){ return clamp((p-a)\/(b-a)); }\n  function ease(t){ return t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)\/2; }\n  function easeOut(t){ return 1-Math.pow(1-t,3); }\n  function bell(p,a,b){ var t=seg(p,a,b); return 4*t*(1-t); }\n  var lastP=0,last=-1;\n  function reveal(list,from,to,rise){\n    var n=list.length,win=.13;\n    var step=n>1?Math.max((to-from-win)\/(n-1),.004):0;\n    for(var i=0;i<n;i++){\n      var a=from+i*step;\n      var t=easeOut(clamp((lastP-a)\/win));\n      list[i].style.opacity=t.toFixed(3);\n      list[i].style.transform=reduce?'none':'translateY('+(rise-rise*t).toFixed(2)+'px)';\n    }\n  }\n  function render(p){\n    lastP=p;\n    var cross=ease(seg(p,.62,.92)), blend=bell(p,.62,.92);\n    var settle=easeOut(seg(p,0,.16));\n    var fs=(1.07-.07*settle)+.34*cross;\n    facade.style.opacity=(1-cross).toFixed(3);\n    fimg.style.transform=reduce?'none':'scale('+fs.toFixed(4)+')';\n    var drawn=seg(p,.10,.58);\n    for(var i=0;i<N;i++){\n      var s=(i\/N)*.55;\n      var t=clamp((drawn-s)\/.45);\n      lines[i].style.strokeDashoffset=(1-easeOut(t)).toFixed(4);\n    }\n    var mute=ease(seg(p,.22,.55))*(1-ease(seg(p,.60,.84)));\n    var lift=1-.52*mute+.42*blend;\n    fimg.style.filter='grayscale('+mute.toFixed(3)+') brightness('+lift.toFixed(3)+') contrast('+(1+.16*mute).toFixed(3)+')'+(reduce?'':' blur('+(7*blend).toFixed(2)+'px)');\n    trace.style.opacity=(1-ease(seg(p,.58,.76))).toFixed(3);\n    aerial.style.opacity=cross.toFixed(3);\n    aimg.style.transform=reduce?'none':'scale('+(1.30-.30*cross).toFixed(4)+')';\n    aimg.style.filter='brightness('+(1+.30*blend).toFixed(3)+')'+(reduce?'':' blur('+(7*blend).toFixed(2)+'px)');\n    reveal(eyeW,.36,.52,10);\n    reveal(headW,.46,.90,18);\n    scrim.style.opacity=(0.46*easeOut(seg(p,.40,.56))+0.54*ease(seg(p,.70,.92))).toFixed(3);\n  }\n  function frame(){\n    var r=zone.getBoundingClientRect();\n    var total=zone.offsetHeight-window.innerHeight;\n    var p=clamp(total>0?(-r.top)\/total:0);\n    if(Math.abs(p-last)>0.0004){ last=p; render(p); }\n    requestAnimationFrame(frame);\n  }\n  render(0);\n  requestAnimationFrame(frame);\n})();\n<\/script>\n<\/section>\n<!-- ===== HERO DE SCROLL - FIN ===== -->\n","protected":false},"excerpt":{"rendered":"<p>Parques industriales en Jalisco Terrenos urbanizados, bodegas terminadas y construcci\u00f3n a la medida.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","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":""}},"iawp_total_views":0,"footnotes":""},"class_list":["post-1627","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/grupocesco.mx\/es_mx\/wp-json\/wp\/v2\/pages\/1627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grupocesco.mx\/es_mx\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grupocesco.mx\/es_mx\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grupocesco.mx\/es_mx\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grupocesco.mx\/es_mx\/wp-json\/wp\/v2\/comments?post=1627"}],"version-history":[{"count":6,"href":"https:\/\/grupocesco.mx\/es_mx\/wp-json\/wp\/v2\/pages\/1627\/revisions"}],"predecessor-version":[{"id":1761,"href":"https:\/\/grupocesco.mx\/es_mx\/wp-json\/wp\/v2\/pages\/1627\/revisions\/1761"}],"wp:attachment":[{"href":"https:\/\/grupocesco.mx\/es_mx\/wp-json\/wp\/v2\/media?parent=1627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}