クリエイティブライブラリとアニメーション

利用前にレビューされる既成のセクション、ページテンプレート、アニメーションと、独自のモーションを作るためのアニメーションスタジオです。

このページは英語から翻訳されたものです。内容に相違がある場合は、英語版が優先されます。英語版を読む

クリエイティブライブラリ

カタログは 7 つのカテゴリーで構成されます。

カテゴリー	項目数
ヒーロー	30
カード	40
コンテンツセクション	45
ナビゲーションとクローム	15
モーション	35
スクロールアニメーション	25
ページテンプレート	10

すべての項目は、レビューのチェックリスト（レンダリング、レスポンシブレイアウト、アクセシビリティ、ライセンス、重複）を通過してはじめて、Approved のバッジ付きで Library に表示されます。

項目を使う

Design → Library を開いて、項目を選びます。Preview で先に確認できます。その後は次のとおりです。

Use on a page: Page を選んで Add to page をクリックします。ページエディターが開き、セクションが未保存の変更として挿入されるので、そのまま編集して保存できます。
Add to website: ウェブサイトがその項目をまだ表示できない場合は、Propose the change をクリックします。Atlas がサイト設定の変更を提案し、Task for the website developer を作成します。開発者がウェブサイトのコードにコンポーネントを追加し、サイト管理者が Site setup で変更を有効化します。Atlas がウェブサイトにコードをインストールすることはありません。
Open in Animations: モーションの項目では、そこから新しいアニメーションを始められます。

アニメーションスタジオ

ウェブサイトの要素に対するタイミング付きのアニメーション（フェード、移動、拡大縮小、回転、リビール）を作成してプレビューし、すべての変更をリビジョンとして保持します。

Design → Animations を開いて New animation をクリックします。Name と Key を付け、Start from（空のフェードイン、または承認済みのライブラリアニメーション）を選択して、Create をクリックします。
Timeline で、Duration in milliseconds を設定し、Element to animate（Title、Image、Button）を選んで Add track をクリックします。キーフレームを追加し、それぞれに Opacity、Move X、Move Y、Scale、Rotate、Reveal を設定します。
Play、Pause、Restart を使い、Preview motion を Normal と Reduced で切り替えて、動きを控えめにしたい訪問者にどう見えるかを確認します。
Save new revision をクリックします。以前のリビジョンは Revisions に残ります。

ウェブサイトで再生する

開発者が、アニメーションさせる要素に data-atlas-motion="title"（画像は media、ボタンは action）を付け、クライアントコンポーネントでアニメーションを再生します。タイムラインは Delivery API の /motion から配信されます。Studio の Add to your website カードにコードが表示されます。本番環境では、ライブリリースに含まれるリビジョンが再生されます。

制限。 1 つのアニメーションにつき 80 ミリ秒から 60 秒、最大 12 トラック、各トラック最大 24 キーフレーム。再生はウェブサイトが呼び出したときに始まります。スクロールをトリガーとする再生は組み込まれていません。

コンポーネントとレジストリウェブサイトヘルパーとパレット