Diviのセクション/行にアニメーション効果を追加する方法

公開: 2017-08-11

今日のDiviチュートリアルでは、Diviのセクションと行にアニメーション効果を追加する方法を紹介します。 Diviテーマ自体は、Webサイトに追加レベルのインタラクションをもたらすのに役立ついくつかの関連するアニメーション効果を提供します。これらの効果は、[詳細設定]タブの[アニメーション]サブカテゴリでDiviBuilder内の画像に簡単に割り当てることができます。

ただし、これらのアニメーション効果をWebサイトの他のモジュール、セクション、または行に追加する方法を探している場合は、それも可能です。この投稿では、その方法を正確に説明します。組み込みのアニメーション効果を追加する方法を示すだけでなく、wow.jsとanimate.cssをDiviWebサイトに統合する方法も示します。

この投稿の最後に、行とセクションの両方に優れた効果を追加できるようになります。プロセスを視覚化するのに役立つように、次の例を共有したいと思います（この投稿の最後に達成する方法を示します）。

アニメーション効果

Divi AnimationsまたはWow.js＆Animate.css？

おそらく、Diviアニメーションの使用を検討する必要があるのはどのような場合で、wow.jsとanimate.cssの方がうまくいくのか疑問に思われるかもしれません。高度なアニメーション効果を作成したくない場合は、Diviの組み込みアニメーションを使用するのが最も簡単なソリューションですが、wow.jsとanimate.cssの効果は間違いなくWebサイトにも大きな付加価値をもたらします。

Diviアニメーションを使用する場合

Diviには、使用できる5つのアニメーション効果があります。

フェードイン
下のスライド
左のスライドイン
右のスライドイン
上部のスライドイン

可能性は5つしかありませんが、最も頻繁に使用される可能性もあります。それらは単純で要領を得たものです。あまり労力をかけずにWebサイトに素晴らしい追加の効果を与えたい場合は、Diviアニメーション効果が最適です。これらの各エフェクトは、スクロールしてエフェクトを追加したモジュール、行、またはセクションを表示した瞬間からアクティブになります。そうすれば、訪問者は、たとえばページの下部にある効果を見逃すことはありません。

Diviアニメーション効果を統合するために、Webサイトに子テーマをアップロードする必要はありません。親テーマで作業しながら、これらの効果を簡単に追加できます。

Wow.jsとAnimate.cssをいつ使用するか

wow.jsとanimate.cssをあなたのウェブサイトに統合することはあなたが持っている多くのオプションのためにおそらくあなたが本当に好きになるものです。そのカテゴリに関連するさまざまな効果を含む14のアニメーション効果カテゴリがあります。選択できるカテゴリは次のとおりです。

注目を求める人
跳ねる入り口
跳ねる出口
色あせた入り口
フェージング出口
フリッパー
ライトスピード
回転する入り口
回転出口
スライド式の入り口
スライド出口
ズームエントランス
ズーム出口
特別

次のリンクをクリックすると、利用可能なすべての効果を表示できます。これらのアニメーション効果は、スクロール時にも表示されます。

Diviのセクション/行にアニメーション効果を追加する方法

私たちのYoutubeチャンネルを購読する

組み込みのアニメーション効果を使用する

最初に紹介する可能性は、組み込みのアニメーション効果です。セクションと行の両方にエフェクトを適用する方法を紹介します。変更したいページを開きます。

この例では、ページの最初のセクションと行にアニメーション効果を追加します。セクションまたは行のアニメーションの追加は、どちらの場合も同じです。さまざまなアニメーション効果のCSSクラスコードは次のとおりです。

フェードインCSSクラス： et-waypoint et_pb_animation_fade_in
下部のスライドインCSSクラス： et-waypoint et_pb_animation_bottom
左のスライドインCSSクラス： et-waypoint et_pb_animation_left
右のスライドイン：CSSクラス： et-waypoint et_pb_animation_right
トップスライドインCSSクラス： et-waypoint et_pb_animation_top

行にアニメーション効果を追加する

アニメーションを特定の行に追加するには、その行の設定を開き、[詳細設定]タブに移動します。 [詳細設定]タブで、アニメーション効果のCSSクラスを[CSSクラス]フィールドに配置します。この場合、フェードインアニメーションを追加する方法を説明します。

アニメーション効果

セクションにアニメーション効果を追加する

行にアニメーション効果を追加するのと同じ方法が、セクションにも適用されます。 [詳細設定]タブに移動し、選択したアニメーション効果のCSSクラスを[CSSクラス]フィールドに配置します。この例では、上部のスライドインアニメーション効果を追加する方法を示します。

結果

セクションと行にエフェクトを追加すると、次の結果が表示されます。

Wow.jsとAnimate.cssをお子様のテーマに追加します

この次のパートでは、WordPress Webサイトにwow.jsとanimate.cssを追加する方法と、Diviテーマ全体でそれを使用する方法を紹介します。

まず、wow.jsとanimate.cssをWordPressに統合する方法についてのこの投稿について、JeremyCooksonの功績を称えたいと思います。投稿のこの部分では、Diviテーマで構築されたWordPressWebサイトの統合を実現する方法を正確に説明します。

wow.jsとanimate.cssをWebページに追加するには、Webサイトで子テーマを使用する必要があります。子テーマを作成する方法がわからない場合は、この投稿を確認してください。子テーマのメインファイルを作成したら、アニメーション効果を使用して子テーマを完成させるために、他に2つのファイルを追加する必要があります。

ファイルをダウンロードして、お子様のテーマに追加します

お子様のテーマを手の届く範囲に保ち、その間に次の2つのリンクをクリックして、次の2つのファイルをダウンロードしてください。

animate.min.css
wow.min.js

2つのファイルをダウンロードしたら、子テーマ内にサブフォルダーを作成します。それらの1つにCSS、もう1つにJSという名前を付けます。その後、animate.min.cssをCSSフォルダーに配置し、wow.min.jsをJSフォルダーに配置します。

アニメーション効果

子テーマをアップロードする

次に行う必要があるのは、wow.jsとanimate.cssを追加したばかりの子テーマをアップロードしてアクティブ化することです。 WordPressダッシュボード>外観>テーマ>に移動し、ページの上部にある[新規追加]をクリックします。

Functions.phpファイルにPHPコードを追加する

子テーマをアップロードしたら、次の行のPHPコードを子テーマのfunctions.phpファイルに追加します。

// * Animate.CSSとWOW.jsをキューに入れます
add_action（ 'wp_enqueue_scripts'、 'sk_enqueue_scripts'）;
関数sk_enqueue_scripts（）{
wp_enqueue_style（ 'animate'、get_stylesheet_directory_uri（）。 '/ css / animate.min.css'）;
wp_enqueue_script（ 'wow'、get_stylesheet_directory_uri（）。 '/ js / wow.min.js'、array（）、”、true）;
}
// * WOW.jsをアクティブ化するためのエンキュースクリプト
add_action（ 'wp_enqueue_scripts'、 'sk_wow_init_in_footer'）;
function sk_wow_init_in_footer（）{add_action（ 'print_footer_scripts'、 'wow_init'）;}
// * </ body> function wow_init（）{？>の前にJavaScriptを追加します
<script type =” text / javascript”>
新しいWOW（）。init（）; </ script> <？php}

行とセクションにアニメーションを追加する

wow.jsおよびanimate.cssエフェクトを行およびセクションに追加するためのシステムは、Diviアニメーションエフェクトの場合と同じです。アニメーション効果を追加する行またはセクションの設定を開く必要があります。次に、アニメーションに割り当てられたCSSクラスをセクションまたは行のCSSクラスフィールドに配置できます。

行にアニメーションを追加

行とともに表示する例では、アニメーション効果のリストにあるfadeInRight効果を使用しています。行設定の[詳細設定]タブに移動し、[CSSクラス]フィールドに「wowfadeInRight」を追加します。 Webサイトの一部にエフェクトを追加するときは、使用しているエフェクトの前に「wow」を付けてください。

結果

CSSクラスを追加し、作業中のページをプレビューすると、次の結果が得られるはずです。

アニメーション効果

セクションにアニメーションを追加

同じ方法が、セクションにアニメーション効果を追加する場合にも適用されます。 [詳細設定]タブに移動し、セクションの[CSSクラス]フィールドに「wowbounceInDown」CSSクラスを追加します。

結果

すべての手順を正しく実行すると、次の結果が得られるはずです。

アニメーション効果

高度なオプション

アニメーションにいくつかの仕様を追加したい場合は、それを行うこともできます。たとえば、アニメーション効果の1つに遅延時間を追加できます。これは、同じセクション内でセクションアニメーションと行アニメーションを組み合わせる場合に便利です。このようにして、アニメーション効果が互いに重ならないようにします。

この遅延時間を追加する方法を示すために、この投稿の前の部分で使用した2つのエフェクトを組み合わせます。 1つのアニメーション効果はセクションに割り当てられ、もう1つは行に割り当てられます。行のアニメーション効果が失われないようにするために、2秒の遅延時間を追加します。

行設定を開き、[詳細設定]タブに戻ります。 CSS Classフィールド内に、「delay」という別のクラスを追加します。このクラスはまだ存在していませんが、次のステップで追加しようとしています。

次に、次のボタンをクリックして、作業中のページの設定に遅延CSSクラスを追加します。

次に、CSSコード行を含むCSSクラスを[カスタムCSS]フィールドに追加します。この例で行うように、2秒の遅延時間を追加する場合は、次のCSSコード行が必要になります。

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

結果

遅延時間を追加すると、結果は次のようになります。

アニメーション効果

最終的な考え

この投稿では、DiviWebサイトにアニメーション効果を追加する方法を紹介しました。私たちはあなたに2つの可能性を提供しました。 1つ目は、Diviが提供する標準のアニメーション効果の使用方法を示しています。 2番目の可能性では、wow.jsとanimate.cssを統合できます。 Webサイトでアニメーション効果を使用すると、訪問者と共有したいコンテンツを強調するのに役立ちます。それに加えて、それはまたただ素晴らしく見えます。質問や提案がある場合; 下のコメントセクションにコメントを残してください。

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

ストッカートップ/shutterstock.comによる注目の画像