１つのアイコンだけに・・・

今回から、個別のアイコンにエフェクトを掛けていきます。
アイコンを個別に指定するには、以下のように指定します。
page[アイコン番号]
アイコンを特定したら、ページ全体に掛けたエフェクトと同じことができます。
アイコン番号ですが、アイコンは「○列の□行目」という概念ではなく、単純に通し番号で管理されています。
左上から右へ順に番号が振られますが、奇数列や３行目などを特定しようとすると、逆に面倒になってしまいますね。

ここからは、アイコン番号を変えながら、いくつかサンプルを紹介します。

1つ目のアイコンを移動させる

１つ目のアイコンを特定するには、以下のように記述します。
page[1]
offsetを使って、translateで移動させます。

以下は、個別移動エフェクトのサンプルです。

アイコン番号１番目である左上のアイコンだけが倍速移動します。

これだけだと、まだ有り難みが分かりませんね。

4つ目のアイコンを回転させる

4つ目のアイコンを特定するには、以下のように記述します。
page[4]
angleを算出し、rotateで回転させます。

以下は、個別回転エフェクトのサンプルです。

右上のアイコンが回転移動します。

まだまだ有り難みが分かりませんね。

8つ目のアイコンを拡大させる

8つ目のアイコンを特定するには、以下のように記述します。
page[8]
percentを算出し、scaleで拡大させます。

以下は、個別拡大エフェクトのサンプルです。

右の上から２番目のアイコンが拡大しながら移動します。
割合を５倍にしたので、大きくなる様を見ることができますね。

何となく使えそうな気がしてきました。

10コ目のアイコンを透過させる

10コ目のアイコンを特定するには、以下のように記述します。
page[10]
percentを算出し、alphaで透過させます。

以下は、個別透過エフェクトのサンプルです。

アイコン番号10番目のアイコンが透過しながら移動します。
サンプルでは、透過の割合を３倍にしています。

組み合わせれば使えそうですね。