Blocks Animationで、フェードインアニメーションを実装

Webサイトを見ていると画像や文字が上下左右から浮き上がってくるページを多く見受けます。当サイトでもトップページなどにJavaScriptを使用して、画像が下から浮き上がってくるアニメーションを実装しています。

WordPressの投稿でも、Classをつければ同じようにアニメーションをつけることができますが、LPなど更新時にコードを扱うのはできれば避けたいところです。今回は、プラグインでCSSアニメーションをつけることができる「Blocks Animation」を紹介します。細かな設定はできませんが、オススメの設定とともに説明いたします。

今回のDEMOはアクリルフィギュアのLPです。今回も、筆者が制作した3Dプリンター用のデータをレンダリングして使用しました。

フィギュア紹介ブロックは、カラム内にメディアとテキストを入れて、PC版は全て左右50:50のレイアウトにしました。SP版は縦並びになります。カラムに、フィギュアと同じ色の背景色を指定しています。

その場でフェードイン

その場でフェードインは、動きはないですが、シンプルなので、いろんなデザインで使えます。今回は、DRUMSとBASSの画像に設定しています。

まず、メディアとテキストを選択します。右サイドバーの、ブロック＞設定＞アニメーションから、アニメーション＞フェード＞フェードインを選択します。設定項目が出てくるので、速度を「やや低速」に設定します。

下書き保存して、プレビューを確認すると、メディアとテキスト全体にフェードインがかかっています。文字は、別のアニメーションをつけるのですが、次項で説明します。

下からフェードイン

スクロールする度、写真が下から上へフェードインしてくるアニメーションは、いろんなWebサイトで見かけますね。今回のDEMOでも多く使用しています。

1つ目は、文字に設定をしてます。今回のDEMOの見出しとテキストは、すべて下から上にフェードインさせています。まず、見出しを選択して、アニメーション＞フェード＞上へフェードインを選択し、速度を「やや低速」にします。

同じようにテキストも、アニメーションを「上へフェードイン」、速度を「やや低速」に設定します。下書き保存して、プレビューを確認し、文字が読み込まれたタイミングで、上にフェードインしていれば完成です。

ACCORDIONからFLUGELHORNまでの4つのフィギュアは、左右で時間差をつけてズレのあるフェードアップアニメーションを設定します。

まず、左のメディアとテキストを選択して、アニメーション＞フェード＞上へフェードインを速度「やや低速」で指定します。右も同じように設定しますが、追加で、設定項目の「遅延」に「200ミリ秒」を指定します。

横並びなので通常同じタイミングでフェードインしますが、この設定により右のカラムが0.2秒遅れてフェードインするので、左右でズレのあるアニメーションが実装されます。

また、ACRYL FIGUREの3カラムも、同じような設定で、上にフェードインと、遅延で作成しています。中央のカラムが、遅延「100ミリ秒」、右のカラムが、遅延「200ミリ秒」に設定しています。

左からフェードイン

最後は、横からのフェードインで、オススメは、左から右へのフェードインです。

メディアとテキストを選択し、アニメーション＞フェード＞左へフェードインを選択します。プレビューを確認すると左からブロックが表示されます。

KEYBOARD、VIOLINEでは、左右カラムが重なってフェードインするアニメーションを設定します。左のメディアとテキストに、アニメーション＞フェード＞左へフェードインを選択します。同じように右のメディアとテキストに「左へフェードイン」を設定して、「遅延」を「200ミリ秒」に設定します。プレビューを確認すると、右のメディアテキストが右へフェードインしながら、左のメディアとテキストを追い越してフェードインされます。

以上で説明は終了です。今回紹介した設定で、フェードインや下からフェードインなどをうまく使うと、ふわっとしたアニメーションが簡単にできるので、便利です。他にもいろいろなアニメーションがあるのでデザインに合わせて使い分けることができます。

Webサイト制作のご依頼は、コンタクトフォームよりよろしくお願いします。