🃏 3Dフリップカード
カードにマウスを乗せる(タップする)と裏返ります。コピーコードはJavaScript不要の :hover 版です。
🧊 3Dキューブ
6面の立方体が自動で回転します。マウスを乗せると一時停止します。回転速度はサイドバーの「再生速度」と連動します。
🎠 3Dメリーゴーランド
6枚のパネルが円周状に並んで回転するカルーセルです。マウスを乗せると一時停止します。回転速度はサイドバーの「再生速度」と連動します。
🎞️ フェードスライダー
複数スライドが一定間隔でクロスフェードして自動で切り替わる定番スライドショー。切替速度はサイドバーの「再生速度」と連動します。コピーコードはJavaScript不要のCSSのみです。
🔁 自動スクロールカルーセル
カードが横方向に途切れず流れ続ける無限ループカルーセル。マウスを乗せると一時停止します。スクロール速度はサイドバーの「再生速度」と連動します。
👆 ドットナビ カルーセル
下部のドットをクリックすると1枚ずつスライドが切り替わります。ラジオボタン制御の純CSS実装で、JavaScript不要・スクロール連動なしで動きます。
🏷️ ロゴマーキー
ロゴやテキストが途切れず横に流れ続けるティッカー。導入実績やパートナー表示の定番です。マウスを乗せると一時停止します。流れる速度はサイドバーの「再生速度」と連動します。
🎴 カバーフロー
中央のカードが正面を向き、左右のカードが奥へ傾く3Dカルーセル。下部のドットをクリックして切り替えます。ラジオボタン制御の純CSS実装で、JavaScript不要・スクロール連動なしで動きます。
🪄 ホバーエフェクト
マウスを乗せている間だけ効くCSSホバー効果です。要素にホバーしてプレビュー → HTML+CSSをコピー。すべて :hover と transition のみでJavaScript不要です。