ホームページ制作
ユニゼロワン
機能DEMOサイト
ユニゼロワン機能DEMOサイト

Single Image Scroll

DEMOに」ある機能は、ご希望に応じて様々にカスタマイズできます。

このページの機能についてのお問合せは、Tipsユニゼロワンサイトに進み、照会番号でお願いします。

照会番号:DEMO2-
48646
  • 表示されるボタンの多くはサンプルDEMOにつき機能しません。
  • ほとんどの機能は、カスタマイズが可能で、複数の機能を組み合わせることもできます。
  • 完全にオーダーメイドでの機能作成も承っております。(グループサイト STUDIO ユニゼロワンをご参照ください)
  • ほとんどの機能がフルレスポンシブ機能(スマートフォンやタブレットでの最適化表示)に対応しており、大幅に調整又は別レイアウトでの制作にも対応しています。
  • フルレスポンシブ機能を確認するには、「デバイスプレビューを見る」ボタンからお進みください。
  • 異なるプログラミング手法による同じ機能も他の機能DEMOグループサイトでご紹介しております。

1枚の画像を“スクロール操作で動かせる”アニメーション機能です。

🎨 できること(機能の詳細)

1. スクロール画像の設定

  • 画像のサイズ指定
  • コンテナ(表示枠)の高さ設定 → 画像の実サイズよりコンテナが小さい必要がある(でないとスクロールしない)

2. スクロール動作のカスタマイズ

  • Trigger(動作のきっかけ)
    • Hover(ホバーで動く)
    • Mouse Scroll(マウスホイールで動く)
  • Scroll Type(スクロール方向)
    • Vertical(縦)
    • Horizontal(横)
  • Speed(速度調整)
  • Direction(方向)

3. バッジやリンクの追加

  • 画像にバッジ(ラベル)を付けられる
  • 画像全体にリンクを設定可能

4. スタイル調整

  • コンテナのデザイン(枠線・影など)
  • 画像のフィルター・不透明度
  • バッジの色・背景・タイポグラフィ
  • マウススクロール時のインジケーターアイコンのデザイン

💡 どんな用途に向いている?

  • 商品画像のディテールを見せたい時
  • 縦長の写真(ポスター・ファッション写真など)を自然に見せたい時
  • アート作品や写真の魅力を強調したい時
  • 動きのあるビジュアルでサイトを印象的にしたい時

📱 デバイスプレビューを見る

on Hover

Design 1

Lisa
Madalina
Alicia

Design 2

Design 3

Design 4

on Scroll

Design 5

pottery
showpiece
Furniture