カテゴリ

360°ビューア

360度の画像や動画のインタラクティブビューア

360°ビューアコンポーネント

ブルータリズムスタイルでデザインされた360°ビューアコンポーネントで、ハイコントラストと珍しいレイアウトが特徴で、ダークテーマとレスポンシブデザインエフェクトをサポートしています。

                <div class="bg-gray-900 text-white p-8 rounded-lg shadow-lg flex flex-col items-center">
    <h2 class="text-3xl font-bold mb-6">360° Viewer</h2>
    <p class="text-lg mb-4">Explore the 360° view of the object.</p>
    <div class="w-full h-64 border-4 border-white overflow-hidden rounded-lg flex items-center justify-center">
        <img src="https://picsum.photos/600/400?random=1" alt="360 View" class="transform duration-500 hover:scale-105"/>
    </div>
    <div class="mt-6 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-white shadow-lg"/>
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-white shadow-lg"/>
    </div>
</div>

360°ビューアコンポーネント

Tailwind CSSでデザインされたミニマリストの360°ビューアコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。

プレビューを開く

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">360° Viewer</h2>
    <div class="overflow-hidden rounded-lg w-full max-w-md">
        <img src="https://picsum.photos/600/400?random" alt="360° view" class="w-full transition-transform duration-500 transform hover:scale-105" />
    </div>
    <p class="mt-4 text-gray-600 dark:text-gray-300 text-center">Hover to see the view.</p>
    <div class="mt-6 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
    </div>
</div>

360°ビューアコンポーネント

Tailwind CSSで構築されたミニマリストの360°ビューアコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 transition-all duration-300">
    <div class="relative w-full max-w-lg h-72 overflow-hidden rounded-lg shadow-lg">
        <img src="https://picsum.photos/800/600?random=1" alt="360° View" class="object-cover w-full h-full transition-transform duration-500 hover:scale-105">
    </div>
    <div class="mt-4 text-center">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">360° Viewer Component</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Experience immersive views with our 360° viewer.</p>
    </div>
    <div class="mt-4 flex space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-700">
    </div>
</div>

360°ビューアコンポーネント

ダークモードをサポートするTailwind CSSを使用したミニマリストでレスポンシブな360°ビューアコンポーネント。

プレビューを開く

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden p-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/700/400?random=1" alt="360° View" class="rounded-lg transition-transform duration-500 ease-in-out hover:scale-105">
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-2">Experience the object in 360° view. Hover to zoom in.</p>
    <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Learn more about this view</a>
</div>

360°ビューアコンポーネント

マイクロインタラクションで設計された360°ビューアコンポーネントで、レスポンシブエフェクトとTailwind CSSを使用したダークテーマのサポートが特徴です。

プレビューを開く

                <div class="relative w-full h-96 overflow-hidden bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="absolute inset-0 flex items-center justify-center">
        <img src="https://picsum.photos/400/300" alt="360 View" class="transition-transform duration-300 transform hover:scale-110" />
    </div>
    <div class="absolute inset-0 flex items-center justify-center">
        <img src="https://picsum.photos/400/300?blur" alt="360 View" class="transition-opacity duration-300 opacity-0 hover:opacity-100" />
    </div>
    <div class="absolute inset-0 flex items-center justify-center">
        <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition duration-300">
            Rotate
        </button>
    </div>
</div>
<div class="mt-4 text-center">
    <h2 class="text-xl font-semibold dark:text-white">Explore Our 360° View</h2>
    <p class="text-gray-600 dark:text-gray-400">Hover over the image to see the effect!</p>
</div>

360°ビューアコンポーネント

レスポンシブエフェクトとダークテーマのサポートを備えたGlassmorphismデザインスタイルを使用した360°ビューアコンポーネント。

プレビューを開く

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="glass-morphism-container relative w-full max-w-2xl p-6 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 bg-opacity-70">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
        <div class="viewer-wrapper relative">
            <img src="https://picsum.photos/600/400?random=1" alt="360° View Image" class="object-cover w-full rounded-lg">
            <div class="arrow-buttons absolute w-full flex justify-between top-1/2 transform -translate-y-1/2 px-4">
                <button class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full p-2 shadow-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
                    &lt;
                </button>
                <button class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full p-2 shadow-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
                    &gt;
                </button>
            </div>
        </div>
        <div class="mt-4 text-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="mx-auto w-12 h-12 rounded-full border-2 border-white bg-white dark:border-gray-700">
            <p class="text-gray-800 dark:text-gray-200 mt-2">User Name</p>
        </div>
    </div>
</div>