Zero Block: アニメーション

基本的なアニメーション オプションは次のとおりです。

• アニメーション - アニメーション効果を開始するタイミングのさまざまなオプション。
• 視差—視差効果の設定。
• [修正] - 固定の配置効果設定。

アニメーション効果には、フェードイン、右にフェードイン、左にフェードイン、上にフェードイン、下にフェード イン、ズームインがあります。

すべてのアニメーションエフェクトには、継続時間、遅延、トリガーオフセットなどの一般的な設定がいくつかあります。

Duration は、アニメーション効果の継続時間 (秒単位) です。数値は、アニメーション効果が実行される秒数です。
遅延は、アニメーション効果の開始までの秒単位の遅延です。
トリガー オフセットは、アニメーションの再生が開始されるウィンドウ コンテナーの下端からのオフセット (ピクセル単位) です。

上、下、右、または左から表示される要素でアニメーション効果を使用する場合、「距離」オプションは、ブロックが最初に表示される場所からブロックがカバーする距離を意味します。

ズームイン効果にはスケール設定があります。100% 未満に設定すると、要素は元のサイズにズームします。100% を超える値に設定すると、要素が縮小され、小さく表示されます。

視差アニメーションには、スクロール時とマウス移動時の 2 つの設定があります。

スクロールの視差の設定で、[速度] 設定を見つけます。速度が 100% 未満の場合、要素はスクロールされるページよりも遅く移動します。速度が 100% を超える場合、要素はスクロールされるページよりも速く移動します。

マウス移動時の視差の設定では、X 軸と Y 軸に沿った距離が最大の視差傾斜効果を意味します。

固定アニメーションを設定するときに、要素を修正する場所を選択できます。これは、固定効果が発生し始める画面領域 (画面の上部、中央、または下部) です。[ウィンドウ上部]、[ウィンドウ中央]、または [ウィンドウ下部] の 3 つの領域のいずれかを選択できます。

トリガー オフセットは、要素が Window Top、Window Center、または Window Bottom に対して固定されるポイントです。

Distance は、固定アニメーション中に要素がカバーするピクセル単位の距離です。

記事「Zero Blockのスティッキー要素」を読んで、固定効果を作成する方法と、ページ上でどのように表示されるかを学ぶことをお勧めします。