最新のAtomic.ioアップデートにはスクロール可能なコンテナが含まれています

by トム・グリーン

01/03

アトミックで垂直スクロールコンテンツを作成する方法

Atomic.io

最初に無料の30日間の試用にサインアップし、その期間の終わりに3つの料金プランが提示されます。

まず知っておくべきことは、あなたがやる仕事はすべてブラウザにあり、アプリはGoogle Chromeを厳密に対象としていることです。ログインすると、[ プロジェクト]ページに移動します。アプリケーションを開くには、[ 新規プロジェクト]ボタンをクリックします 。

インターフェイスが表示されたら、限られた数のツール、ページとレイヤーをページに追加する機能、アートボード、右にコンテキスト依存のプロパティパネルが表示されます。
この例では、320 x 568のiPhone 5プリセットから始めました。次に、スクロールされる画像を含むフォルダを開き、キャンバスにドラッグします。それらは自動的にプロジェクトに追加され、 [レイヤー]タブをクリックすると、それらが個別のレイヤーにあることがわかります。次に、矢印ツール（選択）を選択し、画像を選択して新しい位置にドラッグして、その間にスペースを追加しました。次に、すべての画像を選択し、ツールバーの[垂直に分散]ボタンをクリックしました。これにより画像が均等に配置されます。

次のステップは、スクロールされるすべてのコンテンツを選択し、 「コンテナ」ボタンをクリックするか、「グループ」ボタンのポップ・ダウンから「スクロール・コンテナの作成」を選択することです。コンテナが作成されたら、レイヤーパネルにコンテナが表示されます。コンテナをクリックし、下部のハンドルを上にドラッグしてキャンバスの下部に移動します 。 [プロパティ]パネルの下部にある[プレビュー]ボタンをクリックすると、ブラウザウィンドウが開きます。マウスのスクロールホイールを使用してコンテンツをスクロールします。プロジェクトに戻るには、ブラウザウィンドウの右下にある[編集]ボタンをクリックします。

03/03

アトミックで水平スクロールコンテンツを作成する方法

Atomic.io

水平スクロールは、達成するのと同じくらい簡単です。

この場合、一連の画像をキャンバス上にドラッグしてお互いに突き合わせる。画像が選択された状態で、[Top Align]ボタンをクリックして、それらがすべて一列に並んでいることを確認します。

私はShiftキーを押しながらレイヤーパネルで各レイヤーを選択しました。画像を選択した状態で、コンテナボタンをクリック し、プロパティパネルで、ビヘイビア領域で横に選択しました。

次に、[プレビュー]ボタンをクリックして、ブラウザウィンドウでプロジェクトをテストしました。

私は、スクロール可能なコンテンツをコンテナ内に置く限り、個々のバージョンのVerticalとHorizontalスクロールを作成する方法を示しましたが、これらのコンテナを画面の別々の領域に配置することができます。例えば、ウェブページは、サイドメニュー内に垂直方向にスクロールするコンテンツを有し、同じページ上でスライドショー内のコンテンツを水平方向にスクロールすることができる。実際、コンテナは、十数個のサムネイルを持つ画像ピッカーのようなアイテムに対して、垂直スクロールと水平スクロールの両方を行うことができます。

atomic.ioのこの機能の詳細については、次を参照してください。

ブログの発表
スクロールコンテナチュートリアル
コンテナを使用したマスキング
スクロールコンテナのトラブルシューティング