WordPressウェブサイトにパララックス効果を追加する方法：手動コーディングからElementorの使用まで

視差効果は、ページがスクロールするにつれて奥行き感とダイナミズムを生み出し、ウェブページをより生き生きとしたインタラクティブなものにする、一般的なウェブデザインのテクニックです。WordPressのウェブサイトでは、パララックス効果を実現するために、手動でのコーディングやプラグインまたは エレメンタ ページエディタ。この記事では、あなたのウェブサイトに視差効果を追加する最も適切な方法を選択するために、これらの方法を詳しく説明します。

I. パララックス効果を手動で追加します。

パララックス効果を手動で実装するには、ある程度のHTMLと カスケーディングスタイルシート 知識。もしあなたがコードに精通していないのであれば、このアプローチはより複雑で、視差効果のカスタマイズの範囲がより制限されると感じるかもしれません。しかし、自由度は最大です。

ステップ1: 画像のアップロード

まず、背景として使用したい画像をWordPressサイトにアップロードする必要があります。WordPressのメディアライブラリから画像をアップロードしたら、画像のURLをコピーします。

ステップ2：CSSコードの追加

次に、パララックス効果を実現するための画像のCSSコードを記述します。以下のCSSコードをテーマまたはページのスタイルシート真ん中：

.パララックス
  background-image: url("画像URL.jpg"); /* アップロードされた画像URLに置き換える */。
  height: 500px; /* パララックス要素の高さを設定します */
  background-attachment: fixed; /* パララックス効果を生み出すための固定背景 */
  background-position: center; /* 背景の位置を設定します。
  background-repeat: no-repeat; /* 背景の繰り返しなし */
  background-size: cover; /* background-image-cover-entire-area */.
}

ステップ3：HTMLコードの追加

次のHTMLコードをページの適切な場所に挿入してください：

このコードはパララックス効果でページに背景画像を挿入します。必要に応じて調整できます。 高さそして背景位置 といったパラメータがあります。

限界と課題：

このアプローチは柔軟ですが、いくつかの制限があります。さらにインタラクティブにしたり、より複雑なパララックス効果を作成したい場合は、より多くのJavaScriptテクニックを習得する必要があるかもしれません。このアプローチは初心者には不向きで、コーディングエラーがウェブサイトのレイアウトに問題を引き起こす可能性があります。

次に、プラグインを使用して視差効果を追加する方法です（コーディングに不慣れなユーザー向け）。

ほとんどのユーザーにとって、プラグインを使用して視差効果を追加することは、より簡単で直感的なオプションです。WordPressには、視差効果を簡単に実装できるプラグインが多数あります。 必須アドオンそしてスクロールマジックそしてクレトゥーラ・スライダー など。以下はその一例です。 視差画像 プラグインを使用したパララックス効果の例をご覧ください。

ステップ1：プラグインのインストールと有効化

WordPressのバックエンドで、プラグインの管理ページを開き、以下を検索します。 視差画像 プラグインをインストールしてください。インストールが完了したら、「有効化」ボタンをクリックしてください。

ステップ2：視差の追加

プラグインをインストールし、有効化した後、このプラグインはショートコード(ショートコード)を使ってパララックス効果を追加することができます。このプラグインにはパララックス効果を生成する方法が書かれており、モバイル側は別に分けることができます。

例えば、ページエディターで以下のようなコードを挿入します：

[dd-parallax img="Image URL.jpg" パララックス背景 "height="600" speed="3" z-index="-100" mobile="mobile-image.jpg"].
     パララックス・ウィンドウに重ねるテキスト
パララックス][/dd-parallax

この方法で、コーディングなしで簡単にパララックス効果をページに追加することができます。

ステップ3：視差効果パラメータの調整

などのプラグインがあります。 スクロールマジック より複雑な設定やカスタマイズも可能です。例えば、ScrollMagicプラグインは簡単なJavaScriptコードで視差効果をコントロールできます：

// コントローラの初期化
var controller = new ScrollMagic.

// シーンの作成
var scene = new ScrollMagic.Scene({)
  duration: 100, // シーン持続時間
  offset: 50 // シーン開始スクロール距離
})
.setPin('#my-sticky-element') // 要素をページに固定します。
.addTo(controller); // シーンをコントローラに追加します。

これらのプラグインの利点は、コードを書くために手を汚したくないユーザーのために、より多くの視覚化とカスタマイズのオプションを提供することです。

Elementorでパララックス効果を追加（ほとんどのユーザーに最適）

エレメンタ 現在利用可能な最も人気のあるWordPressページエディタの1つで、パララックス効果を簡単かつ直感的に追加できる豊富な機能をユーザーに提供します。Elementorを使えば、簡単にパララックス効果をページ要素や背景に追加することができます。詳しい手順は以下の通りです：

1.ウェブ要素の視差効果

ステップ1：視差効果を適用したい要素を選択します。

まず、Elementorエディタを開きます。ウェブページをクリックし、視差効果を追加したい要素を選択します。これは画像、テキスト、ボタンなどです。

ステップ 2: スクロールの有効化

を要素の 高いレベル タブで モーションエフェクト 下げる スクロール効果に設定します。 かきだす.この方法で、要素のスクロールアニメーションを6種類から選択し、さまざまな視差効果を得ることができます。

ステップ3：アニメーション設定の調整

鉛筆のアイコンをクリックして設定インターフェイスに入り、アニメーションの方向、速度、開始位置と終了位置を調整できます。例えば、ページの上部からアニメーションを開始し、スクロールするにつれて徐々にズームまたは回転するように設定できます。

ステップ 4: 要素に複数のアニメーションを適用します。

Elementorでは、同じ要素に複数のスクロールアニメーションを適用することができ、満足のいく結果が得られるまで必要に応じて組み合わせることができます。

ステップ5: マウストラックと3Dチルトエフェクトの追加

Elementorは、以下のようなインタラクティブな視差効果を提供します。 マウストラック 歌で応える 3Dチルト エフェクト。これらのエフェクトは、マウスの動きに基づいてエレメントに奥行き感を与えることができ、デスクトップデバイスに適しています。

2.背景の視差効果

ステップ1：スタイル設定の入力

Elementorで容器セクションをご覧ください。 タイプ タブ

ステップ2: 背景のモーションエフェクトを有効にします。

個別に設定可能 コンテキスト セクションに移動し 高いレベルイネーブル モーションエフェクト もしかしたら マウス効果を使って背景画像に視差効果を追加できます。モーションエフェクトはスクロールに基づいて背景を調整し、マウスエフェクトはマウスの動きに基づいて背景画像をインタラクティブにします。

ステップ3：効果の調整と最適化

要素の視差効果に似ています携帯電話、タブレット、デスクトップでパララックス効果がスムーズに表示されるように、さまざまなデバイスでパララックス効果のパフォーマンスを調整することが可能です。

概要

WordPressのウェブサイトにパララックス効果を追加するには、手動コーディング、プラグイン、Elementorを使用するなど、いくつかの方法があります。以下に、それぞれの方法の長所と短所をまとめました：

• 手動コーディングコーディング経験のあるユーザーに適しており、自由度の高いカスタマイズが可能ですが、操作が複雑で技術者向きです。
• プラグイン使いやすく、ほとんどのユーザーに適しています。プラグインはパララックスエフェクトを素早く作ることができますが、コードの微調整が必要な場合があります。
• エレメンタ最も簡単で直感的な方法です。Elementorを使えば、ウェブ要素や背景にパララックス効果を簡単に実装できます。