RealStateBarcelona

Tour Virtual 3D — Inmobiliaria Premium

Tour Virtual 3D

Explora la fachada en perspectiva interactiva

Fachada de casa 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Tour Virtual 3D — Inmobiliaria Premium</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Tipografía elegante -->
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">

  <style>
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background-color: #f7f7f7;
      color: #333;
    }

    .tour3d-mockup {
      background-color: #fff;
      padding: 80px 20px;
      text-align: center;
    }

    .tour3d-header h2 {
      font-family: 'Playfair Display', serif;
      font-size: 2.8rem;
      margin-bottom: 12px;
      color: #222;
    }

    .tour3d-header p {
      font-size: 1.1rem;
      color: #666;
      margin-bottom: 40px;
    }

    .parallax-container {
      max-width: 1100px;
      margin: 0 auto;
      height: 580px;
      overflow: hidden;
      border-radius: 18px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
      perspective: 1000px;
      background-color: #eee;
    }

    .parallax-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.2s ease;
      transform-origin: center;
      will-change: transform;
    }

    @media (max-width: 768px) {
      .tour3d-header h2 {
        font-size: 2rem;
      }
      .parallax-container {
        height: 400px;
      }
    }
  </style>
</head>

<body>

  <section class="tour3d-mockup">
    <div class="tour3d-header">
      <h2>Tour Virtual 3D</h2>
      <p>Explora la fachada en perspectiva interactiva</p>
    </div>
    <div class="parallax-container">
      <img src="http://realstatebarcelona.com/wp-content/uploads/2025/08/dillon-kydd-2keCPb73aQY-unsplash-scaled.jpg" alt="Fachada de casa" class="parallax-image" />
    </div>
  </section>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const image = document.querySelector('.parallax-image');
      const container = document.querySelector('.parallax-container');

      if (!image || !container) return;

      container.addEventListener('mousemove', (e) => {
        const bounds = container.getBoundingClientRect();
        const x = (e.clientX - bounds.left) / bounds.width - 0.5;
        const y = (e.clientY - bounds.top) / bounds.height - 0.5;

        const rotateX = y * -10;
        const rotateY = x * 20;

        image.style.transform = `scale(1.05) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
      });

      container.addEventListener('mouseleave', () => {
        image.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`;
      });
    });
  </script>

</body>
</html>