Componente de Proyección Holográfica FAQ

Un componente FAQ futurista con efectos de proyección holográfica y elementos visuales 3D para una experiencia inmersiva.

Características

• Efectos Holográficos: Proyección 3D simulada usando técnicas CSS avanzadas
• Iluminación Dinámica: Elementos brillantes y rastros de luz para una sensación futurista
• 3D Interactivo: El contenedor responde al movimiento del ratón para experiencia inmersiva
• Animación Flotante: Movimiento flotante suave para simular proyección holográfica
• Líneas de Escaneo: Líneas de escaneo animadas para apariencia holográfica auténtica
• Diseño Responsive: Se adapta a todos los tamaños de pantalla manteniendo los efectos

Estructura HTML

<div class="holographic-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">Sistema FAQ Holográfico</h2>
    <p class="faq-subtitle">Proyectando conocimiento a la realidad</p>
  </div>
  
  <div class="projection-area">
    <div class="hologram-base"></div>
    <div class="faq-projection">
      <div class="faq-item">
        <div class="faq-question">
          <div class="hologram-dot"></div>
          <h3>¿Qué es la proyección holográfica?</h3>
          <div class="question-icon">+</div>
        </div>
        <div class="faq-answer">
          <p>La proyección holográfica crea efectos visuales tipo 3D usando transparencia en capas, gradientes y efectos de luz.</p>
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <div class="hologram-dot"></div>
          <h3>¿Cómo se logran los efectos?</h3>
          <div class="question-icon">+</div>
        </div>
        <div class="faq-answer">
          <p>Los efectos usan gradientes CSS, sombras y pseudo-elementos para simular proyección de luz y profundidad.</p>
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <div class="hologram-dot"></div>
          <h3>¿Es verdaderamente 3D?</h3>
          <div class="question-icon">+</div>
        </div>
        <div class="faq-answer">
          <p>Aunque no es 3D real, los efectos visuales crean una ilusión de profundidad usando técnicas CSS avanzadas.</p>
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <div class="hologram-dot"></div>
          <h3>¿Puedo personalizar los colores?</h3>
          <div class="question-icon">+</div>
        </div>
        <div class="faq-answer">
          <p>¡Absolutamente! El componente usa propiedades CSS personalizadas para fácil personalización de colores y efectos.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Estilos CSS

.holographic-faq-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Orbitron', sans-serif;
  background: #000011;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.3);
}

.holographic-faq-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(0, 255, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 0, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 40% 80%, rgba(0, 255, 0, 0.1) 0%, transparent 30%);
  pointer-events: none;
}

.faq-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.faq-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #00ffff;
  text-shadow: 
    0 0 10px rgba(0, 255, 255, 0.7),
    0 0 20px rgba(0, 255, 255, 0.5),
    0 0 30px rgba(0, 255, 255, 0.3);
  letter-spacing: 2px;
  animation: title-glow 3s ease-in-out infinite alternate;
}

.faq-subtitle {
  color: rgba(0, 255, 255, 0.7);
  font-size: 1.1rem;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.projection-area {
  position: relative;
  perspective: 1000px;
  min-height: 400px;
}

.hologram-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent);
  border-radius: 50%;
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.5),
    0 0 40px rgba(0, 255, 255, 0.3);
  filter: blur(2px);
}

.faq-projection {
  position: relative;
  transform-style: preserve-3d;
  animation: float 6s ease-in-out infinite;
}

.faq-item {
  background: rgba(0, 20, 40, 0.3);
  border: 1px solid rgba(0, 255, 255, 0.3);
  margin-bottom: 1rem;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  transform: translateZ(20px);
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.2),
    inset 0 0 10px rgba(0, 255, 255, 0.1);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.faq-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.8), transparent);
  animation: scan 3s linear infinite;
}

.faq-item:hover {
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 
    0 0 30px rgba(0, 255, 255, 0.4),
    inset 0 0 15px rgba(0, 255, 255, 0.2);
  transform: translateZ(30px) translateY(-5px);
}

.faq-question {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  cursor: pointer;
  position: relative;
}

.hologram-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00ffff;
  box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
  margin-right: 1rem;
  position: relative;
}

.hologram-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.2);
  animation: pulse 2s ease-in-out infinite;
}

.faq-question h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  flex: 1;
}

.question-icon {
  font-size: 1.5rem;
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  transition: transform 0.3s ease;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-item.active .question-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  background: rgba(0, 30, 60, 0.4);
  border-top: 1px solid rgba(0, 255, 255, 0.2);
}

.faq-item.active .faq-answer {
  padding: 0 1.5rem 1.5rem;
  max-height: 200px;
}

.faq-answer p {
  margin: 1rem 0 0 0;
  color: rgba(0, 255, 255, 0.9);
  line-height: 1.6;
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
}

@keyframes title-glow {
  0% {
    text-shadow: 
      0 0 10px rgba(0, 255, 255, 0.7),
      0 0 20px rgba(0, 255, 255, 0.5),
      0 0 30px rgba(0, 255, 255, 0.3);
  }
  100% {
    text-shadow: 
      0 0 15px rgba(0, 255, 255, 0.8),
      0 0 25px rgba(0, 255, 255, 0.6),
      0 0 35px rgba(0, 255, 255, 0.4),
      0 0 45px rgba(0, 255, 255, 0.2);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotateX(2deg);
  }
  50% {
    transform: translateY(-10px) rotateX(-2deg);
  }
}

@keyframes scan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.3;
  }
}

@media (max-width: 768px) {
  .holographic-faq-container {
    padding: 1rem;
  }
  
  .faq-title {
    font-size: 2rem;
  }
  
  .faq-question {
    padding: 1rem;
  }
  
  .faq-question h3 {
    font-size: 1rem;
  }
}

Funcionalidad JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const faqItems = document.querySelectorAll('.faq-item');
  
  faqItems.forEach(item => {
    const question = item.querySelector('.faq-question');
    
    question.addEventListener('click', () => {
      const isActive = item.classList.contains('active');
      
      // Close all other items
      faqItems.forEach(otherItem => {
        if (otherItem !== item) {
          otherItem.classList.remove('active');
        }
      });
      
      // Toggle current item
      if (isActive) {
        item.classList.remove('active');
      } else {
        item.classList.add('active');
      }
    });
  });
  
  // Add floating animation to container
  const container = document.querySelector('.holographic-faq-container');
  container.addEventListener('mousemove', (e) => {
    const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
    const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
    container.style.transform = `perspective(1000px) rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
  });
  
  container.addEventListener('mouseenter', () => {
    container.style.transition = 'none';
  });
  
  container.addEventListener('mouseleave', () => {
    container.style.transition = 'transform 0.5s ease';
    container.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';
  });
});

Guía de Implementación

1. Copia la estructura HTML en tu proyecto
2. Agrega los estilos CSS a tu hoja de estilos
3. Incluye el código JavaScript en tu archivo de script
4. Personaliza los colores y efectos holográficos para que coincidan con tu tema
5. Agrega tus propias preguntas y respuestas del FAQ

El componente de proyección holográfica FAQ crea una interfaz futurista con efectos 3D simulados usando técnicas CSS avanzadas. El contenedor responde al movimiento del ratón para una experiencia inmersiva, y los elementos del FAQ presentan efectos de brillo y líneas de escaneo para una apariencia holográfica auténtica.