ライブプレビュー · 無料プロンプト / scroll

横方向ギャラリースクロール

エディトリアルギャラリー、事例、コレクションをフィルムストリップのように見せる固定パネル。

横パネル固定スクロール画像シーケンス編集可能なチャプター

AIプロンプトを見る

THE COLLECTIONDiscover

AN ORIGINAL RUKTER SAMPLE 01

Made for the long look

Pinned horizontal panel motion for editorial galleries, case-study beats and collection reveals.

RUKTER / PREVIEW01 — 03

操作できるサンプルスライダーで進行を変えられます

進行45%

これはRukterのローカルメディアを使ったオリジナルの動作サンプルです。WebGL対応プリセットでは実際のRukterレンダラーを表示します。生成されるサイトは、入力した内容によって変わります。

使いどころ

このパターンを使う場面

複数のフレームを演出された映像のように流したいストーリーに。

サンプルの方向性

THE COLLECTION · Made for the long look

ランタイム

DOM / CSS / 2D

導入方法

1下のプロンプトをコピーしてCodexやClaudeに貼り付け、ブランドとメディアを指定します。
2Rukterで使う場合は「Rukterで使用」を開き、プリセットIDがジェネレーターに渡されたことを確認します。
3生成した下書きをテーマデザイナーで確認・編集し、準備ができたら公開します。

AIで使う

このプレビューをCodexやClaude用のプロンプトに

プロンプトにはレイアウト、動作、ランタイム、アクセシビリティ、編集可能な構成を含めています。ブランドとメディアはご自身のものに置き換えてください。

Rukterで使用

Build an original responsive website experience for [your brand or product], using the Rukter "Horizontal gallery scroll" pattern as direction.

Visual example: THE COLLECTION — "Made for the long look"; compose a media-first gallery with readable captions and deliberate visual rhythm. Replace the example content with my own brand copy and supplied media.

Behavior: Pinned horizontal panel motion for editorial galleries, case-study beats and collection reveals. Best for: A story has multiple frames that should pass like a directed film strip.

Implementation: Use lightweight CSS, DOM, or Canvas 2D for the visual behavior; do not add WebGL unless the design needs it. Keep the result editable as sections, text, media, colors, and timing. Suggested Rukter sections: cinematic, velocity, tiles. Motion settings: parallaxDepth: medium; hoverEffect: tilt; entranceRhythm: slow.

Make the preview usable on touch and keyboard, give controls visible focus, reserve media space to avoid layout shift, and respect prefers-reduced-motion.

When using Rukter Generate my site, preserve this exact selection: Library item ids: scroll-horizontal-gallery.

RukterプリセットID

scroll-horizontal-gallery

編集可能な構成

このプリセットが指定するもの

セクション: cinematic · velocity · tiles
ヒーローレンダラー: DOM / CSS sample
シネマティック効果: horizontal-panels
動き: parallaxDepth: medium · hoverEffect: tilt · entranceRhythm: slow