コース: Adobe XD 基本講座
今すぐ登録して、25,300件以上登録されている、業界エキスパート指導のコースを受講しましょう。
スクロール時に位置を固定させる
このレッスンでは、 スクロール時に位置を固定させる 方法について説明します。 教材として exercise ファイルの フォルダにある 10 フォルダの中の 10_04.xd を使います。 まずはデザインモードのまま、 レイヤーアイコンを押して アートボードの中にある レイヤーを表示してみると、 header というレイヤーと 「上に戻る」ボタン、go_top_btn という ボタンを、すべてのレイヤーの一番上に 配置している状態です。 まずはこのままで デスクトッププレビューで確認し スクロールすると、 このヘッダーも「上に戻る」ボタンも 一緒にスクロールされる状態です。 まずはこのヘッダーを 固定して表示してみましょう。 header というレイヤーを選択して 「スクロール時に位置を固定」の チェックをオンにします。 もう一度デスクトッププレビューで 確認すると、 スクロールしてもヘッダーは 固定表示されています。 この「スクロール時に位置を固定」の チェックボックスは、 デザインモードにも プロトタイプのモードにも存在します。 プロトタイプに切り替えて 今度は「上に戻る」ボタンを選択し 「スクロール時に位置を固定」に チェックを入れます。 確認すると、 このようにヘッダーも「上に戻る」ボタンも 固定して表示されます。 続いて、この「上に戻る」ボタンを クリックすると、アートボードの 一番上、ヘッダーの位置まで スクロールする動きを設定していきます。 「上部に戻る」ボタンをクリックし 接続ハンドルをドラッグして ヘッダーの上で放します。 「アクション」の種類は、自動的に 「スクロール先」となり 「移動先」はレイヤーの名前、 今回は header というレイヤーが 設定されました。 デスクトッププレビューで確認すると、 スクロールして 「上に戻る」ボタンを押すと、 このようにスクロールして アートボードの一番上まで アニメーションしました。 このレッスンでは、 スクロール時に位置を固定させる 方法について説明しました。
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。