WordPressで視差効果を追加する方法とは何ですか
公開: 2021-12-12WordPressのテーマを調べたり、テーマに付属するさまざまな機能を調べたりしたことがある人なら、おそらく、上位のテーマ機能の中に視差スクロールと呼ばれるものがリストされていることに気づいたでしょう。 誰もが視差スクロールが実際に何であるかを知っているわけではなく、ウェブサイトでそれを見たときにそれを認識できる人でさえ、おそらくそれについて他にあまり知らないでしょう。 そのため、この人気のある手法についてもう少し説明し、プラグインを使用するか、視差WPテーマを選択してWebサイトでそれを使用する方法を示すことをお勧めします。 視差スクロールを備えたウェブサイトは、正当な理由で人気があります。オンラインの世界の最新のトレンドに遅れずについていきたい場合は、それについてのすべてを知っている必要があります。
ウェブサイトに視差効果を追加することに自信がない場合は、正しい決定を下すお手伝いをします。
- 視差スクロールとは何ですか？
- プラグインを使用して視差効果を追加する方法
- 最高のWordPress視差テーマとテンプレート
簡単な歴史
視差という言葉は、実際には天文学に由来しています。 これは、2つの異なる視点から見た場合の、オブジェクトの方向の見かけの変位または不一致を表します。 宇宙のオブジェクトの1つがあなたに近いために、異なる速度で移動しているように見えることがあることをご存知ですか？ 前景オブジェクトのダイナミクスは、常に背景のオブジェクトのダイナミクスよりも高速でエネルギッシュに見えます。 「実生活」では、実生活は三次元であるため、これは理にかなっています。 しかし、デザインはどうですか？ まあ、私たちはそれを現実のように見せることができます、そしてそれは実際にデザイナーが視差で達成したい主な効果の1つです。
私たちが知っているパララックスは、ビデオゲームデザインの黄金時代、より正確には、横スクロールのアーケードゲームで最初に導入されました。 その目的は、ゲーマーにより魅力的で没入型の体験を提供することを期待して、シーンに深みとダイナミクスを追加し、ストーリーテリングを改善することでした。
これは1980年代初頭のことでした。 2010年代初頭に早送りすると、Webデザインに適用される視差スクロールの最初の試みがあります。 数年後の今日、WordPressの視差スクロールに遭遇したことのない人は世界中にほとんどいません。
使い方
複雑に聞こえるかもしれませんが、サイトに視差効果を追加するのは非常に簡単です。 視差スクロールは、実際には非常に単純な設計概念に従います。 背景と前景を取得し、アニメーションを使用してそれらを異なる速度で移動させます。 ユーザーがページを下にスクロールすると、画像、ギャラリー、ビデオ、テキスト、その他のコンテンツなど、前景のオブジェクトよりも背景の表示が遅くなります。 その結果、すべてが単にそこに座っているのではなく、背景に固定されて空間に浮かんでいるように見えます。
WordPressの視差スクロールデザインは、単一の普遍的な手法ではないことに注意してください。 現在使用されている視差のデザインスタイルはさまざまですが、それらのほとんどは複数のレイヤーの使用に基づいています。 各レイヤーには、スクロール機能と指定された速度が割り当てられています。 この後、さまざまなブラウザとビューアに適切なCSSまたはHTMLの修正が適用され、これらのリソースの最新バージョンの正しい構文を使用するようにします。そうしないと、すべてがうまく機能しません。
なぜそれが良いのか
視差スクロールは最近非常に人気があり、文字通り、何らかの形、形、形でそれを使用しないWebサイトは世界に存在しないようです。 もちろん、これは真実ではありませんが、問題の事実は残っています。この手法は、特にWordPressサイトで広く使用されています。 では、視差スクロールがWebデザイナーにとって非常に魅力的なのは、何でしょうか。
答えはユーザーエクスペリエンスにあるかもしれません。 視差スクロールは、Webサイトのコンテンツを動的でエキサイティングな方法で認識します。 奥行きと動きの錯覚を作り出すことで私たちを引き込みます。 視差は、コンテンツのさまざまな要素を通じてユーザーを誘導するため、優れたストーリーテリングツールでもあります。 もちろん、正しく使用すれば。 視差の使用の悪い例はたくさんあります。 実際には何も言うことがないのに、デザイナーが方法を知っているという理由だけでそれをそこに出しているように感じることがあります。
ユーザーは楽しまれるのが好きです。 また、 WordPressビデオ背景プラグインを使用して簡単に追加できるビデオ背景のような実績のあるレシピに加えて、視差スクロールもそれを行うための優れた方法です。 また、企業が視聴者をWebサイトの焦点を合わせたい部分に文字通りドラッグするための優れた方法でもあります。 たとえば、製品またはサービスのページ。
いずれにせよ、スクロール動作は間違いなく驚きの要素を伴います。 正しく行われると、それはユーザーを喜ばせます、そしてそれはウェブサイトにとって常に良いことです。
初心者および中級ユーザーにとって、視差を追加するための最良の方法は、プラグインを使用することです。 市場には非常に多くの優れた視差プラグインがあり、それらのほとんどは、WordPressWebサイトに視差を追加するのに役立つ優れた仕事をしています。 この記事では、 Advanced WordPressBackgroundsプラグインを使用します。
このツールは主に視差効果を追加するために作成されましたが、他の多くの興味深い機能をカバーしています。 たとえば、これを使用して、テキストの後ろに静的な背景を追加できます。 さらに、特定の行に背景を追加するのにも役立ちます。 背景を追加して1つの段落に色を付けたい場合、このプラグインを使用すると、ワンクリックでこれを行うことができます。
プラグインのインストール
まず、明らかに通常の方法でプラグインをインストールしてアクティブ化する必要があります。 最初に行うことは、バックエンドに移動してプラグインを探すことです。 [プラグイン]をクリックしてから、[新規追加]をクリックします。 検索フィールドに「 AdvancedWordPressBackgrounds」と入力し、見つけたら[インストール]をクリックします。 インストールプロセスが完了したら、[アクティブ化]をクリックします。 これで、新しいプラグインが[プラグイン]メニューに表示されます。
プラグインを使用してクラシックエディタで視差を追加する
実際に視差を追加するには、追加したいページまたは投稿に移動します。 エディターに新しいボタンが表示されます。 それにカーソルを合わせると、 Advanced WordPressBackgroundsと表示されます。 それをクリックして、さまざまな値を設定し、視差効果の設定を変更するポップアップを表示します。
まず、背景の種類を選択します。 この例では、画像を使用します。
次に行うことは、使用する画像を選択することです。 全幅画像の場合は、[ストレッチ]チェックボックスをオンにします。
その後、視差効果を選択します。 Scrollに行きます。 ここでも希望のスクロール速度を設定できます。
視差に加えて、言及する価値のあるマウス効果があります。 そのおかげで、マウスカーソルの下にある画像にスローモーションの効果を作成できます。 素晴らしいのは、同じ画像で視差とマウスの効果を組み合わせることができることです。 特定のニーズと目標に応じて、ニーズに合ったものを選択してください。
視差画像のサイズと高さは、[スタイル]タブで設定できます。
最後に、[挿入]ボタンをクリックします。
これで、次のショートコードがエディターに表示されます。
[nk_awb awb_type =” image” awb_stretch =” true” awb_image =” 22” awb_image_size =” full” awb_parallax =” scroll” awb_parallax_speed =” 0.5” awb_mouse_parallax =” true” awb_mouse_parallax_size =” ここにあなたのコンテンツ [/ nk_awb]
「ここにあるあなたのコンテンツ」という言葉を実際のコンテンツ（テキスト、画像、ビデオなど）に置き換える必要があります。 [保存]をクリックすることを忘れないでください。
Webサイトにアクセスし、視差を追加したばかりの投稿またはページをチェックして、すべてが正しく機能しているかどうかを確認します。
プラグインを使用してGutenbergエディターで視差を追加する
このプラグインはグーテンベルクにも優しいです。 使用するには、バックグラウンド（AWB）ブロックをクリックして、視差効果の追加を開始します。
他のすべてのブロックと同様に、Background（AWB）ブロックには、 ClassicEditorのオプションとほぼ同じ独自のオプションがあります。
大きな部分は、視差効果のあるセクションに色、画像、さらにはビデオを追加できることです。 また、パディング、速度、視差タイプを追加することで、視差のサイズを設定できます。 最後に、グーテンベルクは前述のマウス効果をサポートしています。
ファッションのテーマ、特にオンラインストアは、視差スクロールの恩恵を最も受けているテーマです。 実際、それなしでファッションやアパレルのウェブサイト、ショップ、ブログを想像するのは難しいです。 バザールは、これを正しく実現したと思われるテーマの1つです。 このゴージャスなテーマには、美しく細工されたルックブックなど、いくつかの見事なページが付属しています。 非対称のショップページは、訪問者を買い物の気分にさせる方法で商品を紹介するのに理想的です。
Bazaarには、強力なSelect Coreプラグイン、カスタム製品のショートコード、ビデオの背景セクション、ソーシャルウィジェット、およびカスタマイズ可能なGoogleマップが付属しています。 もちろん、テーマは完全にレスポンシブで、強力なWPBakeryページビルダーが含まれています。
Bazaarを最高の視差WordPressテーマにする機能：
- スムーズなスクロール
- SEO最適化
- 翻訳準備完了
- 無料のスライダー革命プラグイン
- 1クリックデモコンテンツのインポート
ゲーム、ゲーマー、eスポーツ、スタジオに関するこのエキサイティングなテーマは、視差スクロールが正しく行われた素晴らしい例です。 ゲーム業界の本質は、 PlayerXがテーブルにもたらすダイナミックでエキサイティングなユーザーエクスペリエンスのようなものを必要とします。
クールなパララックススクロールとスライダーに加えて、PlayerXには、ゲームサイトを成功させるために必要なすべての機能が満載されています。 カスタム要素には、優れたインフォグラフィック、豊富なタイポグラフィ、チーム向けのプレゼンテーション、証言、マッチリスト、ストリームボックスが含まれます。
全体として、PlayerXは、視差スクロールとは何か、そしてそれをどのように使用すべきかを実際に示すテーマです。
PlayerXを最高の視差WordPressテーマにする機能：
- 試合とストリーミングのショートコード
- チームカルーセル
- 統合検索
- 7アイコンフォントパック
- WooCommerce互換
ツツジは、ゴージャスで洗練された写真用のWordPressテーマであり、あらかじめ作成されたホームページレイアウトのセットがあり、そのうちの1つは視差スクロールに大きく基づいています。 ファッション写真に最適なAzaleaは、ライフスタイルや美容から、写真を販売できるブログやショップまで、他の目的にも使用できます。 それぞれのホームページは素晴らしかったですが、視差のホームページには、ほとんどのファッション写真家が喜ぶと確信している特別な魅力があると言わざるを得ません。
ツツジはとても丈夫ですが、使いにくいとは言えません。 WordPressに完全に不慣れな人でも、このテーマを簡単に設定して、ファッション、美容、ライフスタイルの写真撮影のWebサイトで大成功を収めることができます。
Azaleaを最高の視差WordPressテーマにする機能：
- パスプロテクトプルーフギャラリー
- 視差ショートコード
- クライアントカルーセル
- CTAショートコード
- 5つのヘッダースタイル
ボストンの非常に優れた点は、1ページのWebサイトと複数ページのWebサイトのどちらかを選択できることです。 この柔軟性に加えて、広範なカスタマイズオプション、そしてもちろん、いくつかの印象的な視差ページも利用できます。
ボストンは、企業、大企業、代理店向けに特別に設計された視差のあるWordPressテーマです。 ワンページまたはマルチページのWebサイトを選択するかどうかにかかわらず、視差を使用して自慢するのではなく、訪問者にモダンな雰囲気を与える、非常にスマートでプロフェッショナルな外観のWebサイトを取得できます。 テーマはモバイルファーストのコンセプトに基づいて開発されました。これは、クライアントと顧客がほとんどの場合、ハンドヘルドデバイスでブラウジングを行うため重要です。 ああ、そしてプロのユーザーは、彼らのために特別に作られたバージョンがあり、ファイルが少なく、したがってはるかに軽いことを知って喜ぶでしょう。
ボストンを最高の視差WordPressテーマにする機能：
- ライトボックスプレビュー
- Twitterライブ
- 無制限のポートフォリオ作品
- フレックススライダーとレボリューションスライダー
- ワーキングコンタクトとニュースレターフォーム
非常に機能的で包括的でモダンな1ページのWebサイトがあなたが探しているものであるなら、 Hypnosはあなたにぴったりのテーマかもしれません。 このレスポンシブテーマは、まさに多目的テーマです。 中小企業、代理店、スタジオからポートフォリオ、ブログ、ショップまで、あらゆる用途に使用できます。 明るいバージョンと暗いバージョンが付属しており、どちらも見栄えがよく、視差効果に優れています。
その上、Hypnosは非常に直感的で、優れたカスタマーサポートと豊富な機能を備えています。 このテーマで入手できるページビルダーにはカスタムセクションが付属しており、並べ替え可能なポートフォリオ、作業用お問い合わせフォーム、 Revolution Slider 、Googleフォントなども入手できます。
Hypnosを最高の視差WordPressテーマにする機能：
- WPML互換
- SEO最適化
- Retina-Ready
- カスタムプリローダー
- ライブチャットサポート
結論は
視差スクロールは間違いなくWordPressWebサイトを改善しますが、それは正しく実行した場合に限られます。 視差を持たせるためだけに視差を追加するのはばかげています。 この効果を使用しているWebサイトが非常に多いため、過飽和状態に近づき、不快感を与え、時代遅れになり、鈍くなる可能性があります。
第二に、視差スクロールは正しく行われなければなりません。 グリッチなしで実行する必要があります。そうしないと、サイトの訪問者が明らかにイライラすることになります。
第三に、視差スクロールを使用して1ページのWebサイトに命を吹き込むのは非常に魅力的ですが、ユーザーがスクロールできるように、実際に何か言いたいことや内容があることを確認してください。
第4に、魅力的でよく考えられた視差スクロール効果で訪問者を引き付けることができた場合は、それを有利に機能させることを忘れないでください。 CTAを慎重に計画して、さらに誘惑します。
もちろん、プレミアム視差WPテーマを選択する場合、テーマの作成者がよく考えているので、これらのことを心配する必要はありません。
肝心なのは、視差スクロールはかなり素晴らしいです。 はい、それを台無しにする方法があります、そしてはい、いくつかの過飽和があるかもしれません。 それでも、サイトのトラフィックを増やし、コンバージョン率を最適化するための強力なツールです。 さらに、見栄えがよく、Webサイトにクールなタッチを追加します。
WordPressの視差スクロールについてどう思いますか？ 以下のコメントセクションであなたからの連絡をお待ちしています！
この記事がお役に立てば幸いです。 あなたがそれを好きなら、これらの記事のいくつかもチェックしてください！
- 最高のクールでスタイリッシュなWordPressテーマ
- 訪問者を笑顔にするポップアップ用のWordPressプラグイン
- 5つ以上の画像-完璧なWordPressYouTubeプラグイン