アニメーション化された「カートに追加」ボタンを振る

ボタンをアニメーション化する理由

「カートに追加」ボタンにアニメーションを追加すると、注目を集める強力な方法となり、CTA（コール・トゥ・アクション）がページ上で目立つようになります。このテクニックは ユーザーエンゲージメントを強化する and クリックスルー率を高めるユーザーが望ましいアクションを実行する可能性が高くなります。

最も効果的でよく使用されるアニメーションの 1 つは「シェイク」効果です。これはボタンに動的な動きを追加し、ユーザーが見逃しにくくします。

次の例をご覧ください:

GemPagesでアニメーション付き「カートに追加」ボタンを振る

GemPages でボタンのシェイク アニメーションを作成するのは簡単でカスタマイズ可能です。効果を実装して微調整するには、次の手順に従ってください。

ステップ1: ボタン設定でアニメーションを有効にする

GemPagesエディタで見つけたら、 商品をカートに追加 ページのボタンをクリックして設定を開きます。

左側のサイドバーで、 高機能 タブを下にスクロールします アニメーション オプションを選択してオンに切り替えます。

ステップ2: シェイクアニメーションを適用する

まず SHAKE アニメーションオプションから効果を選択できます。ボタンをホバー時のみ振るように設定することも、お好みに応じてボタンが表示されているときに振るように設定することもできます。

次に、を調整します アニメーション設定 シェイク効果の動作を制御します。

• 強度： 揺れの強さを定義します。
• その２：シャフトスピード（回転数）： シェイク効果が発生する速さを設定します。 
• ディレイ： アニメーションが開始するまでの遅延（秒単位）を指定します。
• イージング: アニメーションが時間の経過とともにどのように進行するかを選択します。
  • 線形： 全体を通して一定の速度。
  • イーズイン: ゆっくり始まり、スピードが上がります。
  • イーズアウト: 最初は速く始まり、その後遅くなります。
  • イーズインアウト: スロースタートとスローエンドの組み合わせ。
• ループ： シェイクアニメーションを連続的に繰り返すか、1 回だけ実行するかを決定します。

の詳細については アニメーション設定、 あなたは読むことができます この記事.

ステップ3: 保存して公開する

上部のバーで更新を保存して パブリッシュ 変更をストアフロントに反映します。