読了目安時間は約 2 分です。
海外サイトを見ていると、画像にマウスカーソルを当てるとクルッと回転して説明書きなどのテキストなどを表示させるという、からくり仕掛けのような表現を見かけることがあります。ホバーで回転させる「フリップ」というアニメーションですが、これをプラグインで簡単に導入できるのが「Flip Box Block」です。
目次
便利なところ
- 簡単にフリップアニメーションを実現できる
- 表裏で別々のブロックを設置できる
- 表裏で異なる内容を表示させることができる
使い方
プラグインをインストールして有効化します。
固定ページや投稿ページなどの編集画面で「Flip Box Block」のブロックを呼び出します。
あとは通常のブロックと同様に設定していきます。
設定
「Flip Box Block」のブロックを選択すると、サイドバーに設定項目が表示されます。
サイドバーから「Front」「Back」を切り替えながらそれぞれを編集してください。
大抵のブロックが入りますので、画像やテキストなどご自由にどうぞ。
まとめ
フリップは日本ではあまり見かけないモーションですが、視覚効果だけでなく手軽にコンテンツを見せることができるのでUI的にも良さそうですね。
ただし使いすぎにはご注意を！
