GemPagesの要素にアニメーションを追加する

GemPagesアニメーションについて

アニメーションは、フェードやスライドなどの微妙な効果から、より動的なトランジションやインタラクションまで、Web ページ上の要素に動きや動きを導入します。GemPages 内の任意の要素にアニメーションを柔軟に適用できます。GemPages 要素にアニメーションを追加するには、以下の手順に従ってください。 

アニメーションを追加するには?

要素にアニメーションを追加するには、次の手順に従います。

ステップ 1：へ行く Shopify管理 > アプリ をクリックして GemPages ビルダー アクセスするために GemPagesダッシュボード希望するテンプレートをクリックしてエディターにアクセスします。 

ステップ 2: アニメーションを追加したい要素をクリックします。要素の設定 左側のサイドバーに表示されます。次に、 高機能 タブには何も表示されないことに注意してください。 

ステップ 3: 下にスクロールして アニメーション セクションでスイッチを切り替える on.

利用可能なアニメーションプリセットが 4 つあります。

• フェード: 要素は、完全に透明な状態から完全に表示される状態まで徐々に変化します。
• スライド: 要素は、通常は水平方向または垂直方向に画面上でスムーズに遷移します。
• Zoom: 要素のサイズを動的に調整し、特定の空間内で要素が近づいている (ズームイン) か、遠ざかっている (ズームアウト) かのような錯覚を生み出す視覚効果。
• SHAKE : 要素に急速で不安定な動きを与え、震えや振動の動きをシミュレートする視覚効果。

アニメーション設定を構成する

それぞれのアニメーションには異なる設定があります。合計で 9 設定には以下が含まれます:

1。 速度

スライダーを使用してアニメーションの速度を調整します。スライダーを右に動かすほど、アニメーションの速度が速くなります。

2.遅延

アニメーションの開始、またはループが有効になっている場合は各反復処理の開始を遅延させる秒数。最大遅延時間は20秒です。

3. 緩和

このステップでは、さまざまな種類のイージング関数から選択して、キーフレーム間の遷移のペースを制御できます。適切なイージング関数の選択は、アニメーションに必要な特定の特性と、達成を目指す全体的なユーザー エクスペリエンスによって異なります。

• 線形: 直線的かつ一貫した動き
• イーズイン: アニメーションの開始時に徐々に加速する動き
• イーズアウト: アニメーションの最後に徐々に減速する動き
• イーズインアウト: 最初は徐々に加速し、その後は一定した動きの期間が続き、最後に向かって徐々に減速して終了する動き。

4.トリガー

アニメーションをトリガーする方法を選択します。

• すべてのビュー: 訪問者が要素までスクロールするたびにアニメーションが再生されます。
• 最初のビュー: アニメーションは、訪問者が要素を初めて表示したときにのみ実行されます。

5.方向

要素のスライド アニメーションが移動するパスを示します。

6。 距離

要素の移動距離を調整します。

7.強度

一定時間内における揺れの頻度。強度が大きいほど、振動は顕著になります。

8. ズーム比

ズーム アニメーション中に要素のサイズがどの程度 (パーセンテージで) 拡大または縮小されるかを示します。

9.ループ

要素が存在する限り、アニメーションが時間の経過とともに繰り返されるかどうか。