Parallax-scrolling-in-web-design-concepts

Webデザインでの視差スクロール-概念

これで視差の起源と背景が理解できたので、Webデザインにおける視差スクロールの歴史と概念を理解しましょう。

定義

ウィキペディアによると、*視差スクロール*は、背景画像が前景画像よりもゆっくりとカメラを通過するコンピューターグラフィックスの手法であり、2Dシーンで奥行きの錯覚を作成し、仮想体験に没入感を加えます。

アニメーションの初期には視差スクロールが採用されていました。 多くのアニメーションスタジオ（ディズニーなど）は、マルチプレーンカメラを使用して視差効果を実現しました。

JavaScriptのような最先端のフレームワークとともにコンピューターグラフィックステクノロジーが進化したため、Webデザイナーと開発者は豊かなエクスペリエンスを備えたサイトを構築できます。 視差スクロールはいくつかのレイヤーで始まりましたが、コンピューターのスクロールバーで次のレベルに進みました。 テクニックは同じままでしたが、スクロールへの応用により、ユニークな体験が生まれました。

例

視差スクロールは、最新のWebサイトで広く使用されています。 視差スクロールはモバイルとデスクトップサイトの両方に一度に実装できるため、このようなサイトの人気は近年急上昇しています。

視差スクロールを採用しているウェブサイトのいくつかの例を以下に示します-

ベア・グリルズ

Bear Grylls

アニメーションが進むにつれて、Webサイトのコンテンツがどのようにインタラクティブになるかを確認できます。 前方にスクロールすると、より多くの情報が明らかになります。

お金を稼ぐ

Make Your Money Matter

信用組合の利点を読者に紹介するために、このサイトではストーリーを紹介します。 前方にスクロールすると、情報が独自の方法で表示されます。

InfoQuestインフォグラフィック

InfoQuest Infographic

従業員が職場で重要な情報を見つけるまでの道のりは、スクロールエクスペリエンスを使用して描かれています。

GitHub 404

GitHub 404

これは通常の視差エクスペリエンスとは少し異なります。画面上部のオブジェクトは、マウスポインターを上に置くと移動します。

視差スクロールのアプリケーション

今では、視差スクロールがさまざまなデジタルメディアで役立つことは、定義と背景から明らかになるはずです。 アプリケーションのいくつかは、以下の視差スクロールです-

ゲームデザイン

視差スクロールは、ゲームデザインで広く使用されています。 キャラクターは背景を基準にして移動する必要があり、プレイヤーはマウスとキーボードを使用してコントロールするため、エクスペリエンス全体を変更する必要があります。 ゲームデザインは非常に原始的ですが、視差スクロールを使用するトレンディな方法です。

ウェブサイト

ユーザーをWebサイトに引き付けるには、動的で異なるエクスペリエンスが重要です。 前述のWebサイトの例からお気づきかもしれませんが、視差スクロールは、インタラクティブな表現であるため、コンテンツに追加されます。