Diviプラグインのハイライト：Ultimate DiviBuilderアドオン

Divi Builder Addonsは、ハイエンドWebサイトで使用される多くのjQueryスクリプトをDiviBuilderに追加するサードパーティのプラグインです。 必要なスクリプトを切り替えて、CSSクラスをDiviBuilderモジュールに追加するだけです。 使い方は簡単で、たくさんの機能やアニメーションが含まれています。

Ultimate DiviBuilderアドオンメニュー

通常どおりプラグインをアップロードしてアクティブ化します。 Ultimate Divi BuilderAddonsと呼ばれる新しいメニュー項目がダッシュボードメニューに追加されます。 これをクリックすると、左側のウィンドウに多くの機能を備えた画面が開きます。 それらのいずれかをクリックすると、右側のウィンドウにトグルと情報が表示されます。 右側のウィンドウには、いくつかの効果のCSSクラスも含まれており、それらの使用方法が示されています。 その他には、色、画像サイズ、長さなど、より多くの機能やオプションのための複数のトグルが含まれています。これらはすべてデフォルトで無効になっています。

紫色で表示されている機能は有効になっていますが、グレー表示されている機能は無効になっています。 上記の例では、この機能には他のオプションとCSSクラスが含まれています。 特定の機能の使用方法について必要なすべての情報は、クリックすると右側のウィンドウに表示されます。

機能は次のとおりです。

• カスタムスクロールバー
• DoSlide水平
• フェードインビュー
• テキストの反転
• 下にスクロールするときにDiviテーマヘッダーを非表示にする
• jQueryページフリッピング垂直スクロール
• jQueryページフリッピング水平スクロール
• jQuery Scrollflow
• jQuery ScrollFX
• jQuery ScrollTrigger
• jQuery終了ページボックス
• スクロール中にヘッダーをロードするEffect1
• Effect2のスクロール中にヘッダーをロードする
• Effect3のスクロール中にヘッダーをロードする
• Effect4のスクロール中にヘッダーをロードする
• Revealatorアニメーション
• ScrollMagicレスポンシブ期間
• ScrollReveal
• StickyStack：jQueryスタッキング効果
• スクロールウィンドウ
• 超シンプルなテキストローテーター/ティッカー
• うわーアニメーション

Ultimate DiviBuilderアドオンの例

Diviレイアウトで使用した場合の機能の例をいくつか示します。

カスタムスクロールバー

カスタムスクロールバーを使用すると、コンテンツにスクロールバーを配置できます。 8つの異なる効果があります。 エフェクトを使用するセクション、行、またはモジュールのCSSクラスフィールドにCSSクラスを貼り付けます。 これでは、Esportsレイアウトのテキストモジュールのコンテンツにカスタムスクロールバー効果を追加しました。

スクロールバーがホバーに表示されるようになったので、スクロールして同じスペース内のより多くのコンテンツを表示できます。 これがエフェクト1です。ライブサイトではデザインが異なります。 背景を明るくして目立つようにしました。

これがエフェクト3です。スライドの上下に矢印を追加します。

効果5は、ハンドルを線から点に変更し、矢印のスタイルを変更します。

テキストの反転

フリッピングテキストは、カチカチと音を立てるイントロアニメーションを作成するテキスト入力効果です。 5つの効果があります。 この例では、パラリーガルレイアウトにフリッピングテキストを追加しました。 これは、最初の反転テキスト入力効果です。 一度に1文字ずつ入力します。 使用できるクラスはいくつかあります。 それぞれが異なる速度で入力します。

jQuery ScrollFlow

jQuery Scroll Flowは、行またはモジュールにスクロールアニメーションを追加します。 5つのアニメーションがあります。 これをパラリーガルレイアウトの行に追加して、すべてのモジュールに一緒に影響を与えるようにしました。 また、行のモジュールの1つに追加して、すでに存在する残りのコンテンツに合わせてスライドさせることもできます。

行までスクロールすると、コンテンツが表示され始めます。 通常よりも小さく、不透明度を十分に低く設定して、背景が透けて見えるようにします。

もう少しスクロールすると、コンテンツのサイズと不透明度が大きくなり、全幅と不透明度で表示されます。 上にスクロールすると、再び減少します。 これは同じ場所に残りますが、他にもいくつかのクラスがあるため、サイズと不透明度を調整しながら、右、左、または上下にスライドさせることができます。

jQuery ScrollFX

jQuery ScrollFXはテキストを拡大縮小し、背景の不透明度を変更します。 scrollfxクラスがセクションに追加されます。 このセクションのモジュールは、スクロールすると、画面に表示されているときに通常どおりに表示されます。

それらをスクロールして通過すると、セクションのコンテンツのサイズが小さくなり、不透明度が小さくなります。

jQueryスクロールトリガー

jQueryスクロールトリガーは、ページスクロールでモジュールをスライドさせます。 スクロールトリガークラスをセクションに追加します。 これがリゾートのレイアウトです。 クラスが追加されると、背景画像は自動的に横に移動します。

画像、ボタン、テキストなどを含むすべてのコンテンツは、そのセクションに到達すると所定の位置にスライドします。

そして、すべてが整ったら落ち着きます。

jQuery終了ページボックス

jQuery End Page Boxは、画面の下部にとどまるボックスを配置します。 セクションの最後にあるテキストモジュールにコードを追加することで作成されます。

これにより、画面の下部に表示されるボックスが追加され、セクションごとに指定したさまざまなコンテンツが表示されるように変更されます。

これが次のセクションです。 ボックスは、セクションごとに異なる方向から、または異なるアニメーションでスライドして出入りします。

スクロール中にヘッダーをロードする

スクロール中にヘッダーをロードすると、表示したページの量を示すバーがメニューに追加されます。 CSSクラスは必要ありません。 スクロールバーの色をカスタマイズできます。 選択できるスタイルは4つあります。

これは効果1です。画面の上部にスクロールラインを追加します。 スクロールするとサイズが大きくなり、訪問者が見たページの量が表示されます。

これはエフェクト2です。はるかに広いバーが表示されます。

これがエフェクト3です。スクロールすると垂直方向に大きくなり、ロゴの高さを占めます。 それほど大きくはなりませんが、スクロール効果はあります。

エフェクト4はロゴの幅を取ります。

啓示者

Revealatorは、スクロールによってトリガーされるアニメーションをセクション、行、またはモジュールに追加します。 40近くのオプションがあります。 パン屋のレイアウトの宣伝文句に追加しています。 宣伝文句は、そのコンテナが画面に完全に表示されるまで表示されません。

選択したクラスに応じて画面上でアニメーション化します。 これには、フェード、左回転、右回転、左スライド、右スライド、上スライド、下スライド、ズームイン、ズームアウトなど、多くのアニメーションオプションがあります。

スクロールマジックセクションワイプ

Scroll Magic Section Wipesは、スクロール時にコンテンツを画面にワイプするアニメーションを作成します。 これが私のお気に入りのエフェクトだと思います。 セクションに追加されます。

そのセクションが画面に完全に表示されると、その場所でフリーズし、次のセクションがその上をスクロールします。 これをできるだけ多くのセクションに追加して、ページ全体に興味深いスクロール方法を作成できます。 すべてのセクションをオーバーラップさせたい場合は、StickyStack機能に関心があります。

スクロールリビール

Scroll Revealは、スクロール中のモジュールを表示します。 17種類のアニメーションから選択してください。 セクション、行、またはモジュールに追加できます。 下部のセクションは、スクロール時にリーダーに向かってズームしています。

これがエフェクト1fです。 スクロールすると、行が所定の位置に回転します。

StickyStack：jQueryスタッキング効果

StickyStack：jQuery Stacking Effectは、パネルがビューポートの上部に到達すると、パネルをスタックします。 つまり、スクロールするとすべてのセクションが画面上でフリーズし、次のセクションがスクロールして重なります。 結果はスクロールで驚くべきものに見えます。 これはリスク管理のレイアウトです。

これが同じページの別のセクションです。 重なり合う部分は完全に機能します。

超シンプルなテキストローテーター/ティッカー

超シンプルなテキスト回転子/ティッカーを使用すると、テキストにマークアップを追加して、いくつかの単語を回転させることができます。 5つのアニメーションスタイルがあります。 これは、SimpleとCustomizableという単語の間で回転しています。

ここでは、2番目の単語を表示するために回転しています。 両方の単語がフェードインおよびフェードアウトします。

究極のDiviビルダーアドオン価格

Ultimate Divi Builder Addonsは、無制限のWebサイトで使用できる59ドルで、生涯更新が含まれています。 多くの場合、更新によって新しい機能が追加されます。 デモを無料で試して、気に入ったかどうかを確認できます。

• Ultimate DiviBuilderアドオンはDiviBuilderAddons.comから購入できます。

終わりの考え

Ultimate Divi Builder Addonsには提供できるものがたくさんあり、機能やアニメーションの開発にかかる時間を大幅に節約できます。 含まれている機能の数とその使いやすさに感銘を受けました。

この記事を大きなGIFで埋めないと、表示が難しいものもあります。 たとえば、Wow Animationには75のアニメーションから選択でき、遅延、継続時間、距離、および繰り返し回数を変更できます。

プラグインでは、CSSクラスをセクション、行、またはモジュールに快適に貼り付ける必要があります。 幸い、これは簡単に実行でき、CSSクラスへの貼り付けに関するDiviドキュメントには多くの情報があります。

Diviに多くの機能やアニメーションを追加する簡単な方法に興味がある場合は、Ultimate Divi BuilderAddonsをチェックする価値があります。

我々はあなたから聞きたい。 Ultimate Divi Builderアドオンを試しましたか？ コメントであなたがそれについてどう思うか教えてください。

GoodStudio /shutterstock.com経由の注目の画像