セクション/行にアニメーションを追加する方法
公開: 2021-09-11かつてインターネット上で、サイトにアニメーションを追加することは、面倒で、やや特殊な作業でした。 ただし、Diviには、多くの技術的な専門知識を必要とせずに実装できる強力なアニメーションツールとスクロール効果があります。 誰でも最小限の労力でこれらの効果をサイトに追加できます。 このチュートリアルのプロセスはDivi内の任意の要素に適用できますが、今日はセクションと行に焦点を当てて、それらを使用して特定の効果を実現します。 アニメーションを掘り下げましょう！
プレビュー
デスクトップ
モバイル
DiviBuilderをページまたは投稿にロードします
最初に行う必要があるのは、DiviBuilderに入るということです。 レイアウトパックの1つ（この記事ではテニスクラブのレイアウトパックを使用します）を選択する場合でも、独自のデザインを選択する場合でも、すべての手順はセクションと行の設定内で行われます。
この設計では、1つのセクションと3つの行をアニメーション化して、順次ロード効果を実現します。
既成のレイアウトを選択する
専門的に設計されたレイアウトパックの1つを適用するには、Divi Builderに入り、[既成のレイアウトを使用]を選択します。 これにより、提供するすべての景品のリストが表示されます。
レイアウトを選ぶ
次に、使用するレイアウトパックを選択するだけです。 カテゴリで並べ替えたり、キーワードを検索して、私たちが作成したものを確認できます。
アニメーション化するセクションと行を見つけます
レイアウトがすべてのアセットをインポートし、ページが読み込まれたら、アニメーションを追加するセクションと行を見つける必要があります。 セクションはDiviBuilderで青に色分けされ、行は緑になっていることを忘れないでください。
それをマッピングしたら、それらのアニメーションを追加しましょう！
セクションと行にアニメーションを追加する方法–オプション1
Diviセクションにアニメーションを追加するのは非常に簡単です。 最初にセクション設定を入力する必要があります。 次に、[デザイン]タブに移動し、[アニメーション]オプションが表示されるまでスクロールします。
[アニメーションオプション]で、選択したアニメーションに対して最大8つの異なるオプションを調整します。
- アニメーションスタイルは、アニメーションの表示方法を選択する場所です。 セクションが転がったり、ボールのようにページの横から跳ね返ったりする場合。 最も一般的なのはフェードとスライドです。
- 方向–要素が移動する方向を設定します。 upの値は、セクションが下から始まり、上に移動することを意味します。 上は原点ではありません。
- 継続時間–アニメーションが開始から終了まで続く時間。 値を小さくすると速度が速くなり、値を大きくすると遅くなります。
- 遅延–このオプションは、アニメーションができるだけ早くトリガーされるのを防ぎ、すぐにトリガーされる場合よりもアニメーションに注意を喚起するのに役立ちます。
- 強度–値が低いほどアニメーションよりも滑らかになり、値が高いほどスッキリしてアグレッシブになります。
- 開始時の不透明度–値が0の場合、アニメーションは非表示になり始め、その間フォーカスがかかります。 100は、アニメーションが始まる前でも要素が完全に表示されていることを意味します。
- 速度曲線–これにより、アニメーションの開始と終了のスムーズさを調整できます。
- 繰り返し–アニメーションは一回限りの効果ですか、それとも何度も繰り返しループしたいものですか？ アニメーションが一度に設定されている場合、ページは再びそれを開始するためにリロードする必要があります。
セクションと行にアニメーションを追加する方法–オプション2
Diviには、スクロール効果と呼ばれる機能もあります。 これらは、ユーザーがビューポートを要素にスクロールするたびにトリガーされるアニメーションです。 スクロール効果は任意の要素に設定でき、前述のアニメーションオプションと組み合わせることができます。
スクロール効果を有効にする方法
繰り返しになりますが、Diviのどの要素でもスクロール効果を有効にするように設定できますが、今日はセクションと行を扱っています。 したがって、セクション設定を入力し、[詳細設定]タブに移動して、[スクロール効果]の見出しを見つけます。
エフェクトとトリガーを選択する
スクロール効果オプション内には、スクロール時にトリガーできるさまざまな種類のアニメーションのさまざまなタブがあります。
- スティッキー位置–ユーザーがスクロールして通過するときにセクションまたは行がユーザーの画面に固定されるかどうか。
- 変換効果–これらは実際のアニメーション効果です：水平および垂直方向の動き、フェードイン/アウト、サイズのスケーリング、回転、およびぼかし。
- [機能]の設定–効果が画面上で最も目立つ場所と、いつ/どこで発生するかを設定できます。
- モーションエフェクトトリガー–要素の上部がビューポート、要素の中心、または下部に入るときにアニメーションを開始するかどうかを決定します。
これらと前のセクションのアニメーションオプションの使用との主な違いは、アニメーションを自動化するか、ユーザーがアクションを実行するたびにアニメーションをトリガーするかによって決まります。 メインチュートリアルの効果に使用するスクロール効果とアニメーションオプションを使用して、アニメーションを組み合わせることができます。
セクションと行のアニメーションの組み合わせ
さまざまなアニメーションを組み合わせてさまざまな時間にトリガーすることで、サイトに素晴らしい効果を生み出すことができます。 [アニメーションの遅延]オプションを使用すると、サイトで一連のセクション、行、要素を順番にアニメーション化して、印象的なビジュアルを引き出すことができます。
まず、[セクション]設定の[アニメーションスタイル]を[スライド]に設定し、[アニメーションの方向]を[上]に設定します。
残りのオプションはデフォルトのままにします。 特にアニメーションの遅延。 セクションが表示されたときにトリガーする必要があります。
行1のアニメーション設定
次に、セクションの最初の行を調整します。 [行]設定に移動し、[デザイン]タブの[アニメーション]オプションに移動して、もう一度[スライド]を選択します。 今回は、方向を下に、アニメーション遅延を500msに変更します。 1000msは1秒に相当します。覚えておいてください。
セクションのタイミングを0msのままにしてすぐにトリガーするため、行をわずかにオフセットして、最初のアニメーションが開始する前にほとんど終了できるようにします。
行2のアニメーション設定
次に、ページの2番目の行の設定に移動し、[アニメーション]オプションに移動します。 ここでも、アニメーションスタイルに[スライド]を選択すると、この行が右にスライドします。
さらに、アニメーション遅延を1000msに設定します。これは、最初のアニメーションが終了するとすぐにトリガーされることを意味します。
行3のアニメーション設定
アニメーション化する3行目では、スクロール効果を使用して目標を達成します。 3番目の行は折り目のすぐ上から始まるため、他の要素と同じように時間遅延を使用しただけでは、ほとんどのアニメーションは表示されません。 だから私たちはそうではないようにそれを作るつもりです。
アニメーションオプション
まず、上記のプロセスを繰り返します。 この行でのみ、アニメーションスタイルをフェードに設定しています。 次に、 Durationを500msに設定して、アニメーション中にこの行がより速く表示されるようにします。 これを開始する前に、他のアニメーションが完全に完了するように、 1500ミリ秒遅らせます。
最後に、開始不透明度が0％に設定されていることを確認してください。 この行は、表示する準備ができるまで非表示にする必要があります。
スクロール効果の設定
エフェクトを組み合わせることができるので、ここで物事が楽しくなります。 行の[詳細設定]タブをクリックして、[スクロール効果]を見つけます。 [水平モーション]タブを見つけて、必ずオンに切り替えてください。 次に、モーションエフェクトトリガーを要素の中央に設定します。 ユーザーのビューポートに行の上部が表示されている場合に備えて、ユーザーがスクロールするまで効果が有効になり始めないようにするために、上部ではなく中央を使用しています。
この設定では、行は他のすべてのアニメーションが表示されるまで待機し、ユーザーがそれに向かってスクロールすると、行全体が画面の横からスライドして表示されます。
最終結果
それをすべて終えると、結果は次のようになります。
デスクトップ
モバイル
結論
アニメーション効果を追加することは、サイトをよりダイナミックで、より面白く、より視覚的に魅力的なものにする確実な方法です。 Diviの組み込みアニメーションおよびスクロール効果ツールを使用して、立ち寄った訪問者を驚かせる素晴らしい組み合わせを作成できます。
セクションと行から何を作成するためにDiviアニメーションエフェクトを使用しましたか？ コメントで見てみましょう！
Vectorchok /shutterstock.comによる記事特集画像