2010-12-14 17 views
3

jQueryを使用して、移動する光源をシミュレートして、HTML要素にシマー効果を作成する方法はありますか?私はこれをFlashコンポーネントで見ていますが、まだjQueryで見たことがありません。可能であれば、光るGIFを作る必要がないようにしたい。jQuery Shimmer Button Effect

EDIT1:私はホバーイベントをキャプチャし、右一度に左からそれを移動し、IMGまたはDIVタグの境界線の上に白いファジー斜めの画像をスタックするアニメーションを使用する必要があります想像します。ここで

答えて

2

は一例を作った:http://www.jsfiddle.net/gaby/pZm2m/

はあなたが何であるかにこの似ています探している ?

斜め半透明の画像をアニメーションします。

私は別の機会http://plugins.jquery.com/project/backgroundPosition-Effect

+0

ビンゴ!それでおしまい! :) – Volomike

+0

私はBinHex'dとURLエンコードされた画像がCSSで読み込まれたのは初めてです。私はそれが可能であることを知らなかった。単に驚くべきことですが、IEでも動作します。 (IE8と最新のFFでテストされています。)さらに、もしブラウザがそれをサポートしていなければ、私たちは誤りではなく、うまく機能しません。 – Volomike

+0

イェップ、それは私が最近自分で学んだクールなトリックです。 –

3

は、jQueryのきらめき効果(ポストの下部にあるデモリンク)とチュートリアルです:

http://www.eu-live.com/?p=164

+0

残念ながら効果のそのバージョンは白い境界線を強調し、全体の光源を輝かしませんリンゴそのもの。リンゴの光源を照らすものを探しています。 – Volomike

+0

@Volomike、同様のコードを使用することもできますが、画像に透明性を適用して上に重ねることができます。しかし、リンゴを横切って光源を照らすことは、かなりの足になります。そのためには3Dレンダリングエンジンが必要です。 – tster

0

で発見のbackground-position-アニメーションプラグインはこの1つである使用:

http://www.nealgrosskopf.com/tech/thread.php?pid=79

はCSS3を使用し、最近(2011+)のMozilla、Operaの上で動作します、Chrome、Safari、そしておそらくはIEになります。