スクロールアニメーションブロック追加 Luxeritas 3.9.0

Luxeritas 3.9.0

Luxeritas Theme 3.9.0 をリリース。

Luxeritas Blocks に「スクロールアニメ」ブロックを追加しました。

なので、今回の解説記事は全体的にアニメーションしまくりますw

スクロールアニメーション解説

スクロールアニメーションの設定画面

Luxeritas Blocks で「スクロールアニメ」を選択すると、上記の設定画面が出てきます。

アニメの種類やアニメーションする時間、開始位置などを設定できます。

「スクロールアニメ」ブロック内に他のブロックを入れることで、そのブロックをアニメーションさせることができます。

「スクロールアニメ」ブロックの見た目

アニメーションサンプル

フリップアニメーション

るな

吹き出しブロックを
左からアニメーションしてます。

るなぬこ

吹き出しブロックを
右からアニメーションしてます。

1.5 秒かけて、ゆっくりズームイン

右上からフェードイン!

左からのスライドイン

トピックブロックを左からスライドインさせてます。

3秒かけてゆっくりと
縦にフリップ

るな

下からフェードイン
ライディーン!!

枠線ブロック内の文章をフェードインさせる。

鹿苑寺

山号 : 北山
宗派 : 臨済宗相国寺派
寺格 : 相国寺山外塔頭
本尊 : 観音菩薩
開山 : 夢窓疎石
開基 : 足利義満

再利用ブロックウィジェットを使うとウィジェット内のコンテンツもアニメーションします。😀

上に戻ると再度アニメし直します。

注意事項

  1. スクロールアニメを使用しているページでは LazyLoad は無効化されます。
  2. AMP ページではアニメーションしません。

その他の機能拡張

ブロックエディタでブロックが入れ子になってる場合、入れ子の状態が分かるように、親ブロックを黄色い枠線で囲むようにしてみました。

入れ子の状態が分かるようにした

改訂履歴

機能追加

  1. ブロックエディタの Luxeritas Blocks に「スクロールアニメ」ブロックを追加

機能拡張

  1. ブロックエディタでブロックが入れ子になってる場合、入れ子の状態が分かるように、親ブロックを黄色い枠線で囲むようにした

不具合修正

  1. 引数のあるショートコードだと、広告/アドセンスウィジェットでショートコードが動作しない不具合修正
  2. Luxeritas メニューの「ショートコード登録」で登録したショートコードだと、広告/アドセンスウィジェットで動作しない不具合修正

WP 5.4 対応その3

  1. ブロックエディタで日本語翻訳されなくなった箇所を翻訳

その他、仕様変更等

  1. カスタム HTML ウィジェットでもショートコードが動作するようにした
  2. フッターナビを縦並びにした際の上下間隔(タップターゲット)を 4px 広げた(Lighthouse の監査で指摘が出たため)
  3. ブロックエディタで入れ子のある親ブロックを表すボタンを「親ブロック選択」という文言だったのを「ブロック名」に変更した

Luxeritas

Posted by るな