MenuToggle Menu

Scroll / Paging

プロパティパネルでコンテナーのスクロールまたはページングプロパティが設定できます。レイヤーパネルでコンテナー内にレイヤーを入れるだけでスクロールまたはページングが可能になります。

Scroll

縦、または横の長いレイヤーをスクロールします。

[object Object]

panel scroll container

Properties

方向

レイヤーをスクロールまたはページングする方向を設定します。

オーバースクロール

オーバースクロールした時のバウンス効果をオンオフできます。

panel scroll

Paging

指でスクリーンを水平または垂直にドラッグする際に、ページングコンテナ ー内のレイヤーがページングコンテイナーの幅または高さの分だけ動きます。

[object Object]
panel paging container

Properties

ページのスクロールとスライドの使用例

ページのスクロールとスライドの一般的な使用例をご紹介します。 モバイルおよびデスクトップアプリケーションで垂直および水平スクロールビューを作成する方法、スクロールプロパティを正しく設定する方法、およびスクロール関連の相互作用をトリガーしてレスポンスを作成する方法を学習します。

サンプルのプロトタイプをダウンロードしてぜひお試しください。チュートリアルと各プロトタイプを作成する手順もご覧頂けます。

実際の使用例

ソーシャルメディアアプリのブラウズを作成

ほとんどのSNSアプリと同様に、さまざまなポートレートや写真を水平方向と垂直方向にスクロールできるページを簡単に作成できます。 スクロールビューにマージンを追加して、UIを実際のアプリケーション(スクロールの最後のスペース)に近づける方法を学びましょう。

[object Object]

プロトタイプを自分で試す

このプロトタイプの作成方法について学ぶ

メッセージリストを上下にスクロールする

メッセージングアプリまたはメールボックス内のメッセージのリストを上下にスクロールするページを作成します。 スクロールコンテナを作成し、スクロールを開始する場所をカスタマイズする方法を学習しましょう(例:下からスクロールする)

[object Object]

プロトタイプを自分で試す

このプロトタイプの作成方法について学ぶ

ループスクロール

オンラインショッピングプラットフォームまたはビデオプラットフォームと同じ画像のようなカルーセル効果を作成します。 スライドページコンテナレイヤーを使用してループアニメーションを作成する方法と、変数を使用してスクロール時に画像のタイトルを置き換える方法を学習しましょう。

[object Object]

プロトタイプを自分で試す

このプロトタイプの作成方法について学ぶ

ローリング タイム セレクター

ローリング タイム セレクターを作成し、日付や時刻などを設定できます。 スクロールセレクターを使用すると、複数のオプションをすばやく上下にスクロールできます。 オプションのリストがたくさんある場合には、スクロールセレクターが効果的です。

[object Object]

プロトタイプを自分で試す

このプロトタイプの作成方法について学ぶ

ページを左右にスワイプ

ページを中央から左右にスライドできるようにします。 このインタラクションを作成するためにはコンテナレイヤーのプロパティを設定する方法を学びましょう。

[object Object]

プロトタイプを自分で試す

このプロトタイプの作成方法について学ぶ

無限ループスクロール

ページを左右に無限にスクロールさせます。 スライドページコンテナレイヤーの使用と範囲トリガーを使用して無限スクロールを作成する方法を学びます。

[object Object]

プロトタイプを自分で試す

このプロトタイプの作成方法について学ぶ

Back To Top