この記事では、Adobe Muse におけるスクロール効果の基本について説明します。この記事を読んで、スクロール効果の概念について理解を深めてください。

注意:

Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報と支援については、Adobe Muse のサービス終了ページを参照してください。

スクロール効果は Web デザインテクニックの 1 つで、Web ページのエレメントごとに速度と方向を設定できます。スクロール効果を使用することで、ブラウザー画面を異なる速さで移動する複数のページエレメントを用いた、動きのあるダイナミックな Web サイトを作成できます。Adobe Muse では、モーション、不透明度、スライドショーやアニメーションの再生などに関する各種設定を指定できます。

Adobe Muse では、固定サイトで、または固定ブレイクポイントを使用して、あらゆるエレメントにスクロール効果を適用できます。該当するエレメントには、背景画像、テキスト、画像などがあります。また、背景塗りのスクロール効果を、背景画像が塗りとして設定されているあらゆるエレメントに適用できます。背景塗り画像がブラウザーウィンドウに表示されるように設定した場合は、ブラウザー背景メニューでスクロール効果を有効にすることもできます。

ベベルや光彩(内側)など一部のグラフィック効果を使用する背景塗りエレメントには、スクロール効果を適用できません。選択したオブジェクトにこれらの種類の効果が適用されている場合、塗りパネルの「スクロール」セクション内のオプションは無効になっています。

注意:

スクロール効果を塗りに適用する場合は、エレメントのステートが「通常」に設定されていることを確認してください。

スクロール効果は画像や背景塗りでのほか、奥行きの錯覚をもたらすのでアニメーションでよく使用されます。同じページ内で異なるエレメントに速さの違う動きを設定できます。例えば、ページレイアウトに中景エレメントの 2 倍速く動く前景エレメントを含めることができます。ほかにも、アニメーションコンテンツの後ろにあるタイル背景を中景エレメントの半分の速度に設定できます。こうした設定で、肉眼による動きの見え方をまねています。見る側の視点から最も近いオブジェクトが最も速く動きます。

スクロール効果は、ページにアンカータグを追加する場合にも便利です。訪問者がリンクをクリックして縦または横に長いページ上のアンカータグにジャンプすると、スクロール効果が有効になります。スクロール効果とアンカータグを使用することで、所定の位置にフライイン、フェードイン、またはアニメーション化するセクションのあるページをデザインできます。訪問者がページのさらに下の領域にジャンプしたときに、一体となって統合ナビゲーションバーを形作る一連のメニュー項目も作成できます。

レイアウトでスクロール効果を使いはじめる前に、次に挙げる主な概念について理解を深めてください。

キーの位置

スクロール効果におけるキーの位置とは、構成するページエレメントが移動をはじめる位置です。例えば、ブラウザー背景メニューをクリックし、「スクロール」タブを選択します。中央セクションのフィールド(現行では 0 px と表示)がキーの位置に対応します。モーション設定をオンにすると、T ハンドルの場所がページに表示されます。T ハンドルでモーションの範囲を調整します。初期設定である 0 px は、T ハンドルがブラウザーウィンドウの最上端に設定されていることを意味します。

キーの位置」フィールドで指定したピクセル数は、ページがその位置までスクロールされている間に、「初期モーション」セクションで設定した変化が(設定した向きと速さで)起こることを意味します。ページの最上部は 0 から始まり、ページを下にスクロールしていくとピクセル数が増加します。変形パネル(ウィンドウ変形)では、ページの最上部からの距離が Y 値と呼ばれます。

キーの位置

初期モーション

スクロール効果の「初期モーション」では、スクロールモーションの開始位置が px 単位で示されます。「初期モーション」で、「キーの位置」値とページエレメントのエッジとの間での、エレメントのスクロール動作を定義します。

「初期モーション」セクションでは、フィールドの値の横に小文字の「x」が付いています。この「x」は倍率の意味です。訪問者がページを速くスクロールすると、スクロール効果のモーションは、同じペースになるように速度を上げます。

最終モーション

「最終モーション」は、指定値を超えてスクロールされた後でのページエレメントの動きを規定します。「最終モーション」セクションでの指定値は、ページがスクロールされて「キーの位置」(T ハンドルの位置)を過ぎた後に適用されます。

モーションのスクロール効果が適用されたエレメントは、フィールドに 0 より大きな値が入力されている方向に移動します。水平方向と垂直方向の値がどちらも 0 に設定されている場合、エレメントはページに固定され、移動しません。

水平方向のセクションが値「0」の場合、ブラウザー背景は左右どちらにも動きません。

次の図に、Adobe Muse におけるスクロール効果関連の主な概念を示します。

スクロール効果におけるキーの位置、初期モーション、最終モーション
スクロール効果におけるキーの位置、初期モーション、最終モーション

スクロール効果に関するサイトにアクセスして、スクロール効果の動作について理解を深めてください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー