今日のWeb上で最もホットなテクニックの1つは視差スクロールです。 マウスホイールを回すと、マウスのスクロールホイールが回転し、ページ上のコンテンツが上下に移動するサイトに移動しました。
ウェブデザインやグラフィックデザインを初めてお使いの方には、必要なCSSの量のためにこの技術を非常に難しくすることができます。
それがあなたを描写しているなら、グラフィックアーティストに訴えるかもしれない多くのアプリケーションがあります。 彼らは基本的にWebページによく似たページレイアウト手法を使用しています。つまり、コーディングが多すぎる場合は、コーディングが含まれていません。 実際に目立つようになったアプリケーションの1つがAdobe Museです。
Museを使用しているグラフィックスプロによって行われている作業は非常に驚くべきことであり、あなたは「 The Day」の Muse サイトを訪れて、あなたができることのサンプルを見ることができます。 WebプロはMuseを何らかの「風の玩具」と見なす傾向がありますが、設計者は最終的にチームの開発者に引き渡されるモバイルプロトタイプやWebプロトタイプを作成するためにも使用されています。
Museで信じられないほど簡単な手法の1つは、視差のスクロールです。完成したバージョンの運動を見たい場合は、ブラウザでこのページを参照してください。 マウスのスクロールホイールを動かすと、テキストがページの上または下に移動して画像が変化します。
始めましょう。
01/01
Webページを作成する
Museを起動すると、 新しいサイトのリンクをクリックします。 新しいサイトのプロパティが開きます 。 このプロジェクトはデスクトップアプリケーション用に設計されており、 初期レイアウトのポップダウンメニューで選択できます。 列数、溝幅、余白、および余白の値を設定することもできます。 この場合、私たちはこれに大いに関心を持っておらず、ただOKをクリックしました。
02の07
ページをフォーマットする
サイトのプロパティを設定してOKをクリックすると、 Planビューと呼ばれるものが表示されます。 上部にはホームページがあり、下部にはマスターページがあります。 私たちは1ページしか必要としませんでした。 デザインビューに入るために、私たちはインターフェイスを開いたホームページをダブルクリックしました。
左側にはいくつかの基本的なツールがあり、右側にはページ上のコンテンツを操作するためのさまざまなパネルがあります。 一番上にあるプロパティは、ページに適用できるプロパティ、またはページ上で選択されたものです。 この場合、黒い背景が欲しかった。 これを達成するために、 ブラウザの塗りつぶしカラーチップをクリックし、カラーピッカーから黒を選択しました。
03/07
ページにテキストを追加する
次のステップは、ページにテキストを追加することです。 テキストツールを選択し、テキストボックスを作成しました。 「ウェルカム」と入力し、プロパティでテキストをArial、120ピクセルの白に設定しました。 Center Aligned。
次に、選択ツールに切り替え、テキストボックスをクリックし、そのY位置を上から168ピクセルに設定しました。 テキストボックスが選択された状態で、[ 整列]パネルを開き、テキストボックスを中央に揃えました。
最後に、選択したテキストボックスを使用して、 Option / AltキーとShiftキーを押しながらテキストボックスを4つコピーしました。 各コピーのテキストとY位置を次のように変更しました。
- 〜に、871
- グラフィックス、1621
- ソフトウェア、2371
- @ About.com、3181
各テキストボックスの位置を設定すると、テキストの位置に合わせてページのサイズが変更されます。
04/07
イメージプレースホルダを追加
次のステップは、テキストブロックの間に画像を配置することです。
最初のステップは、 長方形ツールを選択し、ページの一方の側から他方の側に伸びるボックスを描画することです。 矩形を選択して高さを250ピクセルに、 Y位置を425ピクセルに設定します。 ユーザーのブラウザビューポートに対応するために、ページ幅に常に伸縮させる計画です。 これを達成するために、プロパティで100％幅のボタンをクリックしました。 これは、X値を灰色にし、画像が常にブラウザのビューポート幅の100％になるようにします。
05/07
画像プレースホルダに画像を追加する
長方形を選択して、[カラーチップではなく 、 塗りつぶし]リンクをクリックし、イメージをクリックしてイメージを長方形に追加しました。 Fitting領域では、 Scale To Fitを選択し、 位置領域の中央ハンドルをクリックして、イメージがイメージの中央から拡大縮小されるようにしました。
次に、 Option / Alt-Shift-ドラッグ手法を使用して、最初の2つのテキストブロックの間にイメージのコピーを作成し、塗りつぶしパネルを開き、イメージを別のテキストブロックにスワップしました。 残りの2つの画像についてもこれを行いました。
画像が所定の位置にあれば、その動きを加えるべき時です。
07年6月
パララックススクロールを追加する
Adobe Museで視差スクロールを追加する方法はいくつかあります。 私たちはあなたにそれを行う簡単な方法を示すつもりです。
[塗りつぶし]パネルを開いた状態で[ スクロール]タブをクリックし、開いたら[ モーション ] チェックボックスをクリックします 。
最初と最後のモーションの値が表示されます。 これらは、画像がスクロールホイールに対してどのくらい速く動くかを決定します。 たとえば、1.5の値を指定すると、画像はホイールより1.5倍速く移動します。 画像をロックするために値0を使用しました。
水平方向と垂直方向の矢印が動きの方向を決定します。 値が0の場合は、クリックした矢印に関係なく、イメージは変化しません。
中間値 - キーの位置 - 画像が移動し始める位置を示します。 このイメージの場合、イメージの上にある行がページの先頭から325ピクセルになります。 スクロールがその値に達すると、画像が移動し始めます。 この値を変更するには、ダイアログボックスで値を変更するか、行の上にあるポイントをクリックして上または下にドラッグします。
ページ上の他の画像についてもこれを繰り返します。
07/07
ブラウザテスト
この時点で、私たちは終了しました。 明白な理由から、まずファイル>サイトの保存を選択しました。 ブラウザテストのために、単にFile> Preview Pageをブラウザで選択しました 。 これにより、コンピュータのデフォルトのブラウザが開き、ページが開くとスクロールが開始されました。