画像のスクロール効果を作成する方法が必要です Elementor ?この記事では、Elementor を使用して Web ページ上で画像スクロール効果を作成する方法を説明します。
画像スクロール効果を使用すると、ユーザーが画像の上にマウスを移動すると、画像全体が表示されます。 Web サイト テンプレートを販売する Web サイトにアクセスすると、画像スクロール効果機能を備えたテンプレートの完全なプレビューを確認できます。
これらの機能を使用すると、小さなスペースで Web サイトの全体像をユーザーに簡単に表示できます。 通常、Web サイトの全体画像を表示すると、Web ページ上で多くのスペースが占有されます。 さらに、それはウェブサイトのデザインにも影響します。
しかし、絵巻効果を使用すると、魅力的な方法でさらに多くの絵を追加することができ、視聴者の注意を簡単に引き付けることができます。
Elementorで画像スクロール効果を作成する
Elementor には画像スクロール効果を追加するウィジェットは提供されていません。 したがって、カスタム CSS を使用して効果を追加する必要があります。 カスタム CSS 機能は以下でのみ利用可能です Elementor プロ。 したがって、次のようにアップグレードしていることを確認してください Elementor プロ。
次に、Elementor エディタでページを開き、プラス アイコンをクリックしてセクションを追加します。
次に、セクションの列を選択する必要があります。 ここでは単一列セクションを選択します。
ここでセクション編集アイコンをクリックし、レイアウト タブで最小高さを 500 に設定します。
次に、ブロック ウィジェットから、作成したセクションに内側のセクション ブロックを追加し、デフォルトの列を削除します。 列編集アイコンを右クリックし、削除オプションをクリックしてメイン列を削除します。
内側のセクションの編集オプションに再度移動し、前に示したように、レイアウト タブで最小の高さを 500 に設定します。
次に、内側のセクションのスタイルタブに切り替え、背景オプションから背景をクラシックに設定します。 次に、背景画像を追加する必要があります。 画像位置オプションから、画像の位置を次のように設定します。 トップセンター。 繰り返しオプションからオプションを設定します 繰り返し禁止 そしてサイズはこんな感じ カバー.
タブに切り替えます 高度な カスタム CSS を追加します。 カスタム CSS フィールドに次のコードを追加します。
selector{ -webkit-transition:ease-in-out 3s !重要; トランジション: イーズインアウト 3 秒 !重要; } selector:hover{ 背景位置:中央下 !重要; }
トランジション値を変更して、画像のスクロール効果を変更できます。 同じ効果を持つ複数の画像を追加する場合は、列を複製してから背景画像を変更します。
まとめ
このプロセスに従うと、ページビルダーを使用してウェブサイトに画像スクロール効果を追加できるようになります。 Elementor。 他の記事をチェックして学習してください。
- Gutenberg エディターで Elementor ブロックを使用するにはどうすればよいですか?
- Elementor vs Divi vs SeedProd – どちらが優れていますか?
- Elementor で履歴を使用してアクションを元に戻したりやり直したりする方法
- Elementor ウェブサイトを超高速に作成する方法
- Elementor でインタラクティブなサークルを作成する方法
この記事がお役に立てば幸いです。 この記事が気に入ったら、Facebook ページに「いいね」を押してつながりを維持してください。
