jqueryでモザイク/タイル画像効果を作成する

Question

効果を作成する方法はありますかshown here on msi.comメイン画像？フラッシュでやったが、私はjqueryでそれをやりたい。私はまた、モザイクジェネレーターで試しましたが、効果をうまく再現することはできませんでしたが、ジェネレーターでジェネレーターを使用することも許容されます。

[編集]私は言及に失敗しました。私はアニメーションではなく、エフェクトのタイル/モザイクの側面をエミュレートすることに興味があります。空白（またはカラーのカスタマイズ可能な境界線）で区切られた大きな画像（例：400ピクセル×300ピクセル）を9個の等サイズのブロックまたはタイルに分割したい場合は、

個々の画像に個々のホバー効果を適用したいと思いますが、それぞれの効果を別々のエンティティに与えても、それ以上のアニメーションは必要ありません。

丸みを帯びたコーナーは重要ではありません。

Answer 1

jqueryを使用するとかなり面白いでしょう。画像のテーブルがあり、マウスのオン/オフ時にアニメーションを切り替えたホバーイベントがあります。ロジックはそれほど難しくありません。イメージとアニメーションを素敵に見せることは少し難しくなりますが、元に戻すことはできません。エフェクトをどれくらい再現したいかによって異なります。 ：D

編集：画像のモザイクがほしいですか？テーブルを使用してすべての画像を配置し、イベントにjsを使用できます。あなたは他に何が必要なの？ ：D

Answer 2

ここにアイデアがあります。大きな画像をDIVにロードします。あなたのウィンドウのサイズを決めて、透明にしたい場所にPNGを作成します。 （空白をどれくらい広げるかを制御するために、太さのある境界線では不透明です。）エフェクトを作成するには、3つのレイヤーを使用します。最下層の画像（必要に応じて交換することができます）。中間層と最上層はx軸とy軸に沿って繰り返され、jQueryによって個別に制御されます。中間層には透過性のあるPNGがあり、その上にソリッドカラーのトップレイヤー（ページの背景が見えないように見えますか？）があります。 「きれいな」エフェクトを作成するには、不透明度を調整するか、別々のボックスの最上層をアニメートして、最下層の画像を表示/非表示にします。

私の説明は明らかでした。スマートなコーディングでは、これをパッケージ化してどこでも再利用できます。