【備忘録】横並びの画像を左から1枚ずつ順番に表示させる方法

こんにちは！ワタナベです。

今回は横並びに並んでいる画像を左から順番に1つずつ表示させる方法の備忘録です～(*‘ω‘ *)

表示エフェクトのフェードインはよく使いますが、横並びを順番に表示させる工程はやや省きがちです。
すぐコピペできるようここに残しておきます(‘ω’)ノ

実装例

↑はウィンドウサイズによって画像が2列⇔3列になります。
ここではブログの幅の関係上2列表示になっていると思います。（3列表示はこちらから確認できます）

まず画像のブロックがスクロールしたら表示されるところまでは普通に作成します。
ここまでだと、スクロールしたら1行全部同じタイミングになると思います。

そこで、表示タイミングに差をつけるためにブロックごとに「transition-delay」を設定していきます。
「transition-delay」は↓の記事でも使用しております(*‘ω‘ *)

【備忘録】文字を1文字ずつウェーブさせながら表示

左側の画像（奇数）を早く、右側の画像（偶数）を遅く表示させます。

奇数　→　nth-of-type(2n+1)
偶数　→　nth-of-type(2n)

↑でそれぞれ「transition-delay」を設定していきます。

左側の画像（1、4、7、10…）を早く、真ん中の画像（2、5、8、11…）、右側の画像（3、6、9、12…）を遅く表示させます。
こちらは数字に慣れてないとややこしく感じますね。

1、4、7、10…　→　nth-of-type(3n+1)
2、5、8、11…　→　nth-of-type(3n+2)
3、6、9、12…　→　nth-of-type(3n)

↑3列の場合はこうなります。

このように設定すると画像が増えたときに便利です(*´ω｀)

それではまた次回。

ご閲覧ありがとうございました♪