Adobe Museを使用して視差スクロールを作成する方法

今日のWeb上で最もホットなテクニックの1つは視差スクロールです。マウスホイールを回すと、マウスのスクロールホイールが回転し、ページ上のコンテンツが上下に移動するサイトに移動しました。

ウェブデザインやグラフィックデザインを初めてお使いの方には、必要なCSSの量のためにこの技術を非常に難しくすることができます。

それがあなたを描写しているなら、グラフィックアーティストに訴えるかもしれない多くのアプリケーションがあります。彼らは基本的にWebページによく似たページレイアウト手法を使用しています。つまり、コーディングが多すぎる場合は、コーディングが含まれていません。実際に目立つようになったアプリケーションの1つがAdobe Museです。

Museを使用しているグラフィックスプロによって行われている作業は非常に驚くべきことです.Museを訪れることでできることのサンプリングを見ることができます今日のサイト。 WebプロはMuseを何らかの「風の玩具」と見なす傾向がありますが、設計者は最終的にチームの開発者に引き渡されるモバイルプロトタイプやWebプロトタイプを作成するためにも使用されています。

Museで信じられないほど簡単に達成できる技術の1つは視差スクロールです。完成したバージョンの運動を見たい場合は、マウスのスクロールホイールを動かすと、テキストがページの上または下に移動して画像が変化します。

始めましょう。

01/01

Webページを作成する

Museを起動すると、 新しいサイト リンク。これにより、 新しいサイトのプロパティ。このプロジェクトは、デスクトップアプリケーション用に設計されています。 初期レイアウト ポップダウンメニュー。列数、溝幅、余白、および余白の値を設定することもできます。この場合、私たちはこれに大いに関心を持っておらず、単純にクリックした OK.

02の07

ページをフォーマットする

サイトのプロパティを設定してクリックしたとき OK あなたはと呼ばれるものに連れて行きました。計画ビュー。ある ホーム ページ上部に マスターページ ウィンドウの下部に表示されます。私たちは1ページしか必要としませんでした。デザインビューに入るために、私たちはインターフェイスを開いたホームページをダブルクリックしました。

左側にはいくつかの基本的なツールがあり、右側にはページ上のコンテンツを操作するためのさまざまなパネルがあります。一番上にあるプロパティは、ページに適用できるプロパティ、またはページ上で選択されたものです。この場合、黒い背景が欲しかった。これを達成するには、 ブラウザの塗りつぶし カラーピッカーから黒を選択しました。

03/07

ページにテキストを追加する

次のステップは、ページにテキストを追加することです。私たちは テキストツール テキストボックスを描きました。「Welcome」という単語を入力し、プロパティでテキストを Arial、120ピクセル白。 Center Aligned。

次に、選択ツールに切り替え、テキストボックスをクリックして、 Y位置から168 上から1ピクセルです。テキストボックスを選択した状態で、 パネルの整列 テキストボックスを中央に揃えます。

最後に、テキストボックスを選択して、 オプション/ Alt そして シフト テキストボックスの4つのコピーを作成しました。各コピーのテキストとY位置を次のように変更しました。

〜に、871
グラフィックス、1621
ソフトウェア、2371

各テキストボックスの位置を設定すると、テキストの位置に合わせてページのサイズが変更されます。

04/07

イメージプレースホルダを追加

次のステップは、テキストブロックの間に画像を配置することです。

最初のステップは、 長方形ツール ページの一方の側から他方の側に伸びるボックスを描きます。矩形を選択して、 高さを250ピクセルにする とその Y位置から425ピクセル。ユーザーのブラウザビューポートに対応するために、ページ幅に常に伸縮させる計画です。これを達成するために、 100％幅 ボタンを押します。これは、X値を灰色にし、画像が常にブラウザのビューポート幅の100％になるようにします。

05/07

画像プレースホルダに画像を追加する

Rectangleを選択して、 塗りつぶしリンク - カラーチップではない - 私をクリックしたメイジインキ 矩形にイメージを追加します。の中に フィッティング エリア スケールフィット クリックして センターハンドル の中に ポジション 画像の中央から画像が拡大されるようにするための領域。

次に、 Option + Alt + Shift +ドラッグ 最初の2つのテキストブロックの間にイメージのコピーを作成し、塗りつぶしパネルを開き、イメージを別のものに置き換えました。残りの2つの画像についてもこれを行いました。

画像が所定の位置にあれば、その動きを加えるべき時です。

07年6月

パララックススクロールを追加する

Adobe Museで視差スクロールを追加する方法はいくつかあります。私たちはあなたにそれを行う簡単な方法を示すつもりです。

塗りつぶしパネルを開いた状態で、 スクロールタブ それが開いたら、 モーションチェックボックス.

の値が表示されます初期そして ファイナル・モーション。これらは、画像がスクロールホイールに対してどのくらい速く動くかを決定します。たとえば、1.5の値を指定すると、画像はホイールより1.5倍速く移動します。画像をロックするために値0を使用しました。

ザ 水平および垂直矢印 動きの方向を決定する。値が0の場合は、クリックした矢印に関係なく、イメージは変化しません。

中間価値 – キーポジション - 画像が移動し始める位置を示します。このイメージの場合、イメージの上にある行がページの先頭から325ピクセルになります。スクロールがその値に達すると、画像が移動し始めます。この値を変更するには、ダイアログボックスで値を変更するか、行の上にあるポイントをクリックして上または下にドラッグします。

ページ上の他の画像についてもこれを繰り返します。

07/07