DIVIテーマに新しくアニメーション機能が追加されたと公式にエレガントテーマから昨日（2017.9.6）発表されました。

今回のアップロードで、各モジュール、コラム、セクション毎にアニメーションが設定できるようになりました。
公式サイトのブログはこちらをクリックしてご覧いただけます。

また今回のアップロードで加わった新機能を使って、簡単にデモページを作成してみました^^

このデモページを使って、今回のアップロードについてざっくり紹介していきたいと思います^^

新しく加わったアニメーション設定！

モジュール、コラム、セクション毎にアニメーションが追加できる

今回のアップロードでは、各モジュール、コラム、セクション毎に個別にアニメーションエフェクトを設定することができます。アニメーションのスタイルは、フェード、スライド、Bounce、Zoom、反転、Fold、Rollの中から選択できます。

今まではスライド・フェードしか使用することができませんでした。それも、特定の画像モジュールのみ！

なので、今回のアップロードはユーザーにとっては、かなり嬉しいアップロードとなりました^^

動画をご覧いただいたらわかる通り、簡単にカスタマイズできるので、初心者の方でもかなりデザインの幅が広がりそうですね^^

アニメーションの追加の仕方は、各設定項目のデザインタブ>>アニメーションで設定できます。

またその他、アニメーションの設定もある程度カスタマイズすることができます。

そんなにわかりづらい設定はないかと思いますが、簡単に各設定項目についてご紹介します。

Animation Repeat:　アニメーションを繰り返すかどうかを設定できます。Onceを設定すると１回のみ、Loopを選択すると永久にループします笑

まあ特に理由がない場合は、Onceを個人的にはオススメします。想像してください。。ずっと何か動き続けてるウェブサイトって相当鬱陶しくないですか。。笑

Animation Direction:　アニメーションが動く方向を設定できます。デモ動画をご覧いただければわかる通り、コンテンツが出てくる方向を右とか左とか選ぶことができます。

Animation Duration:　アニメーションが動く時間を設定できます。数字が小さくなれば速くなり、数字が大きくなれば遅くなります。

Animation Delay:　アニメーションが始まる時間を遅らせることができます。

Animation Starting Opacity:　アニメーションが始まった時にどれくらいの透明度から始まるかを設定することができます。例えば100%から設定すると、ソリッドの状態でアニメーションが始まります。逆に0%などの低い透明度に設定すると、フェードインのようなエフェクトが加わるような感じになります。

Animation Speed Curve:　これは正直あまり変更しても変化がいまいちよくわかりませんでした。が、、一応説明には、アニメーションのスムーズ度を選択できるとのことです。特に気にならなければ、デフォルトのままでいいと思います。

まとめ

今回のアップロードは個人的にはかなりありがたいものとなりました。

他のビルダーは結構アニメーション機能搭載は当たり前なのに、Diviにはしょぼいアニメーション設定しかついてなかったんですよね。。

まあ他にも改善していただきたい点は個人的に多々ありますが、、笑

それでもDiviのビルダーが個人的には一番優秀なビルダーだと思います。そういうわけで、このBlogではDiviを押しまくってるわけなんですが。（決してDiviの回し者というわけではありません笑）もちろん他にも初心者の方でも手軽に使えそうな優秀なビルダーがあればご紹介していきますよ！

このチュートリアルを見て、もしDiviに興味が湧いたという方は、

Diviの購入はこちらから、Diviの基本操作に関するチュートリアルはこちらからご覧いただけます^^

興味のある方はぜひご覧ください^^

それでは次回また他のチュートリアルでお会いしましょう。　See you later<3