![](https://cxg-design.jp/wp-content/uploads/2024/01/387ed1b13999e92be3e90b940846ec9e.jpg)
Blocks Animationで、フェードインアニメーションを実装
Webサイトを見ていると画像や文字が上下左右から浮き上がってくるページを多く見受けます。当サイトでもトップページなどにJavaScriptを使用して、画像が下から浮き上がってくるアニメーションを実装しています。
WordPressの投稿でも、Classをつければ同じようにアニメーションをつけることができますが、LPなど更新時にコードを扱うのはできれば避けたいところです。今回は、プラグインでCSSアニメーションをつけることができる「Blocks Animation」を紹介します。細かな設定はできませんが、オススメの設定とともに説明いたします。
![](https://cxg-design.jp/wp-content/uploads/2024/01/5d1efe1536880f1e36f4a6389b7601e4.png)
出典 : Blocks Animation
今回のDEMOはアクリルフィギュアのLPです。今回も、筆者が制作した3Dプリンター用のデータをレンダリングして使用しました。
フィギュア紹介ブロックは、カラム内にメディアとテキストを入れて、PC版は全て左右50:50のレイアウトにしました。SP版は縦並びになります。カラムに、フィギュアと同じ色の背景色を指定しています。
![](https://cxg-design.jp/wp-content/uploads/2024/01/2189e07066429ec7e2ae900b71a962e5.png)
カラム内に、メディアとテキストを「メディアの幅」50で入れ、モバイルでは縦に並べるにチェック。
![](https://cxg-design.jp/wp-content/uploads/2024/01/634bb9a088aa41f0d4b3b453f5f4a8e6.png)
カラムの背景にフィギュアの色を入れる
その場でフェードイン
![](https://cxg-design.jp/wp-content/uploads/2024/01/e63de06bf7679f5b785e589d9111d845.jpg)
その場でフェードインは、動きはないですが、シンプルなので、いろんなデザインで使えます。今回は、DRUMSとBASSの画像に設定しています。
まず、メディアとテキストを選択します。右サイドバーの、ブロック>設定>アニメーションから、アニメーション>フェード>フェードインを選択します。設定項目が出てくるので、速度を「やや低速」に設定します。
下書き保存して、プレビューを確認すると、メディアとテキスト全体にフェードインがかかっています。文字は、別のアニメーションをつけるのですが、次項で説明します。
![](https://cxg-design.jp/wp-content/uploads/2024/01/1fec41983d4db51798e9c9e4b2c52163.png)
ブロック>設定>アニメーションをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/01/9b433f382e68561b18ee4e6e5cbd5dc3.png)
アニメーションを「フェードイン」、速度を「やや低速」に設定。
下からフェードイン
![](https://cxg-design.jp/wp-content/uploads/2024/01/fca2230a198ec0dfa61b155302499ef3-1.jpg)
スクロールする度、写真が下から上へフェードインしてくるアニメーションは、いろんなWebサイトで見かけますね。今回のDEMOでも多く使用しています。
1つ目は、文字に設定をしてます。今回のDEMOの見出しとテキストは、すべて下から上にフェードインさせています。まず、見出しを選択して、アニメーション>フェード>上へフェードインを選択し、速度を「やや低速」にします。
同じようにテキストも、アニメーションを「上へフェードイン」、速度を「やや低速」に設定します。下書き保存して、プレビューを確認し、文字が読み込まれたタイミングで、上にフェードインしていれば完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/01/7be3c22a0a09346244a16009743b4e60.png)
見出しに、アニメーション「上へフェードイン」、速度「やや低速」を設定
![](https://cxg-design.jp/wp-content/uploads/2024/01/9767b2256ccd966a68e7a607b9040608.png)
テキストにも、アニメーション「上へフェードイン」、速度「やや低速」を設定
ACCORDIONからFLUGELHORNまでの4つのフィギュアは、左右で時間差をつけてズレのあるフェードアップアニメーションを設定します。
まず、左のメディアとテキストを選択して、アニメーション>フェード>上へフェードインを速度「やや低速」で指定します。右も同じように設定しますが、追加で、設定項目の「遅延」に「200ミリ秒」を指定します。
横並びなので通常同じタイミングでフェードインしますが、この設定により右のカラムが0.2秒遅れてフェードインするので、左右でズレのあるアニメーションが実装されます。
![](https://cxg-design.jp/wp-content/uploads/2024/01/ee33f702572a646c8c08e3a84b6ff769.png)
左のメディアとテキストに、アニメーション「上へフェードイン」、速度「やや低速」を設定
![](https://cxg-design.jp/wp-content/uploads/2024/01/f29619f947024a56a0821d73da6c4d1f.png)
右のメディアとテキストに、アニメーション「上へフェードイン」、遅延「200ミリ秒」、速度「やや低速」を設定
![](https://cxg-design.jp/wp-content/uploads/2024/01/46eadd2c3f00f18d390b5c39bfe26de3.png)
また、ACRYL FIGUREの3カラムも、同じような設定で、上にフェードインと、遅延で作成しています。中央のカラムが、遅延「100ミリ秒」、右のカラムが、遅延「200ミリ秒」に設定しています。
![](https://cxg-design.jp/wp-content/uploads/2024/01/e062bbf887e84041c56f1c27be379c6b.png)
左のカラムに、アニメーション「上へフェードイン」、速度「やや低速」を設定
![](https://cxg-design.jp/wp-content/uploads/2024/01/b8344047c6dcb15f7152fa1f4579ecd3.png)
中央のカラムに、アニメーション「上へフェードイン」、遅延「100ミリ秒」、速度「やや低速」を設定
![](https://cxg-design.jp/wp-content/uploads/2024/01/8ff3d7f930191b81ea1cfc1ba83fb0a0.png)
右のカラムに、アニメーション「上へフェードイン」、遅延「200ミリ秒」、速度「やや低速」を設定
SPでの縦並びの遅延時間
今回のDEMOでは、ACRYL FIGUREの3項目や、フィギュア紹介ブロックはPCでは横並びですが、SPになると縦並びになるよう設定しています。PCのような横並びの遅延は、ズレが生じて演出になります。ですが、SPでは、ただ表示が遅いだけのアニメーションになります。なので、横並びの遅延時間は、できる限り短くしましょう。
左からフェードイン
![](https://cxg-design.jp/wp-content/uploads/2024/01/ab7325d50ca4fc896ecae34ff7aef10b.jpg)
![](https://cxg-design.jp/wp-content/uploads/2024/01/8526e6d04d3cf9f76e28e0e78721069f-1.jpg)
最後は、横からのフェードインで、オススメは、左から右へのフェードインです。
メディアとテキストを選択し、アニメーション>フェード>左へフェードインを選択します。プレビューを確認すると左からブロックが表示されます。
![](https://cxg-design.jp/wp-content/uploads/2024/01/b114539c49a8fa5b85b68ed021c7b5b5.png)
メディアとテキストに、アニメーション「左へフェードイン」、速度「やや低速」を設定
左へフェードイン=左からフェードイン
日本語の問題ですが、今回のプラグインの「左へフェードイン」は、私たちから見てブラウザの左側から右へのフェードインになります。紛らわしいですが、「右へフェードイン」もブラウザの右側から左へのフェードインになります。
KEYBOARD、VIOLINEでは、左右カラムが重なってフェードインするアニメーションを設定します。左のメディアとテキストに、アニメーション>フェード>左へフェードインを選択します。同じように右のメディアとテキストに「左へフェードイン」を設定して、「遅延」を「200ミリ秒」に設定します。プレビューを確認すると、右のメディアテキストが右へフェードインしながら、左のメディアとテキストを追い越してフェードインされます。
![](https://cxg-design.jp/wp-content/uploads/2024/01/42382d146a823ad3a93f84c0e83962a5.png)
右のメディアとテキストに、アニメーション「上へフェードイン」、速度「やや低速」を設定
![](https://cxg-design.jp/wp-content/uploads/2024/01/a44a96fa070644e53434f9e6f02c1642.png)
右のメディアとテキストに、アニメーション「左へフェードイン」、遅延「200ミリ秒」、速度「やや低速」を設定
アニメーションの不具合
アニメーションは種類によって、特定のデバイスやブラウザで、指定した動きにならない場合があります。設定したらできる限り多くのデバイス、ブラウザでプレビューを確認しましょう
以上で説明は終了です。今回紹介した設定で、フェードインや下からフェードインなどをうまく使うと、ふわっとしたアニメーションが簡単にできるので、便利です。他にもいろいろなアニメーションがあるのでデザインに合わせて使い分けることができます。
Webサイト制作のご依頼は、コンタクトフォームよりよろしくお願いします。