JavaScript Sección ToonHub

<script>
(function () {

  /* ══════════════════════════════════════════
     ✏️  EDITA AQUÍ TUS SLIDES
     Puedes agregar o quitar los que necesites
     ══════════════════════════════════════════ */
  var SLIDES = [
    {
      src   : 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/1.02464a56.png',
      bg    : '#F4845F',
      ghost : 'FUEGO',
      title : 'EDICIÓN FUEGO',
      desc  : 'La obra de arte es impresionante, se envía completamente preparada. El acabado es espectacular, la impresión 3D es impecable. ¡Haz tu pedido ahora!',
      link  : '#',
    },
    {
      src   : 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/2.b977faab.png',
      bg    : '#6BBF7A',
      ghost : 'NATURALEZA',
      title : 'EDICIÓN NATURALEZA',
      desc  : 'Colores vibrantes directos de la selva. Figura premium con acabado mate resistente. Edición limitada. ¡No te quedes sin la tuya!',
      link  : '#',
    },
    {
      src   : 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/3.4df853b4.png',
      bg    : '#E882B4',
      ghost : 'MAGIA',
      title : 'EDICIÓN MAGIA',
      desc  : 'Un diseño que hipnotiza. Detalles pintados a mano con acabado glossy de alta calidad. La favorita de la colección.',
      link  : '#',
    },
    {
      src   : 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/4.4457fbce.png',
      bg    : '#6EB5FF',
      ghost : 'CIELO',
      title : 'EDICIÓN CIELO',
      desc  : 'Elevada por encima del resto. Materiales premium, empaque listo para regalo. Diseño exclusivo de temporada.',
      link  : '#',
    },
  ];

  /* ══ ESTADO ══ */
  var N           = SLIDES.length;
  var activeIndex = 0;
  var isAnimating = false;
  var isMobile    = window.innerWidth < 640;
  var hintTimer   = null;

  /* ══ DRAG / SWIPE ══ */
  var dragStartX     = null;
  var dragStartY     = null;
  var isDragging     = false;
  var DRAG_THRESHOLD = 50;

  /* ══ REFS DOM ══ */
  var wrap     = document.getElementById('ov-th-wrap');
  var ghost    = document.getElementById('ov-th-ghost');
  var title    = document.querySelector('.ov-th-title');
  var desc     = document.querySelector('.ov-th-desc');
  var stage    = document.getElementById('ov-th-stage');
  var discover = document.getElementById('ov-th-discover');
  var hint     = document.getElementById('ov-th-hint');

  /* ══ GRAIN ══ */
  var svgNoise = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.08'/></svg>";
  document.getElementById('ov-th-grain').style.backgroundImage =
    "url(\"data:image/svg+xml," + encodeURIComponent(svgNoise) + "\")";

  /* ══ ROLES ══ */
  function getRoleMap(idx) {
    var m = {};
    m[idx]           = 'center';
    m[(idx+N-1) % N] = 'left';
    m[(idx+1)   % N] = 'right';
    m[(idx+2)   % N] = 'back';
    /* slides extra → hidden (para cuando N > 4) */
    for (var i = 0; i < N; i++) {
      if (!m[i]) m[i] = 'hidden';
    }
    return m;
  }

  /* ══ ESTILOS POR ROL ══ */
  function getStyle(role) {
    if (role === 'center') return {
      transform : 'translateX(-50%) scale(' + (isMobile ? 1.25 : 1.68) + ')',
      filter    : 'none', opacity: '1', zIndex: '20',
      left      : '50%',
      height    : isMobile ? '60%' : '92%',
      bottom    : isMobile ? '22%' : '0',
    };
    if (role === 'left') return {
      transform : 'translateX(-50%) scale(1)',
      filter    : 'blur(2px)', opacity: '0.85', zIndex: '10',
      left      : isMobile ? '20%' : '30%',
      height    : isMobile ? '16%' : '28%',
      bottom    : isMobile ? '32%' : '12%',
    };
    if (role === 'right') return {
      transform : 'translateX(-50%) scale(1)',
      filter    : 'blur(2px)', opacity: '0.85', zIndex: '10',
      left      : isMobile ? '80%' : '70%',
      height    : isMobile ? '16%' : '28%',
      bottom    : isMobile ? '32%' : '12%',
    };
    if (role === 'back') return {
      transform : 'translateX(-50%) scale(1)',
      filter    : 'blur(4px)', opacity: '1', zIndex: '5',
      left      : '50%',
      height    : isMobile ? '13%' : '22%',
      bottom    : isMobile ? '32%' : '12%',
    };
    /* hidden — slides extra cuando N > 4 */
    return {
      transform : 'translateX(-50%) scale(0.8)',
      filter    : 'blur(6px)', opacity: '0', zIndex: '1',
      left      : '50%',
      height    : '15%',
      bottom    : '10%',
    };
  }

  /* ══ APLICAR ESTILOS ══ */
  function applyStyles() {
    wrap.style.backgroundColor = SLIDES[activeIndex].bg;
    var roleMap = getRoleMap(activeIndex);
    document.querySelectorAll('.ov-th-item').forEach(function (item, i) {
      var s = getStyle(roleMap[i]);
      item.style.transform = s.transform;
      item.style.filter    = s.filter;
      item.style.opacity   = s.opacity;
      item.style.zIndex    = s.zIndex;
      item.style.left      = s.left;
      item.style.height    = s.height;
      item.style.bottom    = s.bottom;
    });
  }

  /* ══ ACTUALIZAR TEXTOS (fade) ══ */
  function updateText() {
    var slide = SLIDES[activeIndex];
    ghost.style.opacity = '0';
    title.style.opacity = '0';
    desc.style.opacity  = '0';
    setTimeout(function () {
      ghost.textContent   = slide.ghost;
      title.textContent   = slide.title;
      desc.textContent    = slide.desc;
      discover.href       = slide.link;
      ghost.style.opacity = '1';
      title.style.opacity = '0.95';
      desc.style.opacity  = '0.85';
    }, 200);
  }

  /* ══ NAVEGAR ══ */
  function navigate(dir) {
    if (isAnimating) return;
    isAnimating = true;
    activeIndex = dir === 'next' ? (activeIndex+1) % N : (activeIndex+N-1) % N;
    applyStyles();
    updateText();
    setTimeout(function () { isAnimating = false; }, 650);
  }

  /* ══ CONSTRUIR ITEMS ══ */
  SLIDES.forEach(function (data, i) {
    var item = document.createElement('div');
    item.className = 'ov-th-item';
    var img = document.createElement('img');
    img.src       = data.src;
    img.alt       = data.title;
    img.draggable = false;
    item.appendChild(img);
    stage.appendChild(item);
  });

  /* ══ INIT ══ */
  applyStyles();
  ghost.textContent = SLIDES[0].ghost;
  title.textContent = SLIDES[0].title;
  desc.textContent  = SLIDES[0].desc;
  discover.href     = SLIDES[0].link;

  /* ══ BOTONES ══ */
  document.getElementById('ov-th-prev').addEventListener('click', function (e) {
    e.stopPropagation(); navigate('prev');
  });
  document.getElementById('ov-th-next').addEventListener('click', function (e) {
    e.stopPropagation(); navigate('next');
  });

  /* ══ TECLADO ══ */
  document.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
      e.preventDefault();
      navigate(e.key === 'ArrowRight' ? 'next' : 'prev');
      hint.classList.add('ov-th-visible');
      clearTimeout(hintTimer);
      hintTimer = setTimeout(function () { hint.classList.remove('ov-th-visible'); }, 1500);
    }
  });

  /* ══ DRAG (mouse) ══ */
  wrap.addEventListener('mousedown', function (e) {
    if (e.target.closest('.ov-th-btn') || e.target.closest('#ov-th-br')) return;
    dragStartX = e.clientX;
    dragStartY = e.clientY;
    isDragging = false;
    wrap.classList.add('ov-th-dragging');
  });

  document.addEventListener('mousemove', function (e) {
    if (dragStartX === null) return;
    if (Math.abs(e.clientX - dragStartX) > 5) isDragging = true;
  });

  document.addEventListener('mouseup', function (e) {
    if (dragStartX === null) return;
    var dx = e.clientX - dragStartX;
    if (isDragging && Math.abs(dx) >= DRAG_THRESHOLD) {
      navigate(dx < 0 ? 'next' : 'prev');
    }
    dragStartX = null;
    isDragging = false;
    wrap.classList.remove('ov-th-dragging');
  });

  /* ══ SWIPE (touch) ══ */
  wrap.addEventListener('touchstart', function (e) {
    dragStartX = e.touches[0].clientX;
    dragStartY = e.touches[0].clientY;
    isDragging = false;
  }, { passive: true });

  wrap.addEventListener('touchmove', function (e) {
    if (dragStartX === null) return;
    var dx = Math.abs(e.touches[0].clientX - dragStartX);
    var dy = Math.abs(e.touches[0].clientY - dragStartY);
    if (dx > dy) { e.preventDefault(); isDragging = true; }
  }, { passive: false });

  wrap.addEventListener('touchend', function (e) {
    if (dragStartX === null) return;
    var dx = e.changedTouches[0].clientX - dragStartX;
    if (isDragging && Math.abs(dx) >= DRAG_THRESHOLD) {
      navigate(dx < 0 ? 'next' : 'prev');
    }
    dragStartX = null;
    isDragging = false;
  });

  /* ══ PRELOAD ══ */
  SLIDES.forEach(function (d) { var img = new Image(); img.src = d.src; });

  /* ══ RESIZE ══ */
  window.addEventListener('resize', function () {
    var nm = window.innerWidth < 640;
    if (nm !== isMobile) { isMobile = nm; applyStyles(); }
  });

})();
</script>