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

Last updated 4 days ago

Was this helpful?

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

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

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

重要な注意: Gen 2レイアウトは、ペイ・アズ・ユー・ゴー価格モデル（）でのみ利用可能になります。

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

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

ステップ1：PageFlyページエディターからモバイルビューに切り替えます。
ステップ2：Gen 2エディターでは、フレックスセクションのパディングまたは高さを調整できます。フレックスセクションを選択します：
- スタイリングタブ > 間隔 > 下パディングを0pxに設定して、セクションが画面スペースを占有しすぎないようにし、モバイルエクスペリエンスを損なわないようにします。
- スタイリングタブ > サイズ > 高さパラメータの値を固定に設定します。
ステップ3：公開をクリックして変更を有効にします。

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

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

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

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

ステップ1：PageFlyページエディターからモバイルビューに切り替えます。
ステップ2：セクションを選択し、スタイリングタブ > 間隔 > 下パディングを0pxに設定して、セクションが画面スペースを占有しすぎないようにし、モバイルエクスペリエンスを損なわないようにします。
ステップ3：公開をクリックして変更を有効にします。

注目商品の強調：新着商品や注目商品を紹介するセクションでパララックス効果を使用し、ユーザーの注意を引き、ダイナミックなショッピング体験を創出します。
会社概要ページでのストーリーテリング：「会社概要」ページでパララックス効果を使用して、ストーリーが展開するにつれて奥行きを加えます。
背景アニメーション：背景画像に微妙な動きを加えて、メインコンテンツから注意をそらさずにセクションをより魅力的にします。
イベントページ：パララックスを使用して背景画像（コンサート会場や会議場など）を表示し、その上にイベントの詳細がスクロールするようにすることで、ページをよりエキサイティングでインタラクティブにします。
ホリデーセールセクション：季節ごとのセールセクション（例：ブラックフライデーやホリデーセール）の背景にパララックスを追加して、注目を集め、デザインをより目を引くものにします。
サービスの特徴：パララックスを使用して画像（例：修理中の様子）を表示し、その上にサービスの説明がスムーズにスクロールするようにすることで、サービスを強調します。

適切な画像の選択：背景には、明確で層の区別がはっきりした高品質の画像を選択します。これにより、パララックス効果が奥行きの認識を高め、前景のコンテンツから注意をそらさないようにします。
モバイル体験を念頭に置く：パララックス効果はモバイルサイトを遅くする可能性があります。モバイルデバイスでの使用を制限するか、設定を調整してパフォーマンスへの影響を減らします。
テストと微調整：異なるブラウザ環境やデバイスで定期的にページをプレビューし、パララックス効果がスムーズに機能することを確認します。