Come creare un effetto “Before & After” con due immagini (senza plugin) in WordPress

<!-- ========================================================= -->
<!-- EFFETTO IMMAGINE PRIMA/DOPO con Oscillazione e Ritorno Automatico -->
<!-- ========================================================= -->
<div class="before-after-container">
    <img src="https://tuosito.com/path/dopo.jpg" alt="Dopo dei lavori" class="before-img">
    <img src="https://tuosito.com/path/prima.jpg" alt="Prima dei lavori" class="after-img">
    <div class="slider-handle"></div>
    <span class="label before">Prima</span>
    <span class="label after">Dopo</span>
</div>

<style>
.before-after-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 40px auto;
  user-select: none;
  touch-action: none;
}

.before-after-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.after-img {
  clip-path: inset(0 50% 0 0);
  transition: none; /* Rimosso transition per lo script JS */
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: white;
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  cursor: ew-resize;
  z-index: 10;
}

.label {
  position: absolute;
  top: 10px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 14px;
  border-radius: 4px;
  z-index: 20;
  transition: opacity 0.3s ease;
}

.label.before { left: 10px; }
.label.after { right: 10px; }

/* Le etichette scompaiono durante il trascinamento e l'oscillazione */
.before-after-container.dragging .label {
  opacity: 0;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector('.before-after-container');
  if (!container) return;
  const afterImg = container.querySelector('.after-img');
  const handle = container.querySelector('.slider-handle');
  let isDragging = false;
  let isAutoMoving = true;

  // ? Parametri principali dell'oscillazione
  const centerPercent = 50;
  const amplitude = 7.5;
  const speed = 0.030;
    let theta = 0;

  function setPercent(percent) {
    const pct = Math.max(0, Math.min(100, percent));
    afterImg.style.clipPath = `inset(0 ${100 - pct}% 0 0)`;
    handle.style.left = pct + '%';
  }

  function percentFromClientX(clientX) {
    const rect = container.getBoundingClientRect();
    const x = clientX - rect.left;
    return (x / rect.width) * 100;
  }

  function stopAuto() {
    isAutoMoving = false;
    // Qui potresti aggiungere o rimuovere una classe per un effetto visivo
  }

    // Ritorna la linea al centro con animazione e riavvia l'oscillazione
    function resetAndStartAuto() {
        if (isAutoMoving) return; 

        const currentPct = parseFloat(handle.style.left) || centerPercent;
        const duration = 500; 
        const startTime = performance.now();

        function easeBack() {
            const elapsed = performance.now() - startTime;
            const progress = Math.min(1, elapsed / duration);

            // Easing cubico
            const easedProgress = 1 - Math.pow(1 - progress, 3); 

            const newPct = currentPct + (centerPercent - currentPct) * easedProgress;
            setPercent(newPct);

            if (progress < 1) {
                requestAnimationFrame(easeBack);
            } else {
                // Riavvia l'oscillazione dal centro
                isAutoMoving = true;
                theta = 0; 
                requestAnimationFrame(animateOscillation);
            }
        }
        requestAnimationFrame(easeBack);
    }
    
  // ✨ Animazione sinusoidale standard
  function animateOscillation() {
    if (!isAutoMoving) {
        return;
    }
    theta += speed;
    const eased = Math.sin(theta); 
    const pct = centerPercent + eased * amplitude;

    setPercent(pct);
    requestAnimationFrame(animateOscillation);
  }
  requestAnimationFrame(animateOscillation);


  // --- Interazioni Desktop ---
  handle.addEventListener('mousedown', (e) => {
    isDragging = true;
    container.classList.add('dragging');
    stopAuto();
    e.preventDefault();
  });
  window.addEventListener('mouseup', () => {
    isDragging = false;
    container.classList.remove('dragging');
  });
  window.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    setPercent(percentFromClientX(e.clientX));
  });

  // --- Interazioni Touch ---
  handle.addEventListener('touchstart', (e) => {
    isDragging = true;
    container.classList.add('dragging');
    stopAuto();
  }, { passive: true });
  window.addEventListener('touchend', () => {
    // 1. Controlla se l'utente stava effettivamente trascinando
    if (isDragging) {
    // 2. Resetta i flag di trascinamento
        isDragging = false;
        container.classList.remove('dragging');
    // 3. Avvia il rientro al centro e l'oscillazione
        resetAndStartAuto(); // <-- AGGIUNTO IL RIAVVIO
    }
});
  window.addEventListener('touchmove', (e) => {
    if (!isDragging) return;
    const touch = e.touches && e.touches[0];
    if (!touch) return;
    setPercent(percentFromClientX(touch.clientX));
  }, { passive: true });

  // ? Pausa all'ingresso del mouse/touch
  container.addEventListener('mouseover', stopAuto); 
  container.addEventListener('touchstart', stopAuto, { once: true });
  
  // ▶️ Ritorno al centro e Riavvio all'uscita del mouse
  container.addEventListener('mouseleave', () => {
    // Si riavvia solo se l'utente non sta trascinando attivamente
    if (!isDragging) { 
      resetAndStartAuto();
    }
  });
});
</script>