360_Viewer_Component

Eine einfache, reaktionsschnelle 360°-Viewer-Komponente mit Mikrointeraktionsfokus für Geschäfts-/Unternehmenswebsites mit Unterstützung für Erdtöne und Dunkelmodus. Entwickelt, um einen interaktiven 360-Grad-Viewer zu simulieren, der es Benutzern ermöglicht, ein Bild zu "klicken und zu ziehen", um es zu drehen.

Vorschau

HTML-Code

<div class="flex items-center justify-center p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] focus-within:ring-4 focus-within:ring-stone-400 dark:focus-within:ring-stone-600 outline-none">
    <div class="relative pb-56 sm:pb-64 md:pb-72 lg:pb-80 xl:pb-96 overflow-hidden transform group cursor-grab active:cursor-grabbing animated-hover">
      <!-- Background image to simulate 360 viewer area -->
      <img src="https://picsum.photos/1200/800?random=1" alt="Product view" class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 group-active:scale-100 rounded-t-lg" aria-label="360 degree product view area">

      <!-- Interactive Overlay -->
      <div class="absolute inset-0 flex flex-col items-center justify-center bg-stone-900/10 dark:bg-stone-700/20 transition-all duration-300 group-hover:bg-stone-900/20 dark:group-hover:bg-stone-700/30 group-active:bg-stone-900/5 dark:group-active:bg-stone-700/5 rounded-t-lg">
        <svg class="w-16 h-16 sm:w-20 sm:h-20 text-white opacity-90 transition-all duration-300 transform group-hover:scale-110 group-hover:opacity-100 group-active:scale-95 group-active:opacity-80" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75S17.385 21.75 12 21.75 2.25 17.385 2.25 12zm1.605 8.682a.75.75 0 10-1.24-.967 11.25 11.25 0 01-1.61-4.463 11.25 11.25 0 01-1.612-4.463.75.75 0 10-1.24-.967c-1.325 1.76-2.553 3.614-3.66 5.549a1.75 1.75 0 000 1.902c1.107 1.935 2.335 3.789 3.66 5.549zM12 4.125a.75.75 0 00-.75.75V11.25c0 .414.336.75.75.75h4.875a.75.75 0 000-1.5H12V4.875a.75.75 0 00-.75-.75z"></path>
        </svg>
        <p class="mt-2 text-sm sm:text-base text-white font-semibold transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">Click and drag to rotate</p>
      </div>
    </div>

    <div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-stone-800">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2 transition-colors duration-300">Premium Product Showcase</h2>
      <p class="text-sm sm:text-base text-stone-600 dark:text-stone-300 mb-4 leading-relaxed transition-colors duration-300">
        Experience every intricate detail of our craftsmanship. Use the interactive viewer above to explore the product from all angles.
      </p>
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Company representative" class="w-10 h-10 rounded-full object-cover shadow-md">
          <div>
            <p class="text-stone-700 dark:text-stone-200 font-medium text-sm sm:text-base">Acme Innovations Inc.</p>
            <p class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Leading the future since 1999</p>
          </div>
        </div>
        <button class="flex items-center px-4 py-2 bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-700 text-white rounded-md font-medium text-sm sm:text-base transition-all duration-300 transform active:scale-95 shadow-lg focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          <svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
          </svg>
          View Product Video
        </button>
      </div>
    </div>
  </div>
</div>

<style>
/* Not strictly Tailwind but for the 'microinteraction' feel if JS was allowed */
/* This pseudo-class is for demonstration of where micro-interactions would be */
.animated-hover:hover {
  /* Example: add a subtle transform or shadow on hover. Tailwind handles this with utility classes. */
}

.group-active .group-hover\:opacity-100 {
    opacity: 0.8; /* Subtle change when active */
}

.group-active img {
    transform: scale(0.98); /* Simulating a 'push' effect on interaction */
}
</style>

Verwandte Komponenten

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente im Stil des Brutalismus, die ein rotierendes Bild in einem rohen und kräftigen Design zeigt, mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen

360_viewer_component

Eine komplexe, reaktionsschnelle 360°-Viewer-Komponente mit Cyberpunk- und Herbstfarbästhetik, die für Bildungsplattformen entwickelt wurde. Es bietet Unterstützung für den Dunkelmodus, interaktive Elemente und eine reichhaltige Typografie.

Offen

360°-Viewer-Komponente

Eine minimalistische 360°-Viewer-Komponente, die mit Tailwind CSS erstellt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Themen bietet.

Offen