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

2019年7月7日

スクロールに合わせてアニメーションするブロックです。

アニメーションサンプル

フリップアニメーション

るな

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

るなぬこ

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

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

右上からフェードイン!

左からのスライドイン

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

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

るな

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

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

鹿苑寺

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

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

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

注意事項

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