Diviスクロールエフェクト

Diviのスクロールアニメーション【Scroll Effects】

Diviに新しい機能が追加されました。

https://www.elegantthemes.com/blog/theme-releases/divi-scroll-effects

このようにスクロールと同時に動くアニメーションを追加できるようになりました!
この機能を『スクロールエフェクト』と呼びます。

これがElegant Themesが作ったスクロールエフェクトのデモページです。
https://elegantthemesexamples.com/motion-effects/

ちょっと凄いですよね。
この記事でその使い方を説明します。

スクロールエフェクトの6つの種類

  • Vertical Motion(縦の動き)
  • Horizontal Motion(縦の動き)
  • Blur(ぼやけ)
  • Fade(透明度)
  • Scale(大きさ)
  • Rotation(回転)

これら六つを単体で使ってもいいですし、組み合わせてアニメーションを作って行きます。

動画もあります。

スクロールアニメーション設定方法

スクロールエフェクトの設定画面

スクロールエフェクトの設定は、『詳細』→『Scroll Effects』にあります。

画像にRotationを入れてみる

スクロールエフェクトをまだ追加してない画像

まずこれがオリジナルの画像です。それでは先ほどの設定画面に行きます。

画像にエフェクトを入れてみる

画像のようにRotationのアイコンをクリックし、『Enable Rotating』を『はい』にします。
そして保存し、ビジュアルビルダーを停止しプレビューしてみましょう。

画像にスクロールアニメーション追加

こんな簡単に回転んするアニメーションを入れることができました。

アニメーションの設定の説明

スクロールアニメーションの設定の詳細

この設定は回転させたいアイテム(例だと画像)が画面のどこにあるかを示しています。
一番左が、アイテムが画面の一番下にある時、50%と書いてる部分が真ん中、そして一番右が画面の一番上です。

一番左で90°となってますね。つまり、画面の一番下では90度回転した状態なわけです。
そして真ん中で0度なので、回転してない状態です。そして最後も0なので、もう真ん中から変化しません。

これを例えば、最後を90°に戻したら、最後にまた90°回転するわけです。
試してみてください。

中間でしばらくアニメーションを消したい時

画面の真ん中あたりでアニメーションを止めないと、文字は読みづらいですよね。
そんな時は、アニメーションを特定の区間止めることができます。

真ん中にアニメーションの区間を作る

このように、真ん中の部分を伸ばすことができます。
この例だと、下から32%から67%の部分のアニメーションを無くしています。
試してみてください。

アニメーションのタイプを合わせて色々作ってみよう

こんな感じで結構簡単にスクロールアニメーションを追加できます。
これらを組み合わせることも可能です。
色々と作って見ましょう。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll to Top