アニメーションとオーバーレイ

この記事では、訪問者の注意を引くためのシンプルなアニメーションとオーバーレイを簡単に追加する方法を紹介します。

アニメーション

ウェブデザインにおけるアニメーションは、訪問者の注目を集めたり、ページの特定の部分を強調したりするのに最適です。ウェブサイトビルダーには、数回のクリックで簡単に適用でき、素晴らしい成果を生み出す便利なアニメーションが豊富に用意されています。

要素にアニメーションを追加するには、要素をダブルクリックし、 「スタイル」 タブを選択して、要素設定画面が表示されていることを確認します。「アニメーション」 セクションまで下にスクロールします。

ここでは、さまざまなアニメーション タイプを見つけることができます。

• アニメーション化しない
• 表示/非表示
  • 表示/非表示
  • 上下にスライド
  • ズームイン/ズームアウト
  • 左から右にスライド
  • 右から左にスライド
  • 上から下にスライド
  • 下から上にスライド
• 注目を集める
  • 脈
  • 瞬き
  • オーバーレイとして開く

アニメーションの種類を選択すると、他の設定が表示されます。例えば **「左から右へスライド」**を選択した場合、以下の設定が表示されます。

• 初期: 要素の初期状態はどうあるべきか?
  • 要素が非表示
  • 表示される要素
• 継続時間: アニメーションの長さはどのくらいにすべきでしょうか?
• 遅延: アニメーションを少し遅れて開始しますか?
• トリガー: アニメーションをいつトリガーするか?
  • 自動トリガーなし: このオプションは、例えばクリック時にオーバーレイを開きたい場合に使用できます。
  • ページの読み込み時
  • 要素がスクロールされて表示されました

アニメーションを設定したら、「アニメーション」 セクションの 「プレビュー」 オプションをクリックして、アニメーションの見た目を確認できます。

複数の要素に同じアニメーションを適用したい場合は、「コピー」 をクリックし、別の要素のアニメーションセクションに移動して 貼り付ける だけです。これにより、最初の要素と同じアニメーション設定が2番目の要素にも適用され、すべてを手動で再設定する必要がなくなります。

アニメーション付きの要素は、要素にマウスをホバーしたとき、 ナビゲーターパネル、または パンくずリスト に表示される 星型アイコン で簡単に識別できます。星型アイコンをクリックすると、アニメーション付きの設定パネルが直接開きます。

---

オーバーレイまたはポップアップの設定

ウェブサイトビルダーには、簡単に利用できる便利なアニメーションが豊富に用意されています。中でも オーバーレイ は、各要素の設定から利用できます。また、オーバーレイとして完璧に機能し、ニーズに合わせてカスタマイズできるセクションテンプレートも用意されています。これらのテンプレートは、ウェブサイトビルダーの左側のパネルで 「マーケティング」 をクリックすると表示されます。

事前定義された設定を備えたこれらのセクションテンプレートは、ウェブサイトのどこにでも追加できます。ただし、全体像を把握しやすくするために、ページの最後に配置することをおすすめします。セクションテンプレートをウェブサイトにドラッグ＆ドロップするだけで、すぐにアニメーションを開始できます。

ここでは、このコンテナをアニメーション化する複数の方法があります。訪問者がウェブサイトにアクセスしたときにオーバーレイとして開くようにしたいので、 「オーバーレイとして開く」 を選択します。

コンテナをカスタマイズするための設定がさらに追加されました。訪問者がウェブサイトにアクセスした際にオーバーレイを開く場合は、 「ページ読み込み時に開く」 を選択してください。

ページの読み込み時にオーバーレイを直接表示するのではなく、ユーザーがボタンをクリックしたときにオーバーレイを表示する場合は、次の手順に従います。

1. オーバーレイコンテナの場合は、 「オーバーレイとして開く」 設定を維持し、トリガーとして 「自動トリガーなし」 を選択します。

2. 次にオーバーレイをトリガーするボタンをダブルクリックします
3. 左側の設定パネルで、「リンク」 タブを選択します。
4. そこで 要素 を選択します
5. これにより、ウェブサイト上の要素を選択できる 要素ピッカーが自動的に起動します。この場合は、オーバーレイコンテナを選択します。

必要に応じて、上部のナビゲーションにある 目のアイコン をクリックするか、[CTRL] + [P] を押すことで、プレビュー モード でオーバーレイを簡単にテストできます。