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

On Scroll Fixed SVG Morphing

カテゴリ：Design機能 その他デザイン 背景
DEMOに」ある機能は、ご希望に応じて様々にカスタマイズできます。
TOPページに戻る

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

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

🔸特徴

  • 背景に固定されたSVGがスクロールに応じてモーフィング
  • グラデーション変化・色変化・画像切替など複数の背景演出に対応
  • 複数のSVGループを追加可能（連続的な変化を作れる）
  • ViewBoxサイズ・最大サイズなど細かい制御が可能
  • コーディング不要で高度なアニメーション背景を実現

🔸よく使われる場面

  • LPのヒーローセクションで“動く背景”を作りたいとき
  • スクロール連動のストーリーテリング演出
  • クリエイティブ系サイトで世界観を強調したい場合
  • 単調な背景を動的にして没入感を高めたいとき

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

Journey

Through Time

Embark on a captivating voyage through history, witnessing the pivotal moments that have shaped our world.

Ancient Civilizations

Step back to the dawn of civilization with the rise of great empires like Egypt, Mesopotamia, and the Indus Valley. Marvel at Egypt's pyramids, witness Mesopotamia's birth of writing with cuneiform tablets, and explore the advanced urban planning and trade of the Indus Valley.

Classical
Greece and Rome

Explore the classical world of Greece and Rome, where philosophy, democracy, and engineering flourished. Experience Greece’s democratic assemblies and architectural marvels like the Parthenon. In Rome, witness the grandeur of the Colosseum, a symbol of Roman might and culture.

Medieval Life and Legacy

Journey through the medieval period, characterized by knights, castles, and religious influence. Enter a feudal world with powerful lords and chivalrous knights. Discover the impact of towering cathedrals, monasteries, and the transformative Crusades that brought East and West together.