{"id":1344,"date":"2025-02-25T18:29:09","date_gmt":"2025-02-25T18:29:09","guid":{"rendered":"https:\/\/mediumblue-stingray-756587.hostingersite.com\/?page_id=1344"},"modified":"2025-03-04T08:16:06","modified_gmt":"2025-03-04T08:16:06","slug":"pruebas-slider","status":"publish","type":"page","link":"https:\/\/terramarte.com.co\/en\/pruebas-slider\/","title":{"rendered":"PRUEBAS SLIDER"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1344\" class=\"elementor elementor-1344\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e7264fc e-con-full e-flex e-con e-parent\" data-id=\"e7264fc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e585705 elementor-widget elementor-widget-html\" data-id=\"e585705\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"hero-banner\">\n    <img decoding=\"async\" class=\"imagen-principal\" src=\"https:\/\/terramarte.com.co\/wp-content\/uploads\/2025\/01\/silla.webp\" alt=\"Silla blanca con bolsa terramarte\"><\/img>\n    <div class=\"empresa-b-container\">\n        <p class=\"texto-gif\">somos orgullosamente una empresa b<\/p>\n        <img decoding=\"async\" class=\"gif-banner\" src=\"https:\/\/terramarte.com.co\/wp-content\/uploads\/2025\/01\/GIF-PLANETB.gif\" alt=\"Gif Empresa B\"><\/img>\n    <\/div>\n    <img decoding=\"async\" class=\"imagen-principal-mobile\" src=\"https:\/\/terramarte.com.co\/wp-content\/uploads\/2025\/01\/1C5A8493-scaled.webp\" alt=\"Silla blanca con bolsa terramarte\"><\/img>\n  <div class=\"text-container\">\n    <h5 class=\"texto-superior\"><span class=\"word1\">CREAMOS<\/span> <span class=\"word2\">SOLUCIONES<\/span><\/h5>\n    <h5 class=\"texto-inferior\"><span class=\"word3\">CREAMOS<\/span> <span class=\"word4\">conciencia<\/span><\/h5>\n  <\/div>\n<\/div>\n<style>\n\n.texto-superior span, .texto-inferior span {\n    display: inline-block;\n    opacity: 0;\n    transition: opacity 1.8s ease \/* A\u00f1adida transici\u00f3n para filter *\/\n    filter: blur(0px); \/* Estado inicial sin blur *\/\n}\n\n.word2.blur-transition, .word3.blur-transition {\n    transition: filter 2s ease-in; \/* Transici\u00f3n m\u00e1s lenta de 2.5 segundos con aceleraci\u00f3n gradual *\/\n}\n\n.word2.blurred, .word3.blurred {\n    filter: blur(3px);\n}\n\n.imagen-principal-mobile {\n    display: none;\n}\n\n.imagen-principal {\n    width: 42vw;\n    position: absolute;\n    top: 70%;\n    left: 23%;\n    transform: translate(-50%,-50%);te\n}\n\n.empresa-b-container {\n    position: absolute;\n    width: 13vw;\n    transform: translate(-50%, -50%);\n    top: 50%;\n    left: 65%;\n    opacity: 0;\n}\n\n.texto-gif {\n    font-size: 0.8vw;\n    line-height: 1vw;\n    text-align: justify;\n    font-family: 'aktiv-grotesk', Sans-Serif;\n    text-transform: uppercase;\n    opacity: 0;\n    transform: translateY(20px);\n    transition: opacity 1.2s ease, transform 1.2s ease;\n}\n\n.gif-banner {\n    width: 100%;\n    margin-top: -0.5vw;\n}\n\n#hero-banner {\n  width: 100%;\n  height: 100vh;\n  position: relative;\n  padding: 10px\n}\n\n.text-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  right: 0;\n  left: 0;\n}\n\n.texto-superior, .texto-inferior {\n  line-height: 8.2vw;\n  font-family: \"aktiv-grotesk\", Sans-serif;\n  font-size: 8.8vw;\n  font-weight: 400;\n  text-transform: uppercase;\n  letter-spacing: -4px;\n  margin: 0;\n  opacity: 0;\n  position: relative;\n  transform: translateY(0);\n  transition: opacity 0.5s ease, transform 1s ease-in-out;\n}\n\n.texto-superior.animated {\n  transform: translateY(-27vh);\n}\n\n.texto-inferior.animated {\n  transform: translateY(31vh);\n}\n\n.texto-superior span, .texto-inferior span {\n  display: inline-block;\n  opacity: 0;\n  transition: opacity 1.8s ease;\n}\n\n\/*Las imagenes inician sin opacidad*\/\n.imagen-principal-mobile, .gif-banner {\n    opacity: 0;\n    transform: scale(0.95);\n    transition: opacity 1.5s ease, transform 1.5s ease;\n}\n\n.imagen-principal {\n    opacity: 0;\n    transform: translate(-50%, -40%) scale(0.95); \/* Posici\u00f3n inicial m\u00e1s abajo *\/\n    transition: opacity 1.5s ease, transform 1.5s ease;\n}\n\/* Luego rangos m\u00e1s amplios *\/\n@media (min-width: 768px) and (max-width: 1439px) {\n    .imagen-principal {\n        height: 80vh !important;\n        width: auto;\n        top: 62%;\n    }\n    \n    .texto-superior.animated {\n        transform: translateY(-30vh);\n    }\n    \n    .texto-inferior.animated {\n        transform: translateY(31vh);\n    }\n    \n    .empresa-b-container {\n        width: 15vw;\n        \n    }\n    \n    .texto-gif {\n        font-size: 1.1vw;\n        line-height: 1.2vw;\n    }\n}\n\n@media (min-width: 1440px) and (max-width: 1919px) {\n    .imagen-principal {\n        width: 45vw;\n        top: 59%;\n        left: 24%;\n    }\n    \n    .texto-superior.animated {\n        transform: translateY(-30vh);\n    }\n    .texto-inferior.animated {\n        transform: translateY(31vh);\n    }\n    \n    .empresa-b-container {\n        width: 17vw;\n        }\n        \n    .texto-gif {\n        font-size: 1.1vw;\n        line-height: 1.2vw;\n    }\n}\n\n\/* Caso espec\u00edfico al final para que tenga prioridad *\/\n@media (width: 1280px) {\n    .imagen-principal {\n        width: auto !important;\n        height: 80vh !important;\n        top: 61% !important;\n        left: 28%;\n    }\n    \n    .texto-superior.animated {\n        transform: translateY(-33vh) !important;\n    }\n    \n    .texto-inferior.animated {\n        transform: translateY(32vh) !important;\n    }\n    \n    .texto-gif {\n        font-size: 1vw !important;\n        line-height: 1.1vw !important;\n    }\n    \n    .empresa-b-container {\n        width: 15vw !important;\n        left: 70%;\n    }\n}\n\n\/* Media queries para mobile *\/\n@media (max-width: 767px) {\n  .text-container {\n    justify-content: space-between;\n    padding: 13% 0;\n    text-align: center;\n  }\n  \n  .texto-superior, .texto-inferior {\n    font-size: 16vw;\n    position: static;\n    line-height: 13vw;\n  }\n  \n  .texto-superior.animated, .texto-inferior.animated {\n    transform: translateY(0); \/* No se mueven en mobile *\/\n  }\n  \n  .texto-inferior {\n      margin-bottom: 4vh;\n  }\n  \n  .imagen-principal {\n    display: none;\n  }\n  \n  .imagen-principal-mobile {\n      display: flex;\n      width: 80vw;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n  }\n  \n  .empresa-b-container {\n      display: none;\n  }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const superior = document.querySelector('.texto-superior');\n  const inferior = document.querySelector('.texto-inferior');\n  const spans = [\n    document.querySelector('.word1'),\n    document.querySelector('.word2'),\n    document.querySelector('.word3'),\n    document.querySelector('.word4')\n  ];\n  \n  console.log(\"Iniciando animaci\u00f3n secuencial\");\n  \/\/ Mostrar headings primero\n  superior.style.opacity = 1;\n  inferior.style.opacity = 1;\n  \n  \/\/ Animaci\u00f3n secuencial de spans\n  const fadeDelay = 600;\n  \n  \/\/ Mostrar cada span individualmente en secuencia\n  spans.forEach((span, index) => {\n    setTimeout(() => {\n      span.style.opacity = 1;\n      console.log(`Palabra ${index+1} visible`);\n      \n      \/\/ Traslado despu\u00e9s de la \u00faltima palabra\n      if (index === spans.length - 1) {\n        setTimeout(() => {\n          \/\/ No aplicar traslado en m\u00f3viles\n          if (window.innerWidth > 767) {\n            superior.classList.add('animated');\n            inferior.classList.add('animated');\n            console.log('Posicionando textos (desktop)');\n            \n            setTimeout(() => {\n                \/\/ Primero a\u00f1adir la clase de transici\u00f3n\n                const word2 = document.querySelector('.word2');\n                const word3 = document.querySelector('.word3');\n                \n                word2.classList.add('blur-transition');\n                word3.classList.add('blur-transition');\n                \n                \/\/ Peque\u00f1o retraso para asegurar que la transici\u00f3n est\u00e9 lista\n                setTimeout(() => {\n                    \/\/ Luego a\u00f1adir blur gradualmente\n                    word2.classList.add('blurred');\n                    word3.classList.add('blurred');\n                    console.log('Aplicando blur gradual a palabras seleccionadas');\n                }, 50);\n            }, 400);\n          } else {\n            console.log('Mobile: sin traslado');\n          }\n        }, 1500);\n      }\n    }, fadeDelay * (index + 1));\n  });\n  \n  \/\/ Tiempos diferentes para mobile y desktop\n  let imageDelay;\n  let empresaBDelay;\n  \n  if (window.innerWidth > 767) {\n    \/\/ Desktop - 1.2 segundos m\u00e1s que antes\n    imageDelay = (fadeDelay * spans.length) + 2400; \n    empresaBDelay = imageDelay + 900; \/\/ 500ms despu\u00e9s de la imagen\n  } else {\n    \/\/ Mobile - mantener igual\n    imageDelay = (fadeDelay * spans.length) + 600;\n    empresaBDelay = imageDelay + 900; \/\/ No se mostrar\u00e1 en mobile pero por si acaso\n  }\n\n  \/\/ Mostrar imagen con efecto grow\n  setTimeout(() => {\n    if (window.innerWidth > 767) {\n      const imagen = document.querySelector('.imagen-principal');\n      imagen.style.opacity = 1;\n      imagen.style.transform = 'translate(-50%, -50%) scale(1)';\n    } else {\n      const imagenMobile = document.querySelector('.imagen-principal-mobile');\n      imagenMobile.style.opacity = 1;\n      imagenMobile.style.transform = 'translate(-50%, -50%) scale(1)';\n    }\n    console.log('Mostrando imagen');\n  }, imageDelay);\n  \n  \/\/ Mostrar empresa B con animaciones espec\u00edficas\n  setTimeout(() => {\n    if (window.innerWidth > 767) {\n      \/\/ Mostrar contenedor\n      const container = document.querySelector('.empresa-b-container');\n      container.style.opacity = 1;\n      \n      \/\/ Animar gif con grow\n      const gif = document.querySelector('.gif-banner');\n      gif.style.opacity = 1;\n      gif.style.transform = 'scale(1)';\n      \n      console.log('Mostrando empresa B');\n      \n      \/\/ Animar texto con slide up despu\u00e9s\n     \n    setTimeout(() => {\n      const texto = document.querySelector('.texto-gif');\n      texto.style.opacity = 1;\n      texto.style.transform = 'translateY(0)';\n    }, 400);\n    \n    console.log('Mostrando empresa B');\n  }\n      \n\n  }, empresaBDelay);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>somos orgullosamente una empresa b CREAMOS SOLUCIONES CREAMOS conciencia<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-1344","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/terramarte.com.co\/en\/wp-json\/wp\/v2\/pages\/1344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/terramarte.com.co\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/terramarte.com.co\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/terramarte.com.co\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/terramarte.com.co\/en\/wp-json\/wp\/v2\/comments?post=1344"}],"version-history":[{"count":352,"href":"https:\/\/terramarte.com.co\/en\/wp-json\/wp\/v2\/pages\/1344\/revisions"}],"predecessor-version":[{"id":1708,"href":"https:\/\/terramarte.com.co\/en\/wp-json\/wp\/v2\/pages\/1344\/revisions\/1708"}],"wp:attachment":[{"href":"https:\/\/terramarte.com.co\/en\/wp-json\/wp\/v2\/media?parent=1344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}