左右に移動するスクロール

スクロール時に要素を水平方向に移動し、フェードアウトさせる連続アニメーションのページ スクロール アニメーションを設定します。

このチュートリアルで取り上げる内容は次のとおりです。

  1. スクロールアニメーションの確立
  2. 水平方向の動きを含む
  3. 透明効果の実装
  4. 2番目のステップで強化する

スクロールアニメーションの確立

  1. インタラクションパネル内で、現在のページメニューからページのスクロール中を選択します。
  2. スクロール時のセクションで、スクロールアニメーションを再生を選択します。
  3. スクロールアニメーションの横にある追加記号を押します
  4. タイトルを割り当てます(例:ヒーロースクロールアニメーション)

水平方向の動きを含む

  1. 要素が選択されていることを確認する
  2. インタラクションパネルを開いたまま、タイムライン上の追加シンボルをタップします
  3. 移動を選択
  4. 移動の場合は、x軸を0ピクセルに調整します

透明効果の実装

  1. 追加記号を使用して別のアクションを導入する
  2. 不透明度を選択
  3. 不透明度が100%に設定されていることを確認します

対象となる各要素に移動と透明化のアクションを適用します。

2番目のステップで強化する

  1. 要素の選択を確認します
  2. インタラクションパネルで、X軸を変更して要素を左にシフトします(例:-900ピクセル)。
  3. この要素のタイムラインの下端にある追加シンボルをクリックすると、別の不透明度アクションが追加されます。
  4. 不透明度を0%に調整します

各要素に対してこのプロセスを繰り返し、それに応じて x 軸の値を調整します (例: 左ではなく右にシフトするには 900 ピクセル) 

ライブプレビューを有効にすると、効果をリアルタイムで確認できます。

ユアン・マック