【SWELL】テキストや画像にアニメーションをつける方法！

自分のブログやホームページにアニメーションをつける方法です！

今回はプラグイン「Blocks Animation」を使った方法を解説していきたいと思います。

「Blocks Animation」のインストール

さて早速ですがプラグインをインストールしていきましょう！

プラグインを新規追加のところで「Blocks Animation」と検索すると、

このようなプラグインがあるかと思います。

こちらをインストールして、有効化しましょう。

アニメーションをつけてみよう！

では、実際にアニメーションをつけていきます。

投稿の執筆ページにて、テキスト、もしくは画像を選択しましょう。

そして右端のブロック欄を下にスクロールしていくと

こんな感じの項目がずらりと並んでおり、先ほどのインストールで、「アニメーション」というランが追加されていることがわかります。

ここから設定してきます。

アニメーションを下に開くと、

このような項目が出てきます。ここのアニメーションというところから、

自分が設定したいアニメーションを設定します。

「フェードイン」などのアニメーションを選択すると次に

「遅延」と「速度」を設定できるようになります。

• 遅延　　そのページが表示されてから、アニメーションが行われるまでの時間
• 速度　　アニメーションの速度

遅延させすぎると、読者に不快感を与えてしまい、早すぎると、アニメーションが見えないということもあるので、自分で何回も見て調節しましょう。

まとめ

コーポレートサイトなどではアニメーションをつけることによって一気に高級感が増します。

アニメーションを多用するとよりカスタマイズが効くので、ぜひ「Blocks Animation」を使ってみてくださいね！