特別なスタイル エフェクトでサイトのコンテンツを強化します。

サイト全体のコンテンツに印象的な視覚効果を追加するには、訪問者がページをスクロールしたときに表示されるサイト全体のアニメーションを有効にします。セクションの背景や画像ブロックなど、特定のエレメントにアニメーションやその他の画像エフェクトを追加することもできます。

このガイドでは、サイト全体のアニメーションの設定と、他にエフェクトを追加できるエリアを確認する方法について説明します。

サイト全体のアニメーションはバージョン7.1で利用できます。バージョン7.0では、テンプレートによって異なります。一部の7.0テンプレートには、Bedfordテンプレート ファミリーのブログ ページのように、テンプレート固有のアニメーション オプションがあります。サイトのテンプレートを見つけるには、「サイトのバージョンとテンプレートについて」をご覧ください。

始める前に

• 個々の画像ブロック、引用ブロック、およびその他のエリアのアニメーションは、サイト全体のアニメーションをオーバーライドします。
• ブログ ページ、ストア ページ、ポートフォリオ ページなどの一部のコレクション ページでは、サイト全体のアニメーションが無効になっている場合でも、ページが読み込まれると常にかすかにアニメーション表示されます。
• サイトに視覚効果を追加する前に、アクセシビリティ リソースを確認することをおすすめします。

動画を見る

サイト全体のアニメーションを有効にする

サイト全体のアニメーションはサイトのほとんどのエリアに適用され、一部のエリアで他のエリアに比べてエフェクトが顕著に現れます。これらのアニメーションは主に、ページをスクロールするときに画像、テキスト、その他のブロックがどのように表示されるかに影響します。訪問者がリンクやボタンの上にカーソルを合わせると、一部のアニメーションが表示されます。

アニメーション スタイルを有効にして、それがサイトのさまざまなページにどのような影響を与えるかをテストすることをおすすめします。コンテンツに最も適したスタイルが見つかるまで、それぞれのスタイルを試してみてください。

サイト全体のアニメーションを有効にする方法は以下の通りです。

1. [アニメーション] パネルを開きます。
2. アニメーションのスタイルをクリックします。
3. アニメーション速度を [遅い]、[標準]、[速い] から選択します。
4. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] > [保存] の順にクリックしてエディターを閉じます。

サイト全体のアニメーション スタイル

次のアニメーション スタイルから選択できます。

• なし - サイト全体のアニメーションを無効にします。
• フェード - コンテンツがページに表示されると同時にフェード インします。
• スケール - コンテンツが小さいサイズから最終的なサイズまでアニメーションし、ズーム効果を生み出します。
• スライド - コンテンツが上方向にスライドし、ページをスクロールしているような効果を強調します。
• クリップ - コンテンツが左から一行ずつスライドしてきます。
• フレックス - 見出し、リンク付きテキスト、ボタン、ポートフォリオ ページに独自のアニメーションを追加し、カーソルを合わせるとメイン ナビゲーション リンクに下線が表示されます。

サイト全体のアニメーションを削除します。

サイト全体のアニメーションを無効にする方法は以下の通りです。

1. [アニメーション] パネルを開きます。
2. [なし] を選択します。
3. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] > [保存] の順にクリックしてエディターを閉じます。

その他の画像およびテキスト アニメーションとエフェクト

サイトの特定のエレメントに対して有効にできるアニメーションやエフェクトは他にもあります。各タイプの詳細については、リンクされているガイドをご覧ください。

• セクションの背景用アート (バージョン7.1のみ)
• セクションの背景画像とエフェクト (バージョン7.1のみ)
• 背景動画
• 画像ブロックにエフェクトとアニメーションを追加する
• 引用ブロック
• スクロール ブロック

トラブルシューティング

サイトにアニメーションが表示されない場合は、次の点に注意してください。

• 一部のコンテンツは、フェード アニメーション スタイルのみをサポートしています。そうしたコンテンツに別のスタイルを選択すると、そのスタイルをサポートしていないコンテンツが代わりにフェード表示されます。
• アニメーション化されているコンテンツがない場合は、サポートされているブラウザーを使用していることを確認してください。
• サイト全体のアニメーションとセクションの背景は、バージョン7.1でのみ使用できます。
• プロが利用している、アニメーションを使用してクライアント サイトを強化する方法については、Circleブログをご覧ください。