WordPressのアニメーションギャラリーは新しいものではありませんが、ウェブサイトにとって最もクールなものの一つです。画像はどんなものにも生命を与えます。アニメーション効果と組み合わせれば、見る人にもっとインパクトを与えることができます。
WordPressには、画像や画像ギャラリーにアニメーションを追加する方法があります。カスタムコードを使うこともできるし、優れたウィジェットを使うこともできる。いずれにせよ、WordPressと互換性のある優れたプラグインを使用するのが最良の方法です。
このブログでは、人気のプラグインを使用してアニメーション画像ギャラリーを作成します。 Elementor そして Element Pack.始めよう！
Elementorの紹介
Elementor はWordPressをベースにしたページビルダー・プラグインです。コーディングの知識がなくても、大量のウェブサイトを作成できるシステムです。
コードの代わりに、ドラッグ＆ドロップでウェブサイトに機能を追加できるウィジェットがあります。これは、WordPressで利用可能な最も簡単なページ構築システムです。 5M+ アクティブなインストール。
私たちのシステムは Elementor と同様にWordPressのアニメーションギャラリーを作成します。
Elementor用Element Packプラグイン
Element Pack プラグインはウィジェットのバンドルです。Elementorのウィジェットは少ないので、サードパーティのプラグインが必要です。 Element Pack を超える完璧なサードパーティプラグインです。 185の必須ウィジェット.
このブログでは Element Packのウィジェットを使って、WordPressのアニメーションギャラリーを作成しました。プラグインをチェックする これ.
ウェブサイトにWordPressのアニメーションギャラリーを作成する
アニメーションギャラリーは、基本的にアニメーション効果を持つ画像ギャラリーです。このようなWordPressのアニメーションギャラリーは 高度な画像ギャラリー ウィジェット Element Pack.
このウィジェットはElementorによって提供されたものよりもはるかに優れています。異なるギャラリースキンを設定でき、ライトボックスと同様にメイソンスタイルまたはジャスティファイドスタイルを使用できます。
全体的に、このウィジェットはマスキングオプションとアニメーションで画像をカスタマイズできます。そのため、アニメーションギャラリーを作成するのに最適なツールです。
では、早速作ってみよう！
ステップ-1
まず Element Pack プラグインをあなたのウェブサイトにインストールしてください。次に ダッシュボード> Element Pack> コアウィジェット をオンにする。 高度な画像ギャラリー ウィジェット
ステップ2
新しいページで、2列のセクションを作成します。1つのカラムに必要な情報やテキストをすべて入れ、2つのカラムをドラッグする。 高度な画像ギャラリー ウィジェットをもう一方の列に置く。
ステップ3
アニメーションWordPressギャラリーを作成するには、画像を選択しましょう。の下にあるグレーのボックスをクリックしてください。 コンテンツタブ> イメージギャラリー セクションを参照されたい。
ステップ4
すべての画像を選択すると、新しいウィンドウが開き、画像を削除したり追加したりすることができます。選択し終わったら ギャラリー挿入 ボタンをクリックする。
ステップ5
を常に選択する。 画像サイズ への フル 画質を保つためである。
ステップ6
画像ギャラリーのビジュアルを向上させるマスキングスタイルを イメージマスク オプションがある。
ステップ7
セクションについて ギャラリーレイアウト画像ギャラリーをあなたの要求に合うように調整してください。列数を6列まで設定し、列と行の間隔を調整します。
ステップ8
それでは、WordPressギャラリーのアニメーションの最初のレイヤーを作成します。3番目の 追加をオンにする。 ティルト効果 スイッチャー。
これを使うと、画像ギャラリーの各画像はホバー時に傾きアニメーションを表示します。ちなみに チルトスケール 下のスクロールバーから
ステップ9
次に、2層目のアニメーション・エフェクトを追加しよう。次に 上級 タブをクリックし モーション・エフェクト セクションをご覧ください。次に 視差効果 スイッチャーで任意のエフェクトをかける。
ステップ10
下の同じセクションで エントランス・アニメーション.アニメーションのスピードを設定するか、ディレイを調整する。これが3層目のアニメーションになります。
プレビュー
ここまでの作業をすべて保存すると、WordPressのアニメーションギャラリーはこのようになります。すごいでしょう？
結論
アニメーションギャラリーは、ユーザーエクスペリエンスをさらにレベルアップさせます。ですから、スタイリッシュなウェブサイトに加えるべき素晴らしい要素です。今回ご紹介したように、アニメーションギャラリーは数分で簡単に作ることができます。
ご宿泊ありがとうございました。
