PageFlyセクションでパララックス効果を使用する方法

概要

概要：パララックス効果は、前景の要素とは異なる速度で背景要素を移動させることで3Dスクロール効果を生み出す視覚的なテクニックです。これにより、ウェブページに奥行きが加わり、サイトの視覚的な魅力を高めます。

PageFlyでは、パララックス効果はセクションにのみ適用でき、ライブページでのみ機能します。このガイドでは、PageFlyページのセクションでパララックス効果を効果的に使用する方法を紹介します。

要件

このガイドを開始する前に、パララックスの背景に使用する予定の少なくとも1つの高解像度画像を用意しておく必要があります。

Gen 2レイアウト - セクションでパララックス効果を使用する方法

PageFlyセクションにパララックス効果を追加する

PageFlyセクションにパララックス効果を追加するには、次の手順に従います。

• ステップ1：PageFlyエディターで、パララックス効果を追加したい既存のセクションを選択するか、新しいセクションを作成します。

• ステップ2：左側のメニューに移動し、スタイリング > 背景 > 背景スタイルを選択し、「パララックス」を選択します。

• ステップ3：画像ソースの下にある画像を選択をクリックして、セクションの背景画像をアップロードします。

パララックス効果をカスタマイズする

パララックス効果を追加した後、以下の設定を変更することもできます。

• 設定の調整：画像の下にある詳細設定をクリックして、パララックス速度をカスタマイズしたり、オーバーレイカラーを追加したりできます。

• パディングの調整：セクションの上下パディングを増やして縦方向のスペースを確保することで、効果がより良く見えます。以下の例では、上下パディングをそれぞれ250pxに調整しています。

• 高さの調整：高さパラメータの値を固定に変更すると、フレックスセクションにカスタムの高さを設定できます。

モバイルデバイス向けにパララックス効果を最適化する

• ステップ1：PageFlyページエディターからモバイルビューに切り替えます。

• ステップ2：Gen 2エディターでは、フレックスセクションのパディングまたは高さを調整できます。フレックスセクションを選択します：

  • スタイリングタブ > 間隔 > 下パディングを0pxに設定して、セクションが画面スペースを占有しすぎないようにし、モバイルエクスペリエンスを損なわないようにします。

  • スタイリングタブ > サイズ > 高さパラメータの値を固定に設定します。

  
• ステップ3：公開をクリックして変更を有効にします。

レガシーレイアウト - セクションでパララックス効果を使用する方法

PageFlyでは、セクションにパララックス効果を追加し、外観をカスタマイズし、異なるデバイス向けに最適化できます。

このガイドのビデオチュートリアル版をこちらで見ることができます：

PageFlyセクションにパララックス効果を追加する

PageFlyセクションにパララックス効果を追加するには、次の手順に従います。

• ステップ1：PageFlyエディターで、パララックス効果を追加したい既存のセクションを選択するか、新しいセクションを作成します。

• ステップ2：左側のメニューに移動し、スタイリング > 背景 > 背景スタイルを選択し、「パララックス」を選択します。

• ステップ3：画像ソースの下にある画像を選択をクリックして、セクションの背景画像をアップロードします。

パララックス効果をカスタマイズする

パララックス効果を追加した後、以下の設定を変更することもできます。

• 設定の調整：画像の下にある詳細設定をクリックして、パララックス速度をカスタマイズしたり、オーバーレイカラーを追加したりできます。

• パディングの調整：セクションの上下パディングを増やして縦方向のスペースを確保することで、効果がより良く見えます。以下の例では、上下パディングをそれぞれ350pxに調整しています。

モバイルデバイス向けにパララックス効果を最適化する

• ステップ1：PageFlyページエディターからモバイルビューに切り替えます。

• ステップ2：セクションを選択し、スタイリングタブ > 間隔 > 下パディングを0pxに設定して、セクションが画面スペースを占有しすぎないようにし、モバイルエクスペリエンスを損なわないようにします。

• ステップ3：公開をクリックして変更を有効にします。

使用例

• 注目商品の強調：新着商品や注目商品を紹介するセクションでパララックス効果を使用し、ユーザーの注意を引き、ダイナミックなショッピング体験を創出します。

• 会社概要ページでのストーリーテリング：「会社概要」ページでパララックス効果を使用して、ストーリーが展開するにつれて奥行きを加えます。

• 背景アニメーション：背景画像に微妙な動きを加えて、メインコンテンツから注意をそらさずにセクションをより魅力的にします。

• イベントページ：パララックスを使用して背景画像（コンサート会場や会議場など）を表示し、その上にイベントの詳細がスクロールするようにすることで、ページをよりエキサイティングでインタラクティブにします。

• ホリデーセールセクション：季節ごとのセールセクション（例：ブラックフライデーやホリデーセール）の背景にパララックスを追加して、注目を集め、デザインをより目を引くものにします。

• サービスの特徴：パララックスを使用して画像（例：修理中の様子）を表示し、その上にサービスの説明がスムーズにスクロールするようにすることで、サービスを強調します。

ヒントとベストプラクティス

• 適切な画像の選択：背景には、明確で層の区別がはっきりした高品質の画像を選択します。これにより、パララックス効果が奥行きの認識を高め、前景のコンテンツから注意をそらさないようにします。

• モバイル体験を念頭に置く：パララックス効果はモバイルサイトを遅くする可能性があります。モバイルデバイスでの使用を制限するか、設定を調整してパフォーマンスへの影響を減らします。

• テストと微調整：異なるブラウザ環境やデバイスで定期的にページをプレビューし、パララックス効果がスムーズに機能することを確認します。

よくある質問

1. 1つのページで複数のパララックス背景を使用できますか？

はい、1つのページで複数のパララックス背景を使用できますが、それぞれの読み込み時間がページに過負荷をかけないように最適化されていることを確認してください。

2. パララックス効果を使用しているときに読み込み時間が遅くなるのをどうすれば修正できますか？

背景画像を最適化してファイルサイズを減らし、ページのパララックスセクションの数を減らすことを検討してください。

追加リソース

• PageFlyページで全幅セクションを作成する5つのステップ

• PageFlyでスティッキーセクションを作成する