imagesLoadedライブラリを使ってグリッドレイアウトを作ってみた～column-countプロパティを添えて～

こんにちわ。nap5です。

imagesLoadedライブラリを使ってグリッドレイアウトを作ってみたので、紹介したいと思います。

imagesLoadedライブラリはこちらです。

https://imagesloaded.desandro.com/

imagesLoaded

column-countプロパティはこちらです。

column-count - CSS: カスケーディングスタイルシート | MDN

デモサイトです。

Vite App

デモコードです。

quiet-pine-5147ne - CodeSandbox

画像読み込み進捗率と完全に同期するローディングアニメーションはなかなか難しい感触があるので、最初にアニメーションしておいて画像が読み込み終わったら、アニメーションを外すのが、安定しそうなイメージです。ローディングアニメションはこだわりだすと終わりがないような沼が見えてきそうです。画像が大量にある程度ないと、プログレスの進捗率が早まってしまうので、匙加減が難しい部分でもあります。デモで、setTimeoutを使ってwatchProgressコールバック関数の実行を若干遅らせているのは、それが理由です。

デモではバニラな感じを残したいので、そのままプログレス値を表示するだけにしています。

最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。

また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/

Web標準のJavascript Animation APIを使ったインタラクティブなカウントアップダウンの作り方

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。