ピースバイピース、スライディングメニュー、ロールアップなど、さまざまなタイプのスクロール効果を追加および使用する方法について説明します。
このセクションでは、スクロール効果を使用してインタラクティブな機能、独特なサイトナビゲーション、および表現豊かなモーショングラフィックを Muse サイトに追加できる多数の方法のうちのいくつかについて説明します。
はじめるには、次の手順に従います。
この効果では、ビジターがページを下にスクロールしていくと、一連の個別のエレメントがフライインされ、組み立て直されてページデザインを構成します。パズルのピースが組み合わされていくように、インタラクティブなコンピレーションを作成するスクロール効果を使用してグラフィックおよびテキストフレームが制御されます。これは、Web ページで製品の詳細を引き立てる魅力的な方法です。
この例のワークフローは、スクロール効果パネルの「モーション」タブの「初期モーション」セクションを使用して、エレメントを統合デザインにまとめます。各ピースがそれぞれの所定の位置まで移動した後は、「最終モーション」設定が 0 に設定されているので、新しいエレメントがフライインしても既存のエレメントは移動しません。
同様のピースバイピース効果を作成するには、次の手順に従います。
最後に、下部には 2 つのエレメントが残っています。ページと同じ単色で塗りつぶされた単色の長方形(デザインでは見えないようにレンダリング)と、その長方形の背面にあるオブジェクトのグループ(白熱電球のグラフィックを伴う黄色の長方形)です。
単色の長方形は、その背面に配置されたグループを隠すために用意されています。
両方のエレメントを選択した状態で、選択されているすべてのアイテムに対して同じ値がフィールドに表示されていることに注意してください。この例では、長方形とグループの両方は、「初期モーション」セクションで垂直方向が 0 に設定され、「最終モーション」セクションでは 0、0 に設定されています。グループはスクロールの 1 倍の速度(同じ速度)で左に移動するように設定されているが長方形は 0 に設定されているので、「初期モーション」セクションの水平方向のフィールドには値が表示されていません。
この単純な例からわかるように、非常に長いページ、レイヤーパネルで効果を十分に配慮してレイヤー化された一連のエレメント、スクロール効果パネルの「モーション」タブを組み合わせて使用して、ページを下にスクロールするごとにピースが一体となる錯覚をアニメーションでもたらすことができます。
スライディングメニュー効果は、ピースバイピース効果で説明したものと同じ方法を数多く使用します。エレメントはスクロール効果パネルの「モーション」タブを使用してフライインしているように見え、長方形は、一部のエレメントがページデザインに登場するタイミングまでそれらのエレメントを隠しています。
この例では、効果を十分配慮して配置された長方形のグループを使用して、複雑な斜めのデザインの外観を作成します。
ブラウザーでサンプルサイトを表示して、飛行機が右から左に水平にページを横断して飛行し、その後に、スタイルを設定した一連のメニューオプションと斜線を伴ったグラデーション背景が続くことを確認します。
同様のスライディング効果を作成するには、次の手順に従います。
グループは、一連のエレメントを組み合わせて、単一のアイテムとして制御する場合に役立ちます。この例では、様々な長方形のグループにはモーションスクロール効果が適用されて、グループが単一のエンティティとして移動するようにしています。
この例では、ネガティブスペースの創造的な使用も示しています。ブラウザー背景に単色の背景色が適用されている場合、同じ色で塗りつぶされた長方形を他の長方形の前面にレイヤー化することにより、興味深い多数の切り抜き効果を作成できます。画像編集プログラムでグラフィックをデザインして単一の画像を配置する代わりに、長方形を使用して、Muse ワークスペース内からグラフィックを構築できます。
このアニメーション化した朝日と夕日の例は、モーションと不透明度の 2 つのスクロール効果を組み合わせて使用することで実現しています。この例では、グラデーション色の塗りのページ背景と、単一で配置された太陽の PNG 画像を表示します。PNG 画像には、背景ページの塗りのカラーが透過的に見える透明領域が含まれています。
ブラウザーで例のサイトを表示して、太陽がページを移動しながら 100% の透明度からフェードアップする様子を確認します。その頂点では完全に不透明になりますが、ページを下にスクロールし続けると、太陽は沈み、再び徐々に透明になり、最後にフェードアウトします。
同様のフェード効果を作成するには、次の手順に従います。
これらの設定により、太陽は、ページの左下から中央に昇り(キーの位置に到達)、ページの右下に下がる円弧を描きながら、半円状の軌跡で移動します。
この例は、スクロール効果を使用して、Adobe Edge Animate から書き出した OAM ファイルの制御方法を示します。このサンプルでは、ページは、明るい青緑色から濃い青色に変化する垂直方向のグラデーションで塗りつぶされています。
「モーション」タブと「Edge Animate」タブで適用された設定の組み合わせによって、このアニメーション効果がもたらされます。
同じ OAM ファイルの 3 つのインスタンスが、水平方向に並べて配置され、アニメーション化されたコンパスを構成しています。ブラウザーでサンプルサイトを表示すると、3 つのコンパスがすべて上に移動して姿を現し、その所定の位置から動かなくなります。3 つのコンパスはそれぞれ異なる速度で回転しているように見えますが、異なる速度で回転させているのはスクロール効果パネルの設定であり、Edge アニメーションファイルの構成ではありません。
3 つの配置された OAM ファイルを使用して、同様の効果を作成するには、次の手順に従います。
ブラウザーでサンプルを表示すると、3 つの OAM エレメントすべてが同時に上昇し、その後は固定されているかのように一列になって動かなくなることがわかります。
左右のコンパスはどちらも、タイムラインアニメーションをループして、ページが 350 ピクセル下にスクロールするごとに次のフレームに進むように設定されます。
ページスクロールの速度に対して、複数配置された Edge Animate アニメーションの速度を変えることにより、興味深いアニメーション効果をもたらすことができます。例えば、同じ OAM ファイルに異なるスクロール効果設定を適用した複数の複製を追加することにより、魚の群れ、雲が流れる空、またはその他の効果を作成できます。
スライドショーウィジェットの一連の画像がページのスクロールに基づいてどのように表示されるかを制御できます。ここでは、スライドショーウィジェットをページに追加し、続いて、スクロール効果パネルの「スライドショー」タブを使用してスライドショーオプションを変更します。
この例では、スライドショーには、バックパックの 360 度回転ビューを構成する一連の画像が読み込まれます。三脚を使用し、回転スタンド上に置いたオブジェクトの写真を撮ることで、同様のスライドショー画像を用意できます。この効果は、インタラクティブな製品の説明を表示して、購入前にあらゆる角度からアイテムを見込み客に見せる場合に役立ちます。
スライドショーウィジェットを使用して同様の効果を作成するには、次の手順に従います。
スライドショーを選択した状態で、スライドショーウィジェットを選択し、コントロールパネルの固定インターフェイスを使用して、スライドショーを所定の位置に固定できます。フルスクリーンスライドショーウィジェットを追加し、これをスクロール効果で制御することにより、試してみることもできます。
スクロール効果を使用して、外観が完全に異なるセクションに区分された非常に長いページを作成できます。ビジターがページを下にスクロールしていくと、ページはページセクション間を変遷し、アニメーション化されたテキスト効果と、シャドウ効果を使用して作成した区分線によってロールアップするように見えます。
それぞれのセクションを表示するには、アンカータグを使用するか、単にページを下にスクロールするようにビジターを促すメモを追加できます。例のサイトの下部が表示されているときに、「トップに戻る」ボタンをクリックすると、アンカーリンクでページデザインの先頭に戻る場合と同様に、ページ全体を飛び越える様子が見られます。
同様のロールアップ効果を作成するには、次の手順に従います。
この例では、複製したテキストフレームには「Use it to drastically alter the appearance of your website.」というテキストが記されています。ただし、ページの濃い青色のセクションを識別するテキストならどのようなものでも自由に入力できます。
モーションスクロール効果と Adobe Edge Web Fonts を組み合わせて使用して、特殊なタイポグラフィックデザインを作成できます。Web フォントを使用すると、ページを読み込むときに読み込まれる多彩なフォントを使用してテキストのスタイルを設定できます。画像編集プログラムで作成したテキストの画像を配置しアニメーション化するのではなく、Edge Web Fonts を使用して、見た目に優れ、変更の容易なページを作成できます。また、スクロール効果は、ページのスクロールに合わせた印象的なアニメーションを作成します。
動的なテキストを使用して同様の効果を作成するには、次の手順に従います。
オプションの追加手順として、一部のテキストフレームの複製を作成して、若干異なるスタイル設定を適用できます。この例では、Create という語を記したテキストフレームが複製され、続いて 2 つの複製が互いの上にレイヤー化され、淡青色のドロップシャドウ効果を作成します。
テキストフレームの複製を作成してドロップシャドウ効果をもたらすように選択した場合、スクロール効果を適用するときに、テキストフレームの 2 つ以上の複製をグループ化して、それらを単一のグループとして制御できます。
様々なボタンがページの表示領域にフライインし、自動的に整列してメニューバーを構成するように、スクロール効果を使用して魅力的でインタラクティブなサイトナビゲーションを作成できます。この例では、ページをスクロールしたときに、4 つのロールオーバーボタンがページの最下部から上に移動し、所定の位置でロックされ垂直メニューバーを表示します。
4 つのボタンが整列すると、(白熱電球グラフィック、色付き背景領域、テキストフレーム、および角の斜線の形の)背景コンテンツがページの両側からフライインしてサイトのセクションを構成します。
この例ではボタンはリンクされていませんが、必要に応じて、ビジターがリンクをクリックして、新しいページを読み込んだり、アンカータグを使用して現在のページの別の場所にジャンプできるように、ハイパーリンクドロップダウンメニューを使用してリンクを追加できます。
同様の重ね合わせメニュー効果を作成するには、次の手順に従います。
最初の Home ボタンの複製を作成したときに、テキストフレームのスタイル設定とコンテンツのほか、スクロール効果設定もコピーされました。複製したいずれかのボタンを選択しスクロール効果パネルを調べると、「モーション」タブの設定は Home ボタンに適用された設定と同じであり、各ボタンのキーの位置が前のボタンの 460 ピクセル下(ページでの各ボタンの間隔と同じ距離)になっていることがわかります。
基本的な重ね合わせメニューセクションは現在完成しています。ただし、追加できるもう 1 つのデザインエレメントがあります。ここでは、スライディングメニューの例で、回転した長方形を使用して斜線効果を追加した場合と同様に、大きな長方形の右下隅の上に複数の回転した長方形を追加します。
モーション背景効果を作成する場合、長いページを覆うタイル背景画像で埋められた一連の大きな長方形を作成できます。この例では、(スクロール効果パネルの「モーション」タブではなく)塗りメニューの「スクロール」タブを使用してモーション設定を適用します。
同様のモーション背景効果を作成するには、次の手順に従います。
この例では、ブラウザー背景色を設定しているかどうかは重要ではありません。ページは長方形で覆われるからです。ページの塗りのカラーを「なし」に設定します。
例のサイトでは、3 番目の長方形が前の 2 つよりも長くなっています。ハンドルをドラッグして、3 番目に複製した長方形の高さを伸ばすことも、4 番目の長方形を作成してページ下部の残りの領域を埋めることもできます。
この例では、棒グラフがアニメーション表示しながら所定の位置に配置されるように見えます。ピンク色の矢印グラフィックが上に伸びて、グラフの棒の前面および背面を縫うように進みます。グラフの棒は、グラフ領域の最下部から上に伸びていくように見えますが、実際には、より大きな(ページの背景色と同じ単色の白色で塗りつぶされた)白い長方形の背面から現れる、モーションスクロール効果が適用された単色の長方形です。
この例では、スクロール効果とともに複数のテクニックが使用されています。エレメントは、レイヤーパネルを使用して、互いの前面および背面に配置されています。白い長方形は、グラフエレメントの上に描画されます。白い長方形が棒グラフを覆っているとき、棒と矢印はマスクされているかのように見えなくなっています。白い長方形とグラフ領域は、モーションスクロール効果で 0 の設定を使用して、ページがスクロールしても所定の位置から動きません。背面にレイヤー化された棒とピンク色の矢印グラフィックは、モーションスクロール効果が適用され、それによって上に移動して姿を現し、棒グラフを構成します。
同様のマスク効果を作成するには、次の手順に従います。
Demential Lab Web サイトを参照して、スクロール効果機能の使用例をご確認ください。
アカウントにログイン